Change style of readonly cells in Tabulator

Question

I'd like to display the columns that are defined in Tabulator with editor: false differently than the cells where editing is enabled.

I currently have columns defined like so:

  this.tabAuthorizations = new Tabulator('#myTab', {
  data: data,
  columns: [
    // 0
    {
      title: 'Id',
      field: 'Id',
      visible: false
    },
    {
      title: 'User',
      field: 'UserId',
      formatter: (c) => {
        return directReports.find(x => x.EmployeeListID === c.getValue()).EmployeeName;
      },
      editor: false
    }, {
      title: 'Type',
      field: 'AuthTypeId',
      formatter: c => {
        return authTypes.find(x => x.AuthTypeId === Number(c.getValue())).AuthType;
      },
      editor: 'autocomplete',
      editorParams: {
        showListOnEmpty: true,
        values: authTypes.reduce((a, c) => Object.assign( {[c.AuthTypeId]: c.AuthType}, a), {})
      }
    },
    // etc
    ]
});

currently this generates cells with the same css classes applied.

<div class="tabulator-cell" role="gridcell" style="width: 542px; height: 28px;" tabulator-field="TaskListID" title="">My readonly field<div class="tabulator-col-resize-handle"></div><div class="tabulator-col-resize-handle prev"></div></div>

I would like to apply a -readonly or -editable class to the cells depending on the setting for editor: in the column definition. There doesn't appear to be a class applied either to the editable or non-editable cells by Tabulator itself, is there a better way of doing this other than in the cell formatter? I'd rather not have to define formatters simply to change the cell style.

Answer 1

you can add a CSS class to any column with the cssClass property in the column definition:

{
      title: 'Type',
      field: 'AuthTypeId',
      cssClass: 'editable', //add custom css class to cell
}