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
Defining a rowStyle function
const rowStyle: InfiniteTablePropRowStyle<Employee> = ({
  data,
  rowInfo,
}: {
  data: Employee | null;
  rowInfo: InfiniteTableRowInfo<Employee>;
}) => {
  const salary = data ? data.salary : 0;

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

Note

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

Row styling example

View Mode
Fork
import {
  InfiniteTable,
  DataSource,
  InfiniteTablePropRowStyle,
  InfiniteTableRowInfo,
} from '@infinite-table/infinite-react';
import * as React from 'react';

import { columns, Employee } from './rowStyle-example-columns';

const rowStyle: InfiniteTablePropRowStyle<Employee> = (param) => {
  const { rowInfo } = param;
  if (rowInfo.isGroupRow) {
    return;
  }
  const { data } = rowInfo;
  const salary = data ? data.salary : 0;

  if (salary > 150_000) {
    return { background: 'tomato' };
  }

  if (rowInfo.indexInAll % 10 === 0) {
    return { background: 'lightblue', color: 'black' };
  }
};

export default function App() {
  return (
    <DataSource<Employee> data={dataSource} primaryKey="id">
      <InfiniteTable<Employee> columns={columns} rowStyle={rowStyle} />
    </DataSource>
  );
}

const dataSource = () => {

Note

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.