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.
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>',
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With