Column Styling

View as Markdown

Using the column style

The most straightforward way to style the cells in a column is to use the column.style property as an object.
Styling a column in the DataGrid
const column = {
  firstName: {
    style: {
      color: 'red',
      fontWeight: 'bold',
    },
  },
};
#
Using column.style as an object
open
loading demo…
The column.style property can either be an object (of type React.CSSProperties) or a function that returns an object (of the same type).
Using functions for the column.style property allows you to style the cells based on the cell's value or other properties.
Styling a column using a style function
const columns: InfiniteTablePropColumns<Developer> = {
  salary: {
    field: 'salary',
    type: 'number',
    style: ({ value, data, column, rowInfo }) => {
      return {
        color: value && value > 100_000 ? 'red' : 'tomato',
      };
    },
  },
};
#
Using column.style as a function
open
loading demo…
If defined as a function, the column.style accepts an object as a parameter, which has the following properties:
  • column - the current column where the style is being applied
  • data - the data object for the current row. The type of this object is DATA_TYPE | Partial<DATA_TYPE> | null. For regular rows, it will be of type DATA_TYPE, while for group rows it will be Partial<DATA_TYPE>. For rows not yet loaded (because of batching being used), it will be null.
  • rowInfo - the information about the current row - see Using RowInfo for more details.
  • value - the underlying value of the current cell - will generally be data[column.field], if the column is bound to a field property

Using the column className

Mirroring the behavior already described for the column.style property, the column.className property can be used to apply a CSS class to the cells in a column.
It can be used as a string or a function that returns a string.
Styling a column using column.className
const columns = {
  firstName: {
    className: 'first-name-column',
  },
};
#
Using column.className as an string
open
loading demo…
Using functions for the column.className property allows you to style the cells based on the cell's data/value/rowInfo etc.
Styling a column using a className function
const columns: InfiniteTablePropColumns<Developer> = {
  salary: {
    field: 'salary',
    type: 'number',
    className: ({ value, data, column, rowInfo }) => {
      return value && value > 100_000 ? 'red-color' : 'tomato-color';
    },
  },
}
#
Using column.className as a function
open
loading demo…