Styling Rows

Rows can be styled by using the rowStyle and the rowClassName props

the rowStyle prop can be a style object or a function that returns a style object or undefined
the rowClassName prop can be a string (the name of a CSS class) or a function that returns a string or undefined

const rowStyle: InfiniteTablePropRowStyle<Employee> = ({
  data,
  rowInfo,
}: {
  data: Partial<Employee> | null;
  rowInfo: InfiniteTableRowInfo<Employee>;
}) => {
  const salary = data?.salary ?? 0;

  if (salary > 150_000) {
    return { background: 'tomato' };
  }
  if (rowInfo.indexInAll % 10 === 0) {
    return { background: 'lightblue', color: 'black' };
  }
  return undefined;
};

The rowClassName function prop has the same signature as the rowStyle function prop.

Row styling example#

loading demo…

In the rowStyle function, you can access the rowInfo object, which contains information about the current row. It's especially useful when you have grouping and aggregation, as it contains the aggregation values and other extra info.