Learn Infinite Table

Grouping and Pivoting

Infinite Table comes with grouping and pivoting capabilities built-in. The DataSource component does the actual data grouping and pivoting - while the InfiniteTable component does the specialized rendering.

Grouping Rows

Learn row grouping and explore the possibilities.

Pivoting

Read thorough documentation covering pivoting and aggregation.
Simple row grouping
Fork
import * as React from 'react';
import {
  InfiniteTable,
  DataSource,
  DataSourcePropGroupBy,
} from '@infinite-table/infinite-react';

import { columns, Employee } from './columns';

const groupBy: DataSourcePropGroupBy<Employee> = [
  {
    field: 'country',
    column: {
      header: 'Country group',
      renderValue: ({ value }) => <>Country: {value}</>,
    },
  },
];

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

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