Create a custom cell in a NSTableView

Question

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

I know

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