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 default function Grid() {
  const [columnDefs] = useState<ColDef<RowData>[]>([
    {
      headerName: 'Customer Name',
      field: 'customer.name',
      cellStyle: { color: '#fff', 'background-color': '#37474f' },
    },
  ]);
}

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

export default function Grid() {
  const [columnDefs] = useState<ColDef<RowData>[]>([
    {
      headerName: 'Customer Name',
      field: 'customer.name',
      cellClass: ['customer-name'],
    },
  ]);
}

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

export default function Grid() {
  const [columnDefs] = useState<ColDef<RowData>[]>([
    {
      headerName: 'Customer Name',
      field: 'customer.name',
      cellClass: ({ value }) =>
        value.length === 0 ? 'error' : 'customer-name',
    },
  ]);
}

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

export default function Grid() {
  const [columnDefs] = useState<ColDef<RowData>[]>([
    {
      headerName: 'Customer Name',
      field: 'customer.name',
      cellClassRules: {
        'cell-value-negative': ({ value }) => value < 0,
        'cell-value-positive': ({ value }) => value >= 0,
      },
    },
  ]);
}

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.