Can ng-grid have multiple fields in a single cell/column?

Question

I'm creating a table that will be a readonly display of information. Using the table row ng-repeat approach I can easily define cells that contain multiple values from my model such as the following:

<td>
  {{user.supervisorName}} ({{user.supervisorNumber}})
</td>

I'm looking at the column definitions and templating for ng-grid and I'm not seeing a way to do this. Every example I see appears to be strictly one field per column. Can I do this with ng-grid?

I'd like to use ng-grid for its included features and performance as some of these tables will include quite a few rows and using ng-repeat with pagination and filtering quickly bogs down as size grows.

Answer 1

You can use a cellTemplate like this:

  $scope.gridOptions = {
    data: 'myData',
    columnDefs: [{
      field: 'name',
      displayName: 'Country/Name',
      cellTemplate: '<div class="ngCellText">{{row.entity.country}}/{{row.getProperty(col.field)}}</div>'
    }, {
      field: 'age',
      displayName: 'Age'
    }]
  };

Access field that are in your data but don't have colums in the grid with:

{{row.entity.fieldname}}

Add divs, icons or links as you need.

Plunker

If you need to align nicely within the cell then use as shown below :

  cellTemplate: '<div class="ui-grid-cell-contents">{{row.entity.country}}/{{row.getProperty(col.field)}}</div>',