Conditional styling of rows

[DrMalchev]

Hi,
is there a way to conditionally style rows in Analytical table. For example if we have a table with column Status, I want all rows with a given status to be grayed out.
Thanks

[Lukas742]

Hi @DrMalchev

this is possible by creating a custom plugin hook. Please see this example as reference.

Also please keep in mind that colors are not accessible for all users, e.g. when navigating via screen reader only, users still need to know that they're currently on a row with semantic meaning, so you need to set the respective aria attributes accordingly.

function useRowBgColor(hooks) {
  hooks.getRowProps.push((props, instance) => {
    const { row } = instance;
    // change color via inline style and value from the dataset
    if (row.original.background) {
      return [
        props,
        {
          style: {
            ...props.style,
            background: row.original.background,
          },
        },
      ];
    }
    if (row.index % 2) {
      // change color via inline style
      return [props, { style: { ...props.style, background: 'lightgreen' } }];
    }
    // change color via a CSS class
    return [props, { className: clsx(props.className, 'lightred') }];
  });
}