iOS Data Grid Table View

iOS Data Grid Table View

An alternative to UITableView - a customizable table view for displaying data in a grid / table using columns and rows.

  • Language: Objective-C
    Framework: UIKit
    Platform(s): iPad
  • Released: Sep 29, 2011
    Last Update: Feb 28, 2012

Displaying Data in Rows and Columns made easy

The common table component UITableView isn't very helpful for displaying data in multiple columns, which is often a requirement - especially in iPad Apps, where you have plenty of space to display data. Adding this functionality is very time consuming - not to mention the effort it takes to make it look the way you want.

This is where iOS Data Grid Table View comes into play. It makes it easy to customize its layout and brings all the functionality you need to display data in rows and columns.

Data grid view

Hide

Features

  • Lets you display Data in Rows and Columns

  • Customizable Line Borders & Colors

  • Customizable Column Views

  • Fixed or variable-sized Column Widths

  • Works on iPhone and iPad

  • Handles large Datasets while keeping Memory Footprint low and Scrolling smooth (up to 10,000 rows with 5 columns each won't be an issue on iPad 2)

  • Table supports vertical Scrolling

  • iOS 5 Compatible, Supports ARC and non-ARC Builds

  • Includes the following Examples to get you started:

    • Sorting

    • Touch Recognition

    • Different number of columns depending on interface orientation

    • Dynamically adding and removing rows and columns

Hide

Installation

1. Unzip the component archive

2. Open the folder "Classes" and locate the folder "UMTableView"

alt text

3. Now drag this folder into your Xcode Project and make sure you are using a group reference. (I usually also tick "Copy items..." since I like to have all external source code contained in my project folder.)

alt text

4. Now add import statements for either "UMTableView.h" or "UMTableViewController.h" and you are good to go!

Hide

How to Use

1. Create a UMTableView in your UIViewController

- (void) loadView {
  [super loadView];
  CGRect frm = CGRectMake(0, 0, 600, 400);
  UMTableView* tableView = [[UMTableView alloc] initWithFrame: frm];
  tableView.tableViewDelegate = self;
  [self.view addSubview:tableView];
  [tableView release];
}

1b. Alternative: Just extend UMViewController and omit Step 1

2. Implement Delegate

- (int) rowHeight {
    return 72;
}

- (int) numColumns {
    return 4;
}

- (int) numRows {
    return 32;
}          

// Only 3rd column has a fixed size, the other columns share the remainder
- (int) fixedWidthForColumn: (int) columnIndex {
    if (columnIndex == 2) {
        return 62;
    }
    else {
        return 0;
    }
}    

// Only 3rd column has a fixed size
- (Boolean) hasColumnFixedWidth: (int) columnIndex {
    return columnIndex == 2;
}

- (UIColor*) borderColor {
    return [UIColor blackColor];
}    

// Customize cells and provide data content
// Note: the cellView will always be empty (except its label)
- (void) layoutView: (UMCellView*) cellView 
             forRow: (int) row 
           inColumn: (int) column {

    cellView.backgroundColor = [UIColor clearColor];
    cellView.label.font = [UIFont boldSystemFontOfSize:15];
    cellView.label.textColor = [UIColor whiteColor];
    cellView.label.text = @"Test";

   // This will center the label horizontally
   cellView.label.textAlignment = UITextAlignmentCenter;

   // You can add subviews like this
   UITextField* textField = [UITextField new];
   textField.tag = tag;
   textField.frame = CGRectMake(10, 10, 120, 40); 
   [cellView addSubview:textField];

   // In case you don't use ARC
   [textField release];
}
Hide

Borders and Outlines

How to define only outlines (no borders between rows and columns)

UMTableView* tableView = [[UMTableView alloc] initWithFrame:...];
tableView.borderMode = UMTableViewBordersNone;
tableView.outlineMode = UMTableViewOutlineTop | UMTableViewOutlineBottom | UMTableViewOutlineLeft | UMTableViewOutlineRight;

How to define only borders between rows without outlines

UMTableView* tableView = [[UMTableView alloc] initWithFrame:...];
tableView.borderMode = UMTableViewBordersRows;
tableView.outlineMode = UMTableViewOutlineNone;
Hide

New in v. 2.0

Not fully backwards compatible to prior versions / implementations of this component

Just note that due to the major rewrite, a few things changed in this version. If you want to update your project to 2.0 read the section Updating to 2.0 below.

Performance and Memory

In this new version there will be only UMCellViews created and passed to layoutView: of rows that are actually visible. While scrolling, views that are not visible anymore will be removed for later reuse and rows that have become visible will be redrawn and passed to layoutView:. This makes it possible to display and edit huge tables without memory issues or scrolling speed impact.

Always a fresh UMCellView

In former versions you had to take care of removing former subviews that you might have added. Now you will always get a fresh UMCellView which won't have any subviews other than its label and no gesture recognizers either.

All rows now must have the same height

This was necessary to ensure good performance.

Removed Feature: Visual Row Deletion

The method deleteRow has been removed. Please have a look at the example 'AddRemove' to achieve a similar effect.

Added Feature: Access Views

The method viewInRow:column: has been added so that effects like 'visual deletion' are possible. Please use this method with care since it may return nil if a view has been removed (as it's not visible anymore). It's also not the right place to change its content, please change your model instead and call refresh on the table.

New Examples

The following examples were added to the source code package:

Touch-Example

Shows how to add gesture recognizers and handle touches on cells.

VariableColumns-Example

Shows how to show less columns in portrait orientation.

AddRemove-Example

Shows how to dynamically add columns and rows to the table/model.

Sorting-Example

Shows how to sort your model (ascending and descending) and update the table.

Updating your code to 2.0

To update your project you have to follow these steps:

  1. Copy the new sourcefiles to your project (-> Replace UMTableView folder).

  2. Change the delegate method heightForRow:rowIndex to rowHeight.

  3. Remove any calls to deleteRow if you have been using this feature. (Sorry).

  4. Clean your project, build and keep an eye out for warnings.

Hide

FAQ

Does the table delegate touches?

Not at this time. However you could add gesture recognizers to cell views and change a cell's background color when being touched to achieve a behaviour that is similar to UITableView.

Does the component support vertical scrolling?

Yes. Since it extends UIScrollView you can also use various properties to finetune the scrolling behaviour.

Does the component support horizontal scrolling?

No.

Is there a way to have a fixed header row/column that doesn't scroll?

No. To achieve this I recommend adding another view as a header row/column.

How are cell views customized?

Since a UMCellView is just a plain view with only one subview (a label) you can customize it like you would with any other UIView.

Is the component compatible with iOS5?

Yes. Also the recent version supports building with and without Automatic Reference Counting.

I'm getting a warning that states: Incompatible pointer types assigning to NSObject...

Your class interface needs to implement the delegate like this:

#import "UMTableViewDelegate.h"

@interface MyViewController : UIViewController {
}
@end 
You need to log-in or create an account
  • Create an account
  • Log-in
Please use your real name.
Activation link will be sent to this address.
Minimum 8 characters
Enter your password again

Clicking this button confirms you read and agreed to the terms of use and privacy policy.

X

Save your watchlist

Fill your details below to receive project updates from your watch list - including new versions, price changes and discounts.

I agree to the terms of use and privacy policy.

3 licenses, starting from From » $129.99 14 day money-back guarantee View Licenses
or Get a quote

for customization or integration services

  • Source code is bit simple, but its very comfortable control.
    I would venture to say, the documentation is little bit cheap.
    SM Shuichi Miura
    3 years ago, 0 comments
    Was this helpful?
    Flag 1 of 1 people found this review helpful
  • Very useful, time-saving component! Great implementation, performance and memory-wise!
    SP Spiros Pilafas
    2 years ago, 0 comments
    Was this helpful?
    Flag
  • Good So 1!
    L Larry Beer
    3 years ago, 0 comments
    Was this helpful?
    Flag
Post a comment

Or enter your name and Email
  • AC Adam Charlton 5 months ago
    I am considering purchasing your component, could you tell me if it supports editing data and also if it could be used in Xamarin? Thank you
  • Z zangyk 8 months ago
    Where to download the document about iOS Data Grid Table View?
    • Christian Scheid Developer 8 months ago
      All existing documentation is on this page. There's also a pdf with roughly the same info in the project zip when you buy it.
  • C Casey 1 year ago
    I would like to know if it is possibly to add small uiimage icons into some cells ? I'm looking to buy shortly but would like to know this before I do. I'm confident I could implement it I just want to make sure this is actually possible and won't mean a lot of hacking to get working with small images in some cells... Thank you
    • Christian Scheid Developer 1 year ago
      Hi Casey, it won't be a problem to add images to the cells. Let me know if you have further questions.