LiveLoveApp logo
ServicesArchitecture ReviewWorkshopsCase StudiesBlogContact

Cell Styling

Cell Styling

  • Specify cell styles using the cellStyle property of the column definition.
  • Add classes using the cellClass property.
  • Add & remove classes using the cellClassRules property.

Let's look at an example of using the cellStyle property.

export class GridComponent {
  columnDefs = [
    {
      headerName: 'Customer Name',
      field: 'customer.name',
      cellStyle: { color: '#fff', 'background-color': '#37474f' }
    }
  ] as ColDef<RowData>[];
}

We can specify classes using an array with the cellClass property.

export class GridComponent {
  columnDefs = [
    {
      headerName: 'Customer Name',
      field: 'customer.name',
      cellClass: ['customer-name']
    }
  ] as ColDef<RowData>[];
}

The cellClass property can also be a function that is invoked with the CellClassParam<TData> object.

export class GridComponent {
  columnDefs = [
    {
      headerName: 'Customer Name',
      field: 'customer.name',
      cellClass: ({ value }) =>
        value.length === 0
          ? 'error'
          : 'customer-name'
    }
  ] as ColDef<RowData>[];
}

The cellClassRules property is an object mapping of classes to predicate functions that are invoked with the CellClassParams<TData> object.

export class GridComponent {
  columnDefs = [
    {
      headerName: 'Customer Name',
      field: 'customer.name',
      cellClassRules: {
        'cell-value-negative': ({ value }) => value < 0,
        'cell-value-positive': ({ value }) => value >= 0
      }
    }
  ] as ColDef<RowData>[];
}

A few things to note with regard to refreshing of cells and styles:

  • cellStyles add and override existing styles. Styles are never removed.
  • cellClass adds classes, but never removes any classes.
  • cellClassRules adds and removes classes.