Question

I’m trying to get a table layout as shown below working with view-based NSTableViews that have been introduced in Lion.

There were multiple approaches described for cell-based NSTableViews, e.g. Mimic the artwork column, but these don’t really apply for view based table views.

The idea is that the table gets populated by an array of objects, in one (or more) column spanning rows indicating that objects share some data in common. numberOfRowsInTableView: returns to total number of items (19 in the case of the attached image).

Has anyone tried something like this?

Layout

Answer 1

I was able to do this by using two separate NSTableViews that have their NSScrollView’s scrolling synchronized. To learn how to synchronize multiple scroll view’s (with the exact subclass code) read Scroll View Programming Guide for Mac – Synchronizing Scroll Views

I have groupTableView that has a single column and shows the views that represent the group. I also have itemTableView that has columns representing the items of the group. I use the same delegate/datasource methods with if-else-statements to check which NSTableView is being used and respond accordingly with the proper # of rows, cell view, etc.. Additionally, I implement the following delegate method to adjust the group table view’s row height to be equal the sum of the item row heights of the rows in the group:

- (CGFloat)tableView:(NSTableView *)tableView heightOfRow:(NSInteger)row
{
    if (tableView == self.groupTableView) {
        NSUInteger firstRowIndexForGroup = ...;
        NSUInteger lastRowIndexForGroup = ...;
        CGFloat groupHeight = 0.0;
        for (NSUInteger currentRowIndex = firstRowIndexForGroup; currentRowIndex <= lastRowIndexForGroup; currentRowIndex++) {
            groupHeight += [self.itemTableView rectOfRow:lastRowIndexForGroup].size.height;
        }
        return groupHeight - [self.itemTableView intercellSpacing].height;
    } else {
        return self.itemTableView.rowHeight;
    }
}

You must also call -noteHeightOfRowsWithIndexesChanged: every time the table view needs a group view because the height changes according to the number of rows in the group.

- (NSView *)tableView:(NSTableView *)tableView viewForTableColumn:(NSTableColumn *)tableColumn row:(NSInteger)row
{
    if (tableView == self.groupTableView) {
        GroupRowView *view = [tableView makeViewWithIdentifier:tableColumn.identifier owner:self];
        // configure view
        [tableView noteHeightOfRowsWithIndexesChanged:[NSIndexSet indexSetWithIndex:row]];
        return view;
    } else {
        ItemRowView *view = [tableView makeViewWithIdentifier:tableColumn.identifier owner:self];
        // configure view
        return view;
    }
}

I disabled row selection and horizontal and vertical scroll bars on the group table view. I also made the horizontal grid solid for both table views. Finally, I position the group table view directly next to the item table view with no gap in between so it appears as if it’s simply another column in a single table view. The result is a flawless implementation that has zero lag between the table views. To the user, it appears as if it’s a single table view.