iOS Data Grid Table View

iOS Data Grid Table View

Released 5 years ago , Last update 4 years ago

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

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.

  • 5 4
  • 4 3
  • 3 1
  • 2 0
  • 1 0
8 Reviews Read Reviews


14 day 14-day money-back guarantee


One App License

  • Perpetual license

  • 1 application

  • Can distribute binary products only

  • Commercial use


Unlimited Apps License

  • Perpetual license

  • unlimited applications

  • Can distribute binary products only

  • Commercial use


  • 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

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];


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!

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;


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?


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 {

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:


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


Shows how to show less columns in portrait orientation.


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


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.

3 licenses, starting from From » $129.99 View Licenses

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.

Or enter your name and Email
  • JH John Harries 1 year ago
    Is this grid view zoomable?
  • RM R M 2 years ago
    Does this support auto-layout or do you need to force init it with a frame?
    • Christian Scheid Publisher 2 years ago
      Hey there, I just checked and it doesn't support auto-layout. You would need to call initWithFrame to make it work.
  • AC Adam Charlton 2 years 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