How do I create a UI TableView with multiple columns in Xcode?

Question

I am working on a iOS 8 app with Xcode. I need to display a table with many columns and rows of data in one view.

Example:

Name               Time In       Time Out      ETA
Johnnys Supplies    8:30AM        9:00AM      10:15AM
Franks Company      8:45AM        9:05AM      9:45AM
Another Inc.        10:12AM       11:00AM     12:04PM

All of the data would be read in with JSON/PHP.

I need it to work like a tableview where a user can scroll vertically, and select an index. Once that index is selected, the user can click a button to run additional queries based on the data in the selected cell (etc.).

What is the easiest way to implement this? There has to be a way xcode allows you to do this natively? Am I missing something?

All coding examples welcomed!

I have found two options but both require licensing fees:

http://www.ioscomponents.com/Home/IOSDataGrid <-- $400

http://www.binpress.com/app/ios-data-grid-table-view/586 <-- $130

Anyone familiar with these components?

Answer 1

What's the difference between two columns and two labels next to each other? A divider?

Is this a multi column table view?

Because it's a tableview with ordinary UITableViewCell that have 3 UILabels and 2 UIViews. The views pretend to be dividers by being 1 px wide.

Code should be self explanatory.

.h

@interface MultiColumnTableViewCell : UITableViewCell
@property (strong, nonatomic) UILabel *label1;
@property (strong, nonatomic) UILabel *label2;
@property (strong, nonatomic) UILabel *label3;
@end

.m

@interface MultiColumnTableViewCell ()
@property (strong, nonatomic) UIView *divider1;
@property (strong, nonatomic) UIView *divider2;
@end

@implementation MultiColumnTableViewCell

- (UILabel *)label {
    UILabel *label = [[UILabel alloc] init];
    label.translatesAutoresizingMaskIntoConstraints = NO;
    [self.contentView addSubview:label];
    return label;
}

- (UIView *)divider {
    UIView *view = [[UIView alloc] init];
    view.translatesAutoresizingMaskIntoConstraints = NO;
    [view addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:1.0/[[UIScreen mainScreen] scale]]];
    view.backgroundColor = [UIColor lightGrayColor];
    [self.contentView addSubview:view];
    return view;
}

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    self.separatorInset = UIEdgeInsetsZero;
    self.layoutMargins = UIEdgeInsetsZero;
    self.preservesSuperviewLayoutMargins = NO;

    self.divider1 = [self divider];
    self.divider2 = [self divider];

    self.label1 = [self label];
    self.label2 = [self label];
    self.label3 = [self label];

    NSDictionary *views = NSDictionaryOfVariableBindings(_label1, _label2, _label3, _divider1, _divider2);

    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-5-[_label1]-2-[_divider1]-2-[_label2(==_label1)]-2-[_divider2]-2-[_label3(==_label1)]-5-|" options:NSLayoutFormatAlignAllCenterY metrics:nil views:views];
    [self.contentView addConstraints:constraints];

    NSArray *horizontalConstraints1 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[_divider1]|" options:0 metrics:nil views:views];
    [self.contentView addConstraints:horizontalConstraints1];
    NSArray *horizontalConstraints2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[_divider2]|" options:0 metrics:nil views:views];
    [self.contentView addConstraints:horizontalConstraints2];

    return self;
}

@end

TableViewController:

@implementation MasterViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.tableView registerClass:[MultiColumnTableViewCell class] forCellReuseIdentifier:@"Cell"];
    self.tableView.separatorColor = [UIColor lightGrayColor];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 10;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    MultiColumnTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath];
    cell.label1.text = [NSString stringWithFormat:@"Name %ld", (long)indexPath.row];
    cell.label2.text = [NSString stringWithFormat:@"Start %ld", (long)indexPath.row];
    cell.label3.text = [NSString stringWithFormat:@"End %ld", (long)indexPath.row];
    return cell;
}

@end

Answer 2

Use UICollectionView, check Apple WWDC 2012 sessions

• 205 Introducing Collection Views
• 219 Advanced Collection Views and Building Custom Layouts

from https://developer.apple.com/videos/wwdc/2012/

Answer 3

iOS table views are always a single column. On Mac OS you can create what you are after directly.

That said, you could create custom table view cells that display the content you want. In fact it would be quite easy. All you would do is to subclass UITableViewCell and define views (probably UILabels) for each of you columns, then wire them up as outlet properties in the cell. Then rig your table view to register that cell class for the cell identifier you use.

You then write your cellForRowAtIndexPath method to install your data into the different outlet properties.

You could also use a UICollectionView, but it looks to me like a table view with custom cells is a better fit for this application.