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
View Mode
Fork Forkimport { InfiniteTable, DataSource } from '@infinite-table/infinite-react'; import type { DataSourcePropGroupBy, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; import * as React from 'react'; const groupBy: DataSourcePropGroupBy<Developer> = [ { field: 'country', column: { header: 'Country group', renderGroupValue: ({ value }) => <>Country: {value}</>, }, }, ]; const columns: InfiniteTablePropColumns<Developer> = { country: { field: 'country', // specifying a style here for the column // note: it will also be "picked up" by the group column // if you're grouping by the 'country' field style: { color: 'tomato', }, }, firstName: { field: 'firstName' }, age: { field: 'age' }, salary: { field: 'salary', type: 'number', }, canDesign: { field: 'canDesign' }, stack: { field: 'stack' }, }; export default function App() { return ( <DataSource<Developer> data={dataSource} primaryKey="id" groupBy={groupBy}> <InfiniteTable<Developer> columns={columns} /> </DataSource> ); } const dataSource = () => { return fetch('https://infinite-table.com/.netlify/functions/json-server' + '/developers1k') .then((r) => r.json()) .then((data: Developer[]) => data); }; type Developer = { id