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.
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: number; firstName: string; lastName: string; country: string; city: string; currency: string; email: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; };