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 row style 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

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

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

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' };
  }
};

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

const dataSource = () => {
  return fetch(
    'https://infinite-table.com/.netlify/functions/json-server' + '/employees100'
  )
    .then((r) => r.json())
    .then((data: Employee[]) => data);
};

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.