View Based NSTableView with Sections

Question

I am looking for a way to create the iOS like sections in NSTableView (like in iTunes 11 - Attached).

As you can see in the screenshot, "Albums" is one section and "Songs" is second. Any help would be appreciated.

Thanks!

Answer 1

I see this is an old question, but the answer is to use a View based NSTableView then implement tableView:viewForTableColumn:row:.

This is code based on how I do it. It hasn't been compiled in Xcode.

-(NSView *)tableView:(NSTableView *)tableView viewForTableColumn:(NSTableColumn *)tableColumn row:(NSInteger)row {
    NSTableCellView *cell = nil;
        // get your row from your array of objects.
        // determine if it's a section heading or not.

    SomeClass *someObject = [self.myObjects objectAtIndex:row];

    if (someObject.isSectionHeading) {
        cell = [tableView makeViewWithIdentifier:@"HeaderCell" owner:self];
        cell.textField.objectValue = someObject.headingName;
    } else {
        cell = [tableView makeViewWithIdentifier:@"DataCell" owner:self];
        cell.textField.objectValue = someObject.rowValue;
    }

    return cell;

}

And also tableView:isGroupRow will put a grey background on your section headings

-(BOOL)tableView:(NSTableView *)tableView isGroupRow:(NSInteger)row {
    BOOL isGroup = NO;
    // Choose some way to set isGroup to YES or NO depending on your records.
    return isGroup;
}

Make sure in Interface Builder you have set the identifiers for your NSTableCellViews to "HeaderCell" and "DataCell". Or use whatever names you want. As long as it matches your code. You can have as many of these cells as you want.

If you make a subclass of NSTableCellView then you can easily add your own text fields, checkboxes, images, etc. to the view and set their values accordingly.

Answer 2

如果你想要部分你基本上必须自己滚动（认识到行x应该是一个部分单元格并提供一个剖面视图.TWUI有TUITableView启用它（并根据我的经验大大改善滚动性能）。

Answer 3

There is a very good and simple tutorial showing how to implement a NSTableView with sections with sample code on github. Just watch it here and in the video description there is a link to download the code.

Answer 4

I believe the proper way to deal with this these days is to implement the table view delegate method tableView(rowViewForRow:) . If you detect that the specified row is not a header, simply return nil. Otherwise, the process is similar to making a view for a specific table row and column. For example, if you store all your row data in a single array of Any called tableRows , and determine the difference between a header and an ordinary row by using different classes within that array, it might look something like this:

override func viewDidLoad() {
    super.viewDidLoad()
    let headerNib = NSNib(nibNamed: "HeaderRow", bundle: nil)
    tableView.register(headerNib, forIdentifier: NSUserInterfaceItemIdentifier(rawValue: "SectionHeader"))
}

func tableView(_ tableView: NSTableView, rowViewForRow row: Int) -> NSTableRowView? {
    guard let headerData = tableRows[row] as? SectionHeader else { return nil }
    let header = tableView.makeView(withIdentifier: NSUserInterfaceItemIdentifier(rawValue: "SectionHeader"), owner: nil) as? HeaderRow
    header?.titleLabel.stringValue = headerData.title
    return header
}

Note that this only works if your table is view-based!