Adding custom row-header to ui-grid

Question

I would like to create my own custom column to ui-grid, similiar to select column (column with check mark) on attached picture:

Is this possible, what is easiest way to do this?

Answer 1

Documentation for this has been moved to here. The basics are that you need to add the row header as a new column in the onRegisterGridApi property of your gridOptions object. The definition of which is the same as any other column (i.e. ui.grid.class:GridOptions.columnDef).

For example, if all your rows had a property you wanted to use as the row header, you could use a custom template like:

<div class="ui-grid-row-header-cell ui-grid-disable-selection">
  <div class="ui-grid-cell-contents">{{row.entity['rowHeaderFieldName']}}</div>
</div>

Which you would assign to the cellTemplate property of your row header column definition