Mantine DataTable

Examples › Row styling

You can style individual rows using the rowColor, rowBackgroundColor, rowClassName and rowStyle properties.
They work the same way as the c, backgroundColor, className and style properties of the DataTable component, but target rows instead of the component root.

With color properties

The c and backgroundColor properties accept a function that receives the current record and its index as arguments and returns either a MantineColor to be applied to the row, or an object with light and dark keys and MantineColor values to be applied to the row in light and dark themes respectively.

Here is the code used to produce the result above:

return (
  <DataTable
    rowColor={({ state }) => {
      if (state === 'MA') return 'violet';
    }}
    rowBackgroundColor={({ state }) => {
      if (state === 'MA') return { dark: '#232b25', light: '#f0f7f1' };
    }}
    // other table props...
  />
);

Using rowClassName

The rowClassName property accepts a function that receives the current record and its index as arguments and returns a string representing the class name to be applied to the row.

Here is the code used to produce the result above:

return (
  <DataTable
    rowClassName={({ state }) => (state === 'WY' ? classes.redRow : undefined)}
    // other table props...
  />
);

Using rowStyle

The rowStyle property accepts a function that receives the current record and its index as arguments and returns either an object representing the style to be applied to the row, or a function accepting the current theme and returning such an object.

Here is the code used to produce the result above:

return (
  <DataTable
    rowStyle={({ state }) => (state === 'NH' ? { fontStyle: 'italic', fontWeight: 'bold' } : undefined)}
    // other table props...
  />
);

And here is how you could build a style by returning a function that accepts the current theme:

Code:

return (
  <DataTable
    rowStyle={({ state }) =>
      (theme) => ({ color: state === 'MA' ? theme.colors.violet[6] : theme.colors.gray[6] })}
    // other table props...
  />
);

Head over to the next example to learn about its basic properties.