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

COPY

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

Row styling example#

View Mode

Fork 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: {
  rowInfo: InfiniteTableRowInfo<Employee>;
}) => {
  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' };
  }
  return undefined;
};

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

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.