Create a custom cell in a NSTableView

Question

In my app I'm trying to create a custom cell like the follow:

I know how to do that with iOS and I guess it should be quite the same by using OS X. So in interface builder I designed the table view but I can figure how to create a custom cell. I tried to insert in the .xib in which I designed the table view the custom component I need (2 NSTextField and 2 NSImageView), then I create a class "CustomCell.m" and "CustomCell.h" as subclass of NSTableCellView, so I tried to connect my component to this class, but I can't add it... Why I can't connect the component to "CustomCell" class? What's wrong? Can you help me to find a way to do this (maybe a tutorial too)?

To do this I just followed the method I now to create custom table cell for iOS

Answer 1

1. In the Xib, add a NSTableView and make sure the contentType is View Based in the Attributes Inspector pane.
2. The Table column contains a TableCellview, which contains a TableViewCell by default. Remove the TableViewCell.

3. Drag the NSTextFields and ImageViews into the TableCellview as needed. By default, NSTableCellview supports 1 Imageview and 1 Textfield. If you need two of each, inherit NSTableCellview and create IBOutlet properties for your components and change the class of NSTableCellview in IB to InheritedTableCellview.

   @interface InheritedTableCellview : NSTableCellView
   
   @property (assign) IBOutlet NSTextField *secondTextField;
   @property (assign) IBOutlet NSImageView *secondImageView;
   
   @end
   
   @implementation SRITableCellView
   
   @end
   

4. Name the identifier of TableCellview with unique string.

5. Connect the Imageview and Textfield outlet components to TableCellview.
6. Connect the tableview Datasource and delegate to the viewController.

In the view controller, implement the below datasource method for display the number of rows required.

- (NSInteger)numberOfRowsInTableView:(NSTableView *)tableView {
    return self.tableArray.count;
}

Implement the delegate method to set the image and Text for each row,

- (NSView *)tableView:(NSTableView *)tableView viewForTableColumn:(NSTableColumn *)tableColumn row:(NSInteger)row
{
    InheritedTableCellview *cellView = [tableView makeViewWithIdentifier:@"MainCell" owner:self];
    cellView.backgroundStyle = NSBackgroundStyleDark;
    cellView.textField.stringValue = self.tableArray[row][@"textValue1"];
    cellView.imageView.image = [NSImage imageNamed:self.tableArray[row][@"image1"]];
    cellView.secondTextField.stringValue = self.tableArray[row][@"textValue2"];
    cellView.secondImageView.image = [NSImage imageNamed:self.tableArray[row][@"image2"]];

    return cellView;
}