{props.children}

{emoji}

); }; const columnTypes: InfiniteTablePropColumnTypes = { default: { // override all columns to use these components components: { HeaderCell: DefaultHeaderComponent, }, }, }; const columns: InfiniteTablePropColumns = { id: { field: 'id', defaultWidth: 80 }, stack: { field: 'stack', renderValue: ({ data }) => 'Stack: ' + data?.stack, components: { HeaderCell: DefaultHeaderComponent, ColumnCell: StackComponent, }, }, firstName: { field: 'firstName', }, preferredLanguage: { field: 'preferredLanguage', }, }; export default function ColumnValueGetterExample() { return ( <> primaryKey="id" data={dataSource}> debugId="column-components-example" columns={columns} columnTypes={columnTypes} /> ); } ``` If you're using the [`useInfiniteColumnCell`](https://infinite-table.com/docs/reference/hooks/index.md#useInfiniteColumnCell) hook inside the [`columns.render`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.render) or [`columns.renderValue`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderValue) functions (and not as part of a custom component in [`columns.components.ColumnCell`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.components.ColumnCell)), you don't need to pass on the `domRef` to the root of the DOM you're rendering (same is true if you're using [`useInfiniteHeaderCell`](https://infinite-table.com/docs/reference/hooks/index.md#useInfiniteHeaderCell) inside the [`columns.header`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.header) function). If the above [`columns.components`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.components) is still not enough, read about the rendering pipeline below. ## Rendering pipeline The rendering pipeline for columns is a series of functions defined on the column that are called while rendering. All the functions that have the word `render` in their name will be called with an object that has a `renderBag` property, which contains values that will be rendered. The default [`columns.render`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.render) function (the last one in the pipeline) ends up rendering a few things: - a `value` - generally comes from the [field](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.field) the column is bound to - a `groupIcon` - for group columns - a `selectionCheckBox` - for columns that have [`columns.renderSelectionCheckBox`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderSelectionCheckBox) defined (combined with row selection) When the rendering process starts for a column cell, all the above end up in the `renderBag` object. ### Rendering pipeline - `renderBag.value` As already mentioned, the `value` defaults to the value of the column [field](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.field) for the current row. If the column is not bound to a field, you can define a [valueGetter](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.valueGetter). The [valueGetter](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.valueGetter) only has access to `{data, field?}` in order to compute a value and return it. After the [valueGetter](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.valueGetter) is called, the [valueFormatter](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.valueFormatter) is next in the rendering pipeline. This is called with more details about the current cell ```tsx const column: InfiniteTableColumn = { // the valueGetter can be useful when rows are nested objects // or you want to compose multiple values from the row valueGetter: ({ data }) => { return data.person.salary * 10; }, valueFormatter: ({ value, isGroupRow, data, field, rowInfo, rowSelected, rowActive, }) => { // the value here is what the `valueFormatter` returned return `USD ${value}`; }, }; ``` After [valueGetter](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.valueGetter) and [valueFormatter](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.valueFormatter) are called, the resulting value is the actual value used for the cell. This value will also be assigned to `renderBag.value` When [renderValue](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderValue) and [render](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.render) are called by `InfiniteTable`, both `value` and `renderBag` will be available as properties to the arguments object. ```tsx {3,12} const column: InfiniteTableColumn = { valueGetter: () => 'world', renderValue: ({ value, renderBag, rowInfo }) => { // at this stage, `value` is 'world' and `renderBag.value` has the same value, 'world' return {value}; }, render: ({ value, renderBag, rowInfo }) => { // at this stage `value` is 'world' // but `renderBag.value` is world, as this was the value returned by `renderValue` return

Hello {renderBag.value}!

; }, }; ``` After the [renderValue](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderValue) function is called, the following are also called (if available): - [renderGroupValue](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderGroupValue) - for group rows - [renderLeafValue](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderLeafValue) - for leaf rows You can think of them as an equivalent to [renderValue](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderValue), but narrowed down to group/non-group rows. Inside those functions, the `renderBag.value` refers to the value returned by the [renderValue](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderValue) function. ### Rendering pipeline - `renderBag.groupIcon` In a similar way to `renderBag.value`, the `renderBag.groupIcon` is also piped through to the [render](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.render) function. ```tsx {2,9} const column: InfiniteTableColumn = { renderGroupIcon: ({ renderBag, toggleGroupRow }) => { return <> [ {renderBag.groupIcon} ] ; }, render: ({ renderBag }) => { return ( <> {/* use the groupIcon from the renderBag */} {renderBag.groupIcon} {renderBag.value} ); }, }; ``` Inside [`columns.renderGroupIcon`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderGroupIcon), you have access to `renderBag.groupIcon`, which is basically the default group icon - so you can use that if you want, and build on that. Also inside [`columns.renderGroupIcon`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderGroupIcon), you have access to `toggleGroupRow` so you can properly hook the collapse/expand behaviour to your custom group icon. ### Rendering pipeline - `renderBag.selectionCheckBox` Like with the previous properties of `renderBag`, you can customize the `selectionCheckBox` (used when multiple selection is configured) to be piped-through - for columns that specify [`columns.renderSelectionCheckBox`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderSelectionCheckBox). ```tsx {2,25} const column: InfiniteTableColumn = { renderSelectionCheckBox: ({ renderBag, rowSelected, isGroupRow, toggleCurrentRowSelection, toggleCurrentGroupRowSelection, }) => { const toggle = isGroupRow ? toggleCurrentGroupRowSelection : toggleCurrentRowSelection; // you could return renderBag.groupIcon to have the default icon const selection = rowSelected === null ? '-' // we're in a group row with indeterminate state if rowSelected === null : rowSelected ? 'x' : 'o'; return

[ {selection} ]

; }, render: ({ renderBag }) => { return ( <> {/* use the selectionCheckBox from the renderBag */} {renderBag.selectionCheckBox} {renderBag.groupIcon} {renderBag.value} ); }, }; ``` To recap, here is the full list of the functions in the rendering pipeline, in order of invocation: 1. [`columns.valueGetter`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.valueGetter) - doesn't have access to `renderBag` 2. [`columns.valueFormatter`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.valueFormatter) - doesn't have access to `renderBag` 3. [`columns.renderGroupIcon`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderGroupIcon) - can use all properties in `renderBag` 4. [`columns.renderSelectionCheckBox`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderSelectionCheckBox) - can use all properties in `renderBag` 5. [`columns.renderValue`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderValue) - can use all properties in `renderBag` 6. [`columns.renderGroupValue`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderGroupValue) - can use all properties in `renderBag` 7. [`columns.renderLeafValue`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderLeafValue) - can use all properties in `renderBag` 8. [`columns.render`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.render) - can use all properties in `renderBag` Additionally, the [`columns.components.ColumnCell`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.components.ColumnCell) custom component does have access to the `renderBag` via [`useInfiniteColumnCell`](https://infinite-table.com/docs/reference/hooks/index.md#useInfiniteColumnCell) --- # Column Sorting > Configure column sorting with single and multiple sorting and custom sort functions. Both client-side and server-side sorting is supported Canonical page: https://infinite-table.com/docs/learn/columns/column-sorting Docs coming soon --- # Column Types > Column types are blueprints for generalizing column configuration and code reuse. Canonical page: https://infinite-table.com/docs/learn/columns/column-types Column types allow you to specify common properties for multiple columns easily. Things like [minWidth](https://infinite-table.com/docs/reference/infinite-table-props.md#columnTypes.minWidth), [maxWidth](https://infinite-table.com/docs/reference/infinite-table-props.md#columnTypes.maxWidth), [defaultFlex](https://infinite-table.com/docs/reference/infinite-table-props.md#columnTypes.defaultFlex) and [header](https://infinite-table.com/docs/reference/infinite-table-props.md#columnTypes.header) are all available. For a full list, see [columnTypes](https://infinite-table.com/docs/reference/infinite-table-props.md#columnTypes) reference. You specify the type of a column via the [column.type](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.type) property: ```tsx type Person = { name: string; dob: string; age: number; } const columns = { age: { field: 'age', type: 'custom', }, date: { field: 'dob', // will be type default }, name: { field: 'name', // will have both of those types type: ['default', 'custom'] } } const columnTypes = { default: { width: 200 }, custom: { align: 'center' } } ``` Properties defined in a column have precedence over the properties defined in the [type](https://infinite-table.com/docs/reference/infinite-table-props.md#columnTypes). Also, if a column has no [type](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.type) specified, it will default to the `default` type. If you don't want a column to have the `default` type, use [column.type=null](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.type) or [column.type=[]](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.type) The column [type](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.type) property can be an array - in this case, types are applied in the order they are specified, later types overriding properties of earlier ones. If the `default` type is not specified in the array, it will not be applied to the column - if you want to apply it as well, use [type=['default', 'any', 'other', 'types', 'after']](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.type) ## Column Type properties order and precedence When a column has multiple column types, they are applied in order, from left to right, with later types overriding properties of earlier ones - think of the behavior as very similar to `Object.assign`. Assume a column has the following types: ```tsx const columns = { salary: { type: ['number', 'currency'], }, }; const numberFormatter = new Intl.NumberFormat(); const columnTypes = { number: { renderValue: ({ value }) => numberFormatter.format(value), // makes 12345 render as 12,345 }, currency: { renderValue: ({ value }) => `USD: ${value}`, // makes 12345 render as USD: 12345 }, }; ``` Although the `salary` column has both the `number` and `currency` types, and both those types have the `renderValue` property defined, only the `currency` `renderValue` function will be called. In other words, the rendering is not piped from one column type to the next. This is applied for all properties, like `render`, `style`, etc. The `renderValue` function (and other similar functions) has access to the `column` object, so you can manually access all the column types. --- # Column Sizing Canonical page: https://infinite-table.com/docs/learn/columns/fixed-and-flexible-size Columns are a core concept for `Infinite Table` and sizing columns is an important topic to master. Here is a summary of how columns can be sized: - fixed-sized columns can be specified via [`columns.defaultWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.defaultWidth) - flexible columns need [`columns.defaultFlex`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.defaultFlex) - [`columns.minWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.minWidth) specifies the minimum size for a column - [`columns.maxWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.maxWidth) is for the maximum width a column can take - default values are available for all of the above: - [`columnDefaultWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnDefaultWidth) gives all columns (that are otherwise unconfigured) a default size - [`columnMinWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnMinWidth) specifies the minimum width for all columns (that don't have one) - [`columnMaxWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnMaxWidth) specifies the maximum width for all columns (that don't have one) For fine-grained controlled-behavior on column sizing, use the controlled [`columnSizing`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnSizing) prop (for uncontrolled variant, see [`defaultColumnSizing`](https://infinite-table.com/docs/reference/infinite-table-props.md#defaultColumnSizing)). If you want to get updates to columns changing size as a result of user interaction, use [`onColumnSizingChange`](https://infinite-table.com/docs/reference/infinite-table-props.md#onColumnSizingChange). Use [`columnDefaultWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnDefaultWidth) to configure the default column width. If a column is not sized otherwise, this will be applied. The default value for [`columnDefaultWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnDefaultWidth) is `200` (pixels). For setting a minimum and maximum width for all columns, use [`columnMinWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnMinWidth) (defaults to `30`) and [`columnMaxWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnMaxWidth) (defaults to `2000`) respectively. ## Understanding default column sizing The easiest way to get started and specify a sizing behavior for columns is to use [column.defaultWidth](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.defaultWidth), [column.defaultFlex](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.defaultFlex) and/or [`columnDefaultWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnDefaultWidth) (including related pros for specifying limits, like [column.minWidth](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.minWidth), [column.maxWidth](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.maxWidth) and [`columnMinWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnMinWidth) / [`columnMaxWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnMaxWidth)). Those properties have `default` in their name because after the initial rendering of a column, you can't change its size by updating those values - more technically, [column.defaultWidth](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.defaultWidth) and [column.defaultFlex](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.defaultFlex) are uncontrolled props. We suggest you use those to get started and if you don't have care about responding to the user changing the widths of those columns via drag&drop. As long as you're not using [`onColumnSizingChange`](https://infinite-table.com/docs/reference/infinite-table-props.md#onColumnSizingChange) to be notified of column size changes, you're probably good with those. ## Controlled column sizing However, once you start using [`onColumnSizingChange`](https://infinite-table.com/docs/reference/infinite-table-props.md#onColumnSizingChange) and want to have full control of column sizing (maybe you want to restore it later to the state the user had it when the app was closed), you probably want to use controlled [`columnSizing`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnSizing). The [`columnSizing`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnSizing) prop is an object of column ids to column sizing objects. Those sizing objects can have the following properties: - [flex](https://infinite-table.com/docs/reference/infinite-table-props.md#columnSizing.flex) - use this for flexible columns. Behaves like the flex CSS property. - [width](https://infinite-table.com/docs/reference/infinite-table-props.md#columnSizing.width) - use this for fixed sized columns - [minWidth](https://infinite-table.com/docs/reference/infinite-table-props.md#columnSizing.minWidth) - specifies the minimum width of the column. Useful for flexible columns or for restricting users resizing both fixed and flexible columns. - [maxWidth](https://infinite-table.com/docs/reference/infinite-table-props.md#columnSizing.maxWidth) - specifies the maximum width of the column. Useful for flexible columns or for restricting users resizing both fixed and flexible columns. If a column is not specified in the [`columnSizing`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnSizing) prop (or its uncontrolled variant), or sized otherwise (eg: via the column type), it will have a fixed size, defaulting to [`columnDefaultWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnDefaultWidth) (which also defaults to `200` if no value is passed in). You can also specify a [`columnMinWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnMinWidth) and [`columnMaxWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnMaxWidth) - those will be applied for all columns (namely for those that dont explicitly specify other min/max widths). ```tsx const columnSizing: InfiniteTablePropColumnSizing = { country: { flex: 1, // minWidth is optional minWidth: 200, }, city: { width: 400, // and so is maxWidth maxWidth: 500, }, salary: { flex: 3, }, }; // any column not specified in the columnSizing (or defaultColumnSizing) prop // will have fixed width (defaulting to `columnDefaultWidth`, which in turn defaults to 200px) ``` You might find specifying the column size outside the column object to be a bit verbose to start with, but it will be easier to manage in many cases and is much more flexible. For example, when the user resizes a column via drag & drop and you want to persist the new column sizes, you don't have to update the whole `columns` object but instead update [`columnSizing`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnSizing) alone. The same principle is true for [`columnPinning`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnPinning) and other column-level props. The `columnSizing` prop also has an uncontrolled version, namely [`defaultColumnSizing`](https://infinite-table.com/docs/reference/infinite-table-props.md#defaultColumnSizing). ## Using flexible column sizing The way flex sizing is implemented is similar to how CSS flexbox algorithm works. Explore this section to find out more details. Imagine you have `1000px` of space available to the viewport of `InfiniteTable` and you have 3 columns: - a fixed column `100px` wide - name it col `A` - a fixed column `300px` wide - name it col `B` - a flexible column with `flex: 1` - name it col `F1` - a flexible column with `flex: 2` - name it col `F2` The space remaining for the flexible columns is `1000px - 400px = 600px` and the sum of all flex values is `3`, that means each `flex` unit will be `600px / 3 = 200px`. This means columns will have the following sizes: - col `A` will be `100px` - col `B` will be `300px` - col `F1` will be `200px` ( so a flex unit) - col `F2` will be `400px` ( so the equivalent of `2` flex units) If the browser changes the layout of the component, so `InfiniteTable` has only `700px` available, then a flex unit would be `(700px - 400px) / 3 = 100px`. This means columns will have the following sizes: - col `A` will be `100px` - col `B` will be `300px` - col `F1` will be `100px` ( so a flex unit) - col `F2` will be `200px` ( so the equivalent of `2` flex units) The flexbox algorithm also uses [`viewportReservedWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#viewportReservedWidth) to determine the width of the viewport to use for sizing columns - you can use [viewportReservedWidth=100](https://infinite-table.com/docs/reference/infinite-table-props.md#viewportReservedWidth) to always have a `100px` reserved area that won't be used for flexing columns. **Example: Using viewportReservedWidth to reserve whitespace when you have flexible columns** This example has a `viewportReservedWidth` of `50px`. ```tsx import { InfiniteTable, DataSource, InfiniteTablePropColumnSizing, InfiniteTableColumn, } from '@infinite-table/infinite-react'; import * as React from 'react'; import { useState } from 'react'; export const columns: Record> = { firstName: { field: 'firstName', header: 'First Name', }, country: { field: 'country', header: 'Country', }, city: { field: 'city', header: 'City', }, salary: { field: 'salary', type: 'number', header: 'Salary', }, }; const defaultColumnSizing: InfiniteTablePropColumnSizing = { country: { flex: 1 }, city: { flex: 1 }, salary: { flex: 2 }, }; export default function App() { const [viewportReservedWidth, setViewportReservedWidth] = useState(0); return ( <>

Current viewport reserved width: {viewportReservedWidth}px.

data={dataSource} primaryKey="id"> debugId="viewportReservedWidth-example" columns={columns} columnDefaultWidth={50} viewportReservedWidth={viewportReservedWidth} onViewportReservedWidthChange={setViewportReservedWidth} defaultColumnSizing={defaultColumnSizing} /> ); } const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/employees100') .then((r) => r.json()) .then((data: Employee[]) => data); }; export type Employee = { id: number; companyName: string; companySize: string; firstName: string; lastName: string; country: string; countryCode: string; city: string; streetName: string; streetNo: string; department: string; team: string; salary: number; age: number; email: string; }; ``` Take a look at the snippet below to see column sizing at work with flexible and fixed columns. **Example: Using controlled columnSizing** ```tsx import { InfiniteTable, DataSource, InfiniteTablePropColumnSizing, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; import * as React from 'react'; import { useState } from 'react'; export const columns: InfiniteTablePropColumns = { firstName: { field: 'firstName', header: 'First Name', }, country: { field: 'country', header: 'Country', }, city: { field: 'city', header: 'City', }, salary: { field: 'salary', type: 'number', header: 'Salary', }, }; export default function App() { const [columnSizing, setColumnSizing] = React.useState({ country: { width: 100 }, city: { flex: 1, minWidth: 100 }, salary: { flex: 2, maxWidth: 500 }, }); const [viewportReservedWidth, setViewportReservedWidth] = useState(0); return ( <>

Current column sizing:{' '}

{JSON.stringify(columnSizing, null, 2)}

Viewport reserved width: {viewportReservedWidth} -{' '}

data={dataSource} primaryKey="id"> debugId="columnSizing-example" columns={columns} columnDefaultWidth={50} columnSizing={columnSizing} onColumnSizingChange={setColumnSizing} viewportReservedWidth={viewportReservedWidth} onViewportReservedWidthChange={setViewportReservedWidth} /> ); } const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/employees100') .then((r) => r.json()) .then((data: Employee[]) => data); }; export type Employee = { id: number; companyName: string; companySize: string; firstName: string; lastName: string; country: string; countryCode: string; city: string; streetName: string; streetNo: string; department: string; team: string; salary: number; age: number; email: string; }; ``` You might find [`viewportReservedWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#viewportReservedWidth) useful for advanced configuration when you have flexible columns. When he user is performing a column resize (via drag & drop), [`onViewportReservedWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#onViewportReservedWidth) is called when the resize is finished (not the case for resizing with the **SHIFT** key pressed, when adjacent columns share the space between them). You can also size (generated) group columns by using their [column.id](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.id) property. For [groupRenderStrategy="multi-column"](https://infinite-table.com/docs/reference/infinite-table-props.md#groupRenderStrategy), if no `id` is specified in the group column configuration, each column will have a generated id like this: `"group-by-${field}"`. For [groupRenderStrategy="single-column"](https://infinite-table.com/docs/reference/infinite-table-props.md#groupRenderStrategy), if no `id` is specified in the [`groupColumn`](https://infinite-table.com/docs/reference/infinite-table-props.md#groupColumn) it will default to: `"group-by"`. ## Resizing columns via drag & drop Columns are user-resizable via drag & drop. If you don't want a column to be resizable, specify [column.resizable=false](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.resizable) By default, all columns are resizable since [`resizableColumns`](https://infinite-table.com/docs/reference/infinite-table-props.md#resizableColumns) defaults to `true`. The [`resizableColumns`](https://infinite-table.com/docs/reference/infinite-table-props.md#resizableColumns) prop controls the behavior for all columns that don't explicitly specify their [column.resizable](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.resizable) property. When initially rendered, columns are displayed with their [`columns.defaultWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.defaultWidth) (you can also use [`columnDefaultWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnDefaultWidth)) or [`columns.defaultFlex`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.defaultFlex). Flexible columns take up available space taking into account their flex value, as detailed above. When the user is resizing columns (or column groups), the effect is seen in real-time, so it's very easy to adjust the columns to desired widths. After the user drops the resize handle to the desired position, [`onColumnSizingChange`](https://infinite-table.com/docs/reference/infinite-table-props.md#onColumnSizingChange) is being called, to allow the developer to react to column sizing changes. Also [`onViewportReservedWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#onViewportReservedWidth) is called as well when the resize is finished (not the case for resizing with the **SHIFT** key pressed, when adjacent columns share the space between them). When flexible columns are resized, they are kept flexible even after the resize. Note however that their flex values will be different to the original flex values and will reflect the new proportions each flex column is taking up at the moment of the resize. More exactly, the new flex values will be the actual pixel widths. As an example, say there are 2 flex columns, first one with flex `1` and second one with flex `3` and they have an available space of `800px`. ```ts const columns = { first: { flex: 1, field: 'one' }, second: { flex: 2, field: 'two' }, }; ``` Initially they will occupy `200px` and `600px` respectively. If the user resizes them to be of equal size, [`onColumnSizingChange`](https://infinite-table.com/docs/reference/infinite-table-props.md#onColumnSizingChange) will be called with an object like ```ts { first: { flex: 400 }, second: {flex: 400 } } ``` since those are the actual widths measured from the DOM. This works out well, even if the available space of the table grows, as the proportions will be the same. ### Resize Restrictions When resizing, the user needs to drag the resize handle to adjust the columns to new sizes. While doing so, the resize handle has a (green) color to indicate everything is okay. However, when restrictions are hit (either column [min](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.minWidth) or [max](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.maxWidth) widths), the resize handle turns red to indicate further resizing is not possible. ### Sharing space on resize By default when resizing a specific column, the following columns are pushed to the right (when making the column wider) or moved to the left (when making the column narrower). For sharing space between resizable columns when resizing, the user needs to **hold the SHIFT key** when grabbing the resize handle. When the handle is dropped and the resize confirmed, [`onColumnSizingChange`](https://infinite-table.com/docs/reference/infinite-table-props.md#onColumnSizingChange) is called, but [`onViewportReservedWidth`](https://infinite-table.com/docs/reference/infinite-table-props.md#onViewportReservedWidth) is not called for this scenario, since the reserved width is preserved. ### Resizing column groups Just as columns are being resized, it is also possible to resize column groups. For this, the user needs to hover over the right border of the column group and start dragging the resize handle. For multi-level column groups, it's possible to resize any of them. Just grab the handle from the desired group and start dragging. The handle height will indicate which column group is being resized. If a column group has at least one resizable column, it can be resized. When resizing, the space is shared proportionally betweem all resizable columns in the group. Once a min/max limit has been reached for a certain column in the group, the column respects the limit and the other columns keep resizing as usual. When the min/max limit has been reached for all columns in the group, the resize handle turns red to indicate further resizing is no longer possible. **Example: Resizing column groups** Try resizing the `Finance` and `Regional Info` column groups. The columns in the `Finance` group can be resized an extra `30px` (they have a `maxWidth` of `130px`). ```tsx import { InfiniteTable, DataSource, InfiniteTableColumnGroup, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers1k') .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { currency: { field: 'currency', columnGroup: 'finance', maxWidth: 130, }, salary: { field: 'salary', columnGroup: 'finance', maxWidth: 130, }, country: { field: 'country', columnGroup: 'regionalInfo', maxWidth: 400, }, preferredLanguage: { field: 'preferredLanguage', columnGroup: 'regionalInfo', }, id: { field: 'id', defaultWidth: 80 }, firstName: { field: 'firstName', }, stack: { field: 'stack', }, }; const columnGrous: Record = { regionalInfo: { header: 'Regional Info', }, finance: { header: 'Finance', columnGroup: 'regionalInfo', }, }; export default function ColumnValueGetterExample() { return ( <> primaryKey="id" data={dataSource}> debugId="column-groups-example" columnGroups={columnGrous} columns={columns} columnDefaultWidth={100} /> ); } ``` ### Customizing the resize handle colors It's possible to customize the resize handle colors and width. For adjusting the handle colors, use the following CSS variables: - `--infinite-resize-handle-hover-background` - the color of the resize handle when it's in a `green`/all good state. - `--infinite-resize-handle-constrained-hover-background` - the color of the resize handle when it has reached a min/max constraint. You can also adjust the width of the resize handle: - `--infinite-resize-handle-width` - the width of the `green`/`red` column resize handle. Defaults to `2px` - `--infinite-resize-handle-active-area-width` - the width of the area you can hover over in order to grab the resize handle. Defaults to `20px`. The purpose of this active area is to make it easier to grab the resize handle. ## Auto-sizing columns For sizing columns to the width of their content, you can use [`autoSizeColumnsKey`](https://infinite-table.com/docs/reference/infinite-table-props.md#autoSizeColumnsKey) to declaratively auto-size columns: - when [`autoSizeColumnsKey`](https://infinite-table.com/docs/reference/infinite-table-props.md#autoSizeColumnsKey) is a `string` or `number` and the value of the prop is changed, all columns will be auto-sized. - when [`autoSizeColumnsKey`](https://infinite-table.com/docs/reference/infinite-table-props.md#autoSizeColumnsKey) is an object, it needs to have a `key` property (of type `string` or `number`), so whenever the `key` changes, the columns will be auto-sized. Specifying an object for [`autoSizeColumnsKey`](https://infinite-table.com/docs/reference/infinite-table-props.md#autoSizeColumnsKey) gives you more control over which columns are auto-sized and if the size measurements include the header or not. When an object is used, the following properties are available: - `key` - mandatory property, which, when changed, triggers the update - `includeHeader` - optional boolean, - decides whether the header will be included in the auto-sizing calculations. If not specified, `true` is assumed. - `columnsToSkip` - a list of column ids to skip from auto-sizing. If this is used, all columns except those in the list will be auto-sized. - `columnsToResize` - the list of column ids to include in auto-sizing. If this is used, only columns in the list will be auto-sized. **Example: Auto-sizing columns** ```tsx import { InfiniteTable, DataSource } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers1k') .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id' }, firstName: { field: 'firstName' }, preferredLanguage: { field: 'preferredLanguage' }, stack: { field: 'stack' }, country: { field: 'country' }, age: { field: 'age', type: 'number' }, salary: { field: 'salary', type: 'number' }, currency: { field: 'currency', type: 'number' }, }; export default function GroupByExample() { const [key, setKey] = React.useState(0); const [includeHeader, setIncludeHeader] = React.useState(false); const autoSizeColumnsKey = React.useMemo(() => { return { includeHeader, key, }; }, [key, includeHeader]); return ( <>

{ setIncludeHeader(e.target.checked); }} />{' '} Include header

primaryKey="id" data={dataSource}> debugId="autoSizeColumnsKey-example" autoSizeColumnsKey={autoSizeColumnsKey} columns={columns} columnDefaultWidth={200} /> ); } ``` --- # Common Issues > Avoid common pitfalls and issues when using the component. Learn how to use it properly to perform smooth and avoid jank. Canonical page: https://infinite-table.com/docs/learn/common-issues/ As people have started using `` we've noticed a few issues keep popping up. While we're trying to refine our API to be easier to use and understand, developers using the component still need to be aware of some design decisions and conventions used in the component. ## Issue: Performance degradation because props are new on every render Passing new props on every render to the `` component or to the `` component can be a performance bottleneck: ```ts ``` Instead pass the **same** reference when things do change - stored in state or any other place: ```ts const [groupBy, setGroupBy] = useState([{ field: 'country' }]); ; ``` When in dev mode, you can set `localStorage.debug = "*"` in your localstorage to see potential issues logged to the console. For example, you might see: `InfiniteTable:rerender Triggered by new values for the following props +1s columns` ## Issue: State inside custom components rendered in cells is lost while scrolling When using custom rendering or custom components for columns, make sure all your rendering logic is [controlled](https://reactjs.org/docs/forms.html#controlled-components) and that it doesn't have any local or transient state. This is important because `InfiniteTable` makes heavy use of virtualization, in both _column cells and column headers_, so **custom components can and will be unmounted and re-mounted multiple times**, during the virtualization process (triggered by user scrolling, sorting, filtering and a few other interactions). --- # Compare React DataGrids > Honest comparison of Infinite Table against AG Grid, TanStack Table, and MUI X Data Grid. Find the right React data grid for your project. Canonical page: https://infinite-table.com/docs/learn/compare/ Infinite Table was built for React from the ground up. Columns are props. Sorting, grouping, and filtering are controlled or uncontrolled values — the same pattern you use for an ``. Cell renderers are plain JSX. State lives in React. When you change a prop, the grid re-renders. Other excellent data grids take different approaches — multi-framework support, headless logic libraries, deep Material UI integration — and those approaches are the right choice for many teams. This section compares Infinite Table with three popular alternatives so you can decide which fits your project. ## Comparisons - [Infinite Table vs AG Grid](https://infinite-table.com/docs/learn/compare/ag-grid.md) — The most established enterprise data grid. Multi-framework, huge feature set. AG Grid's breadth is unmatched; Infinite Table focuses on a small, composable, React-declarative API surface. - [Infinite Table vs TanStack Table](https://infinite-table.com/docs/learn/compare/tanstack-table.md) — A headless, MIT-licensed logic library. Total rendering control — you build the UI, the virtualization, and the keyboard navigation. Infinite Table ships those built-in. - [Infinite Table vs MUI X Data Grid](https://infinite-table.com/docs/learn/compare/mui-x-data-grid.md) — A rendered data grid from the Material UI ecosystem. Excellent MUI integration. Infinite Table is design-system agnostic and includes grouping and pivoting without a Premium tier. ## Quick Comparison | | Infinite Table | AG Grid | TanStack Table | MUI X Data Grid | |---|---|---|---|---| | **Built for React** | Yes — from the ground up | Multi-framework (JS, Angular, Vue, React) | Headless — multi-framework hooks | Yes — React only | | **API style** | Small, composable props (controlled + uncontrolled) | Large, comprehensive configuration surface | Headless hooks, you provide all JSX | Declarative props, controlled + uncontrolled | | **Cell renderers** | JSX components | AG Grid component interface (React supported) | You build all rendering | JSX components | | **Frameworks** | React | React, Angular, Vue, JS | All Most Popular | React | | **Virtualization** | Row + column | Row + column | BYO (separate package) | Row (column in Pro+) | | **Grouping** | Included (free) | Enterprise license | Logic only (free) | Premium plan ($599/dev/yr) | | **Pivoting** | Included (free) | Enterprise license | Logic only (free) | Premium plan ($599/dev/yr) | | **Tree data** | Included (free) | Enterprise license | Logic only (free) | Pro plan ($299/dev/yr) | | **License** | Free with footer; paid removes footer | Community MIT; Enterprise proprietary | MIT | Community MIT; Pro/Premium/Enterprise proprietary | | **Paid license** | [$395/dev/year](https://infinite-table.com/pricing) | [~$999/dev/year](https://www.ag-grid.com/license-pricing) | Free | [$299/dev/year (Pro)](https://mui.com/pricing/) | Feature availability is based on each product's official documentation as of mid-2026. Always verify on the vendor's site before making a purchasing decision. ## How to decide **Pick Infinite Table** if you want a data grid that feels like a native React component — a small, composable API of declarative props, controlled state, and JSX renderers — with grouping, pivoting, and aggregations included out of the box, no enterprise license required. **Pick AG Grid** if you need multi-framework support (Angular, Vue, and React under one grid), the widest possible feature surface (charting, clipboard, server-side row model), or your team already knows AG Grid from other projects and values the breadth it provides. **Pick TanStack Table** if you want total control over rendering and are prepared to build your own UI layer, virtualization, keyboard navigation, and accessibility. Best for design-system component libraries or lightweight tables that don't need complex built-in features. **Pick MUI X Data Grid** if your application is already built on Material UI and you value automatic theme integration with MUI's design system, or you need the broader MUI X component suite (date pickers, charts, tree view) under a single license. How Infinite Table's React-declarative surface compares with AG Grid's multi-framework approach. A rendered, virtualized DataGrid versus a headless table library you assemble yourself. What ships in Infinite Table's free build versus MUI X Community, Pro, and Premium. Grouping, aggregations, and pivoting — included in every Infinite Table build. ## Help us keep these comparisons up-to-date These pages are our reading of each product's public documentation and pricing as of mid-2026. We want them to stay accurate. If you work on AG Grid, TanStack Table, or MUI X — or you've spotted something that's wrong, outdated, or missing context — please tell us. We will update the page. - [File a correction issue](https://github.com/infinite-table/infinite-react/issues/new?template=compare_page_correction.md&title=Compare%20page%20correction%3A%20) - [Edit the source on GitHub](https://github.com/infinite-table/infinite-react/tree/master/www/content/docs/learn/compare) and open a pull request - Email [admin@infinite-table.com](mailto:admin@infinite-table.com?subject=Compare%20page%20correction) with the page URL and what should change --- # Infinite Table vs AG Grid > A detailed comparison of Infinite Table and AG Grid for React. Two different approaches to building data grids — and when each one is the right choice. Canonical page: https://infinite-table.com/docs/learn/compare/ag-grid [AG Grid](https://www.ag-grid.com/) is the most established commercial data grid on the market, used across React, Angular, Vue, and plain JavaScript. It has a massive feature surface and a large community. The AG Grid team has been shipping for over a decade and the result is an impressively comprehensive product. The core difference is not price. It's how each grid relates to React. ## Two different approaches to React AG Grid supports four frameworks from a single codebase. That multi-framework architecture is a genuine strength — it means your organisation can standardise on one grid across Angular, Vue, and React projects. The trade-off is that AG Grid's core is framework-agnostic: state and rendering live inside the grid engine, with a React adapter layer on top. Configuration goes through a `gridOptions` object, and many operations use imperative API calls like `api.setColumnDefs()` or `api.refreshCells()`. Infinite Table is built for React, and that choice shapes the API. Columns, sorting, grouping, and filtering are React props — controlled or uncontrolled, like any React form component. Cell renderers are plain JSX. The grid participates in React's component tree, re-rendering when props change. Neither approach is wrong. They reflect different design priorities: AG Grid optimises for framework reach and breadth; Infinite Table optimises for feeling native to React. ## What this looks like in code With AG Grid, updating columns typically goes through the API: ```tsx // AG Grid: update columns via the imperative API const onButtonClick = () => { gridRef.current.api.setColumnDefs(newColumnDefs); gridRef.current.api.refreshCells({ force: true }); }; ``` With Infinite Table, the same operation is a state change: ```tsx // Infinite Table: update columns via React state const [columns, setColumns] = useState(initialColumns); const onButtonClick = () => { setColumns(newColumns); // grid re-renders automatically }; primaryKey="id" data={dataSource}> columns={columns} /> ``` The same `value` / `onChange` pattern you use for a React `` works for the entire grid. ## API surface: breadth vs composability AG Grid covers a huge number of enterprise use cases, and its API reflects that breadth. The [`GridOptions` interface](https://www.ag-grid.com/react-data-grid/grid-options/) spans hundreds of props across 25+ categories — from row grouping and pivoting to charting, clipboard, and server-side row models. For teams that need that coverage, it's all there. That breadth naturally comes with complexity. Over a decade of multi-framework development, the API has grown to include multiple ways to configure the same behaviour — for example, overlays can be customised through `overlayComponent`, or through the older `loadingOverlayComponent` and `noRowsOverlayComponent`, or through template strings, all of which still work. Row grouping alone involves roughly 20 grid-level props. These aren't flaws — they're the result of supporting many years of backwards compatibility across four frameworks, and teams that rely on those options are glad they exist. Infinite Table makes a different trade-off: keep the API surface small and composable. - **Function props as building blocks.** The [`groupColumn`](https://infinite-table.com/docs/learn/grouping-and-pivoting/grouping-rows.md) prop can be a column object (single group column) or a function (called for each generated column). One prop, two behaviours, composed through the same mechanism. - **Controlled and uncontrolled variants.** Want to manage sorting yourself? Pass `sortInfo` (controlled). Want the grid to handle it? Pass `defaultSortInfo` (uncontrolled). The same pattern as `value` vs `defaultValue` on a React ``. - **Fewer props to coordinate.** Infinite Table ships grouping, pivoting, and aggregations — but with a smaller configuration surface. The bet is that fewer, more composable props are easier to learn and reason about for React teams. These are genuinely different philosophies. AG Grid's large surface means there's usually a dedicated prop for any specific requirement. Infinite Table's smaller surface means you compose general-purpose building blocks to get there. ## Architecture | | Infinite Table | AG Grid | |---|---|---| | **Built for** | React | Multi-framework (JS, Angular, Vue, React) | | **React integration** | Native — renders through React's reconciler | Framework-agnostic core with React adapter | | **API style** | Declarative props, controlled + uncontrolled | Comprehensive configuration object, imperative API | | **Cell renderers** | Plain JSX components | AG Grid component interface (React components supported) | | **State management** | Lives in React (useState, context, external stores) | Lives inside the grid; synced to React via callbacks | | **TypeScript** | Written in TypeScript, first-class types | Written in TypeScript, first-class types | | **Virtualization** | Row + column | Row + column | ## Feature Comparison | Feature | Infinite Table (free) | AG Grid Community (free) | AG Grid Enterprise (paid) | |---|---|---|---| | Sorting (single + multi) | ✅ | ✅ | ✅ | | Column filtering | ✅ | ✅ | ✅ | | Column resizing | ✅ | ✅ | ✅ | | Column reordering | ✅ | ✅ | ✅ | | Column pinning | ✅ | ✅ | ✅ | | Column grouping (headers) | ✅ | ✅ | ✅ | | Row grouping | ✅ | 🔴 | ✅ | | Aggregations | ✅ | 🔴 | ✅ | | Pivoting | ✅ | 🔴 | ✅ | | Tree data | ✅ | 🔴 | ✅ | | Master-detail | ✅ | 🔴 | ✅ | | Lazy loading | ✅ | 🔴 | ✅ (server-side row model) | | Live pagination | ✅ | 🔴 | ✅ | | Row + column virtualization | ✅ | ✅ | ✅ | | Cell editing | ✅ | ✅ | ✅ | | Cell selection | ✅ | 🔴 | ✅ (range selection) | | Row selection | ✅ | ✅ | ✅ | | Context menus | ✅ | 🔴 | ✅ | | Keyboard navigation | ✅ | ✅ | ✅ | | Theming (CSS variables) | ✅ | ✅ | ✅ | | Excel export | 🔴 | 🔴 | ✅ | | Clipboard | 🔴 | 🔴 | ✅ | | Integrated charting | 🔴 | 🔴 | ✅ | | Server-side row model | ✅ | 🔴 | ✅ | | Status bar / sidebar panels | 🔴 | 🔴 | ✅ | AG Grid Community (MIT) does not include row grouping, pivoting, aggregations, tree data, or master-detail. Those require AG Grid Enterprise. Infinite Table includes all of these in the free build (with a "Powered by Infinite Table" footer). A paid license key removes the footer. ## Pricing | | Infinite Table | AG Grid Enterprise | |---|---|---| | **Starting price** | [$395/dev/year](https://infinite-table.com/pricing) | [~$999/dev/year](https://www.ag-grid.com/license-pricing) | | **Volume discount** | 5% at 3 devs, 10% at 5, 15% at 10 | Contact sales | | **Deployment license** | None required | None required | | **Free tier** | All features, footer displayed | Community edition (grouping/pivot excluded) | | **Support** | Email (paid license) | Zendesk (Enterprise license) | ## When AG Grid is the better choice - **Multi-framework projects.** If you need the same data grid across Angular, Vue, and React codebases, AG Grid is the clear choice — Infinite Table is React-only. Standardising on one grid across frameworks saves training time and keeps behaviour consistent. - **The widest feature surface.** AG Grid Enterprise includes built-in charting, clipboard, Excel export, column tool panels, status bars, and a full server-side row model with partial store. If you need several of these features, AG Grid covers them all in one package. No other grid matches this breadth. - **Enormous community and ecosystem.** With over 1M weekly npm downloads and 13k+ GitHub stars, AG Grid has the deepest community resources, Stack Overflow coverage, and third-party integrations of any data grid. Ecosystem maturity matters — and AG Grid's is unmatched. - **Your team already knows AG Grid.** If your developers are experienced with AG Grid's API and patterns from other projects, that familiarity has real value. Switching to a different grid has a learning cost, and AG Grid's comprehensive documentation makes it possible to find an answer for almost any scenario. - **You need the dedicated configuration options.** AG Grid's large API means there's often a purpose-built prop for a specific edge case. If you regularly need that level of fine-grained, per-feature configuration, the breadth of the API is a strength. ## When Infinite Table is the better fit - **You want the grid to feel like React.** Infinite Table's API is props, controlled state, and JSX — the same patterns you use in every other React component. If your team thinks in React, Infinite Table fits that mental model. - **You prefer a small, composable API.** Infinite Table ships grouping, pivoting, and aggregations with a compact configuration surface. Function props as building blocks, controlled/uncontrolled patterns for state, composable rather than exhaustive. A different bet from AG Grid's comprehensive approach — one that suits teams who want fewer props to learn and coordinate. - **You need grouping, pivoting, and aggregations without an enterprise license.** These are included in Infinite Table's free build. AG Grid reserves them for the Enterprise tier. - **Simpler licensing.** One plan, one key for the whole team, no deployment license. Install the package, render your first DataGrid, and learn how `` and `` work together. Grouping, aggregations, and pivoting — included without an Enterprise license. Use Infinite Table free with a footer, or buy a license to remove it and get email support. Read AG Grid's official React getting started guide. ## Help us keep this comparison up-to-date This page is our reading of AG Grid's public docs and pricing as of mid-2026. We want it to stay accurate. If you work on AG Grid — or you've spotted something that's wrong, outdated, or missing context — please tell us. We will update the page. - [Edit this page on GitHub](https://github.com/infinite-table/infinite-react/edit/master/www/content/docs/learn/compare/ag-grid.page.md) and open a pull request - [File a correction issue](https://github.com/infinite-table/infinite-react/issues/new?template=compare_page_correction.md&title=Compare%20page%20correction%3A%20AG%20Grid) - Email [admin@infinite-table.com](mailto:admin@infinite-table.com?subject=Compare%20page%20correction%3A%20AG%20Grid) with the URL and what should change --- # Infinite Table vs MUI X Data Grid > A detailed comparison of Infinite Table and MUI X Data Grid. React-native design approaches, features across tiers, and when MUI X Data Grid is the better choice. Canonical page: https://infinite-table.com/docs/learn/compare/mui-x-data-grid [MUI X Data Grid](https://mui.com/x/react-data-grid/) is a React data grid from the Material UI team. It's part of the broader MUI X suite (date pickers, charts, tree view) and follows Material Design conventions. Like Infinite Table, it's React-only and uses a declarative, prop-driven API. These two grids have more in common architecturally than either has with AG Grid or TanStack Table. Both render through React, both use props and controlled state, both support JSX cell renderers. The differences are in design-system coupling, feature availability across tiers, and how each grid's API is structured. ## Where they diverge **Design-system coupling.** MUI X Data Grid is built on Material UI. It inherits your MUI theme tokens — palette, spacing, typography — automatically. This is a major advantage if your app already uses MUI. If your app uses a different design system, you'll be adding MUI's styling infrastructure (`@emotion`, theme provider, `sx` prop) as dependencies alongside your existing stack. Infinite Table is design-system agnostic. Theming is done through CSS variables — you can integrate with Tailwind, vanilla CSS, or any design system without extra dependencies. There's no coupling to a specific component library. **Feature availability.** MUI X uses a four-tier model: Community (free), Pro ($299/dev/yr), Premium ($599/dev/yr), and Enterprise ($1,399/dev/yr). Core features like column resizing, pinning, and tree data require at least Pro. Grouping, pivoting, and aggregations require Premium. Infinite Table includes all of these in the package (only one package, no separate community and enterprise packages). A "Powered by Infinite Table" footer is displayed; a [paid license ($395/dev/year)](https://infinite-table.com/pricing) removes it. **Data layer separation.** Infinite Table splits data management and rendering into two React components — `` and ``. The `` handles fetching, sorting, grouping, pivoting, and filtering; the `` handles rendering. You can even use `` with your own custom component. MUI X Data Grid is a single component that handles both data and rendering internally. ## Architecture | | Infinite Table | MUI X Data Grid | |---|---|---| | **Framework** | React | React | | **Design system** | Agnostic — CSS variables | Material UI — MUI theme system | | **Component model** | Two components: `` + `` | Single `` / `` / `` component | | **API style** | Declarative props, controlled + uncontrolled | Declarative props, controlled + uncontrolled | | **Cell renderers** | JSX components via column `render` prop | JSX components via `renderCell` slot | | **TypeScript** | Written in TypeScript | Written in TypeScript | | **Virtualization** | Row + column | Row virtualization; column virtualization in Pro+ | | **Packages** | Single package, all features | Separate packages per tier | ## Feature Comparison | Feature | Infinite Table (free) | MUI X Community (free) | MUI X Pro ($299/dev/yr) | MUI X Premium ($599/dev/yr) | |---|---|---|---|---| | Sorting (single + multi) | ✅ | ✅ (single) | ✅ (multi) | ✅ (multi) | | Column filtering | ✅ | ✅ (single) | ✅ (multi) | ✅ (multi) | | Column resizing | ✅ | 🔴 | ✅ | ✅ | | Column reordering | ✅ | 🔴 | ✅ | ✅ | | Column pinning | ✅ | 🔴 | ✅ | ✅ | | Column grouping (headers) | ✅ | ✅ | ✅ | ✅ | | Row grouping | ✅ | 🔴 | 🔴 | ✅ | | Aggregations | ✅ | 🔴 | 🔴 | ✅ | | Pivoting | ✅ | 🔴 | 🔴 | ✅ | | Tree data | ✅ | 🔴 | ✅ | ✅ | | Master-detail | ✅ | 🔴 | ✅ | ✅ | | Row virtualization | ✅ | ✅ | ✅ | ✅ | | Column virtualization | ✅ | 🔴 | ✅ | ✅ | | Cell editing | ✅ | ✅ | ✅ | ✅ | | Cell selection | ✅ | 🔴 | 🔴 | ✅ | | Row selection | ✅ | ✅ | ✅ | ✅ | | Keyboard navigation | ✅ | ✅ | ✅ | ✅ | | Lazy loading | ✅ | 🔴 | ✅ (server-side) | ✅ | | Live pagination | ✅ | 🔴 | 🔴 | 🔴 | | Context menus | ✅ | 🔴 | 🔴 | 🔴 | | Excel export | 🔴 | 🔴 | 🔴 | ✅ | | Clipboard (copy/paste) | 🔴 | 🔴 | 🔴 | ✅ | MUI X uses a tiered model: row grouping, pivoting, aggregations, and cell selection require the Premium plan ($599/dev/year). Column resizing, pinning, reordering, tree data, and master-detail require at least Pro ($299/dev/year). Feature details are from the [MUI pricing page](https://mui.com/pricing/). Infinite Table includes all of these features in the free Community build. ## Pricing | | Infinite Table | MUI X Pro | MUI X Premium | MUI X Enterprise | |---|---|---|---|---| | **Price** | [$395/dev/year](https://infinite-table.com/pricing) | [$299/dev/year](https://mui.com/pricing/) | [$599/dev/year](https://mui.com/pricing/) | [$1,399/dev/year](https://mui.com/pricing/) | | **Grouping + pivoting** | ✅ (free) | 🔴 | ✅ | ✅ | | **Tree data + master-detail** | ✅ (free) | ✅ | ✅ | ✅ | | **Column resizing + pinning** | ✅ (free) | ✅ | ✅ | ✅ | | **Deployment license** | None | None | None | None | | **Support** | Email (paid) | Community | Priority over Community | Priority over Pro | ## When MUI X Data Grid is the better choice - **You're already in the MUI ecosystem.** If your app uses Material UI, MUI X Data Grid inherits your MUI theme automatically — palette, spacing, typography, dark mode — with zero configuration. Infinite Table uses CSS variables and won't pick up MUI theme tokens automatically. - **You need the full MUI X suite.** MUI X includes date pickers, charts, tree view, and a scheduler under a single license. If you need multiple MUI X components, a Pro or Premium license covers them all. - **Material Design consistency.** The Data Grid follows Material Design patterns by default. If your design spec is Material Design, MUI X is the most natural fit. - **Large community.** MUI has a very large user community — millions of weekly npm downloads for Material UI. More community resources, tutorials, and third-party integrations. - **Column-level features at the Pro tier.** If you need column resizing, pinning, reordering, and tree data but not grouping or pivoting, MUI X Pro at $299/dev/year covers those features along with all other MUI X Pro components. ## When Infinite Table is the better fit - **You need grouping, pivoting, and aggregations without the Premium tier.** These are free in Infinite Table's Community build. MUI X requires Premium ($599/dev/year) for the same features. - **You're not using Material UI.** If your app uses Tailwind, vanilla CSS, or another design system, Infinite Table may be a simpler fit — it uses plain CSS variables and works with any styling approach without adding a design-system dependency. - **Data layer separation.** Infinite Table's `` / `` split gives you a clean separation between data management (fetching, sorting, grouping, pivoting, filtering) and rendering. You can even replace `` with your own component and keep the data layer. - **Column virtualization on the free tier.** Infinite Table virtualizes both rows and columns by default. MUI X Community only virtualizes rows up to 100 rows; column virtualization and unlimited row virtualization require Pro. - **Live pagination and context menus.** Infinite Table includes built-in live pagination and context menus. MUI X does not offer equivalents at any tier. - **Single-tier licensing.** Infinite Table has one plan with all features included. MUI X offers four tiers, which gives you flexibility to pay only for what you need — but also means checking which tier covers each feature. Install the package, render your first DataGrid, and learn how `` and `` work together. Theme Infinite Table without a Material UI theme provider — CSS variables only. Use Infinite Table free with a footer, or buy a license to remove it and get email support. Read MUI X Data Grid's official documentation. ## Help us keep this comparison up-to-date This page is our reading of MUI X Data Grid's public docs and [pricing page](https://mui.com/pricing/) as of mid-2026. We want it to stay accurate. If you work on MUI X — or you've spotted something that's wrong, outdated, or missing context — please tell us. We will update the page. - [Edit this page on GitHub](https://github.com/infinite-table/infinite-react/edit/master/www/content/docs/learn/compare/mui-x-data-grid.page.md) and open a pull request - [File a correction issue](https://github.com/infinite-table/infinite-react/issues/new?template=compare_page_correction.md&title=Compare%20page%20correction%3A%20MUI%20X%20Data%20Grid) - Email [admin@infinite-table.com](mailto:admin@infinite-table.com?subject=Compare%20page%20correction%3A%20MUI%20X%20Data%20Grid) with the URL and what should change --- # Infinite Table vs TanStack Table > A detailed comparison of Infinite Table and TanStack Table. Declarative rendered grid vs headless logic library — architecture, features, and when TanStack Table is the better choice. Canonical page: https://infinite-table.com/docs/learn/compare/tanstack-table [TanStack Table](https://tanstack.com/table) (formerly React Table) is a popular, MIT-licensed headless table library. It provides table logic — sorting, filtering, grouping, pagination — but no UI. You bring your own JSX, your own styles, your own virtualization, your own keyboard navigation. Infinite Table is a fully rendered React data grid. You pass props — columns, data, grouping configuration — and get a complete, virtualized, keyboard-navigable grid with theming out of the box. Both are valid approaches. The question is where you want to spend your engineering time. ## Two ends of a spectrum Data grids range from fully rendered components to headless logic libraries. At one end is AG Grid — a comprehensive, multi-framework grid that handles everything. At the other end is TanStack Table — headless hooks that give you total rendering control and require you to build everything visible. Infinite Table sits in the middle: **a declarative React component that ships the grid**. You get a React-native API (props, controlled state, JSX cell renderers) without having to construct the table markup, virtualization, focus management, and accessibility yourself. ```tsx // TanStack Table: you provide all the JSX const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() }); return ( {table.getHeaderGroups().map(headerGroup => ( {headerGroup.headers.map(header => ( ))} ))} {table.getRowModel().rows.map(row => ( {row.getVisibleCells().map(cell => ( ))} ))}

{flexRender(header.column.columnDef.header, header.getContext())}
{flexRender(cell.column.columnDef.cell, cell.getContext())}

); ``` ```tsx // Infinite Table: declarative props, grid ships complete primaryKey="id" data={dataSource}> columns={columns} /> ``` Both examples display tabular data. The first gives you total control over every `` and ``. The second gives you a working grid — virtualized, keyboard-navigable, themeable — in two components. ## Architecture | | Infinite Table | TanStack Table | |---|---|---| | **Type** | Rendered React component | Headless logic library | | **What you get** | Full UI: virtualized grid, headers, cells, scrollbars, keyboard nav, theming | Table state + utilities; you provide all DOM and styling | | **API style** | Declarative props (controlled + uncontrolled) | Hooks that return row/cell models; you render everything | | **Cell rendering** | JSX — pass a React component as a column prop | JSX - Use the `FlexRender` component | | **Frameworks** | React | All Most Popular | | **Virtualization** | Built-in row + column virtualization | Not included; pair with [TanStack Virtual](https://tanstack.com/virtual) or your own | | **TypeScript** | First-class | First-class | | **Bundle** | Single package, includes CSS | Tiny core; total size depends on what you build on top | ## Feature Comparison | Feature | Infinite Table | TanStack Table | |---|---|---| | Sorting | ✅ | 🔴 (logic only) | | Column filtering | ✅ | 🔴 (logic only) | | Row grouping | ✅ | 🔴 (logic only) | | Aggregations | ✅ | 🔴 (logic only) | | Pivoting | ✅ | 🔴 (logic only) | | Tree data | ✅ | 🔴 (logic only) | | Column resizing | ✅ | 🔴 (logic helpers) | | Column reordering | ✅ | 🔴 | | Column pinning | ✅ | 🔴 (logic helpers) | | Cell editing | ✅ | 🔴 | | Cell selection | ✅ | 🔴 | | Row selection | ✅ | 🔴 (logic only) | | Keyboard navigation | ✅ | 🔴 | | Context menus | ✅ | 🔴 | | Master-detail | ✅ | 🔴 | | Lazy loading / live pagination | ✅ | 🔴 (pagination logic available) | | Row + column virtualization | ✅ | 🔴 (use TanStack Virtual) | | Theming | ✅ | 🔴 | "Logic only" means TanStack Table handles the state and computations, but you write all the JSX, CSS, event handlers, and accessibility attributes. This is powerful but requires substantial development effort for a production-grade data grid. ## What "headless" means in practice With TanStack Table, building a production data grid involves: 1. Rendering the ``, ``, ``, ``, `

` (or `

`-based layout) yourself. 2. Wiring up virtualization (typically TanStack Virtual) for large datasets. 3. Building filter UIs, sort indicators, group expand/collapse toggles, resize handles, and column reorder drag-and-drop. 4. Handling keyboard navigation and ARIA attributes for accessibility. 5. Styling everything from scratch or integrating with your design system. This is the right approach when you need pixel-perfect control or are building a design-system component library. But it means weeks of work to reach feature parity with a rendered grid — and that code becomes yours to maintain. With Infinite Table, grouping, pivoting, filtering, virtualization, keyboard navigation, and theming work the moment you render the component. You customise through props and JSX cell renderers, not by rebuilding the grid's internals. ## Pricing TanStack Table is MIT-licensed and free. There is no paid tier. Infinite Table is also free — all features included — but displays a "Powered by Infinite Table" footer. A [paid license ($395/dev/year)](https://infinite-table.com/pricing) removes the footer and adds email support. ## When TanStack Table is the better choice - **Total rendering control.** You need pixel-perfect custom UI, or you're building a table component for a design-system library where the rendered output must match your design spec exactly. - **Multi-framework.** TanStack Table works across React, Vue, Solid, and Svelte. Infinite Table is React-only. - **Minimal bundle.** If you only need sorting and basic filtering on a small dataset (no virtualization, no grouping), TanStack Table's core is smaller than any full grid component. - **Zero restrictions.** MIT license with no footer, no license key, no terms beyond MIT. - **Existing investment.** If your team has already built a mature grid UI on top of TanStack Table, migrating to a rendered grid may not justify the effort. ## When Infinite Table is the better fit - **You want to ship the grid, not build it.** Infinite Table delivers a production-ready grid — virtualized, keyboard-navigable, themed — out of the box. You focus on your product, not on re-implementing table infrastructure. - **You want native React API feel without the assembly work.** TanStack Table gives you hooks and row models; you assemble the JSX. Infinite Table gives you declarative props and controlled state — the same patterns you use in every other React component — but ships the complete UI so you don't have to build it yourself. Of course you still have a lot of control over column cells, headers, filters, etc. - **Complex data features built in.** Master-detail, tree grids, lazy loading, live pagination, cell editing, cell selection, and context menus are all included. Building these on top of TanStack Table is a significant engineering project. - **Accessibility and keyboard support.** Infinite Table includes keyboard navigation and focus management. With TanStack Table, you implement these yourself. Install the package, render your first DataGrid, and learn how `` and `` work together. Built-in grouping, aggregations, and pivoting — without writing the UI layer yourself. Use Infinite Table free with a footer, or buy a license to remove it and get email support. Read TanStack Table's official introduction. ## Help us keep this comparison up-to-date This page is our reading of TanStack Table's public docs as of mid-2026. We want it to stay accurate. If you work on TanStack Table — or you've spotted something that's wrong, outdated, or missing context — please tell us. We will update the page. - [Edit this page on GitHub](https://github.com/infinite-table/infinite-react/edit/master/www/content/docs/learn/compare/tanstack-table.page.md) and open a pull request - [File a correction issue](https://github.com/infinite-table/infinite-react/issues/new?template=compare_page_correction.md&title=Compare%20page%20correction%3A%20TanStack%20Table) - Email [admin@infinite-table.com](mailto:admin@infinite-table.com?subject=Compare%20page%20correction%3A%20TanStack%20Table) with the URL and what should change --- # Using Context Menus > InfiniteTable DataGrid allows you to easily configure context menus for any row and cell in the table and for the whole table body. Canonical page: https://infinite-table.com/docs/learn/context-menus/using-context-menus The easiest way to configure a context menu is to provide the [`getCellContextMenuItems`](https://infinite-table.com/docs/reference/infinite-table-props.md#getCellContextMenuItems) callback function and use it to return the menu items you want to show in the context menu. ```tsx const getCellContextMenuItems = ({ column, value }) => { if (column.id === 'currency') { return [ { label: `Convert ${value}`, key: 'currency-convert', }, ]; } if (column.id === 'age') { return null; } return [ { label: `Welcome ${value}`, key: 'hi', }, ]; }; data={data} primaryKey="id"> getCellContextMenuItems={getCellContextMenuItems} columns={columns} /> ; ``` **Example: Using context menus** Right-click any cell in the table to see the custom context menu. ```ts import { InfiniteTable, DataSource, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers100') .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { stack: { field: 'stack', header: 'Stack', }, firstName: { field: 'firstName', header: 'Name', }, age: { field: 'age', header: 'Age', }, hobby: { field: 'hobby', header: 'Hobby', }, preferredLanguage: { header: 'Language', field: 'preferredLanguage', }, }; export default function App() { return ( <> primaryKey="id" data={dataSource}> debugId="basic-cells-context-menu-example" columns={columns} getCellContextMenuItems={({ data, column }) => { return [ { key: 'hello', label: `Hello, ${data?.lastName} ${data?.firstName}`, onClick: () => { alert(`Hello, ${data?.lastName} ${data?.firstName}`); }, }, { key: 'col', label: `Current clicked column: ${column.header}`, }, { key: 'learn', label: `Learn`, menu: { items: [ { key: 'backend', label: 'Backend', onClick: () => { alert( `Learn Backend, ${data?.lastName} ${data?.firstName}`, ); }, }, { key: 'frontend', label: 'Frontend', onClick: () => { alert( `Learn Frontend, ${data?.lastName} ${data?.firstName}`, ); }, }, ], }, }, ]; }} /> ); } ``` The [`getCellContextMenuItems`](https://infinite-table.com/docs/reference/infinite-table-props.md#getCellContextMenuItems) function can return one of the following: - `null` - no custom context menu will be displayed, the default context menu will be shown (default event behavior not prevented) - `[]` - an empty array - no custom context menu will be displayed, but the default context menu is not shown - the default event behavior is prevented - `Array` - an array of menu items to be displayed in the context menu - each `MenuItem` should have: - a unique `key` property, - a `label` property with the value to display in the menu cell - it's called `label` because this is the name of the default column in the context menu - an optional `onClick` callback function to handle the click event on the menu item. In addition, if you need to configure the context menu to have other columns rather than the default column (named `label`), you can do so by returning an object with `columns` and `items`: ```tsx const getCellContextMenuItems = () => { return { columns: [{ name: 'label' }, { name: 'lcon' }], items: [ { label: 'Welcome', icon: '👋', key: 'hi', onAction: () => { // do something }, hideMenuOnAction: true, }, { label: 'Convert', icon: '🔁', key: 'convert', }, ], }; }; ``` **Example: Customising columns in the context menu** Right-click any cell in the table to see a context menu with multiple columns (`icon`, `label` and `description`). ```ts import { InfiniteTable, DataSource, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers100') .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { stack: { field: 'stack', header: 'Stack', }, firstName: { field: 'firstName', header: 'Name', }, age: { field: 'age', header: 'Age', }, hobby: { field: 'hobby', header: 'Hobby', }, preferredLanguage: { header: 'Language', field: 'preferredLanguage', }, }; export default function App() { return ( <> primaryKey="id" data={dataSource}> debugId="custom-columns-context-menu-example" columns={columns} columnDefaultEditable getCellContextMenuItems={({ data, column }) => { const columns = [ { name: 'icon' }, { name: 'label' }, { name: 'description' }, ]; return { columns, items: [ { key: 'hello', icon: '👋', label: `Hello, ${data?.lastName} ${data?.firstName}`, description: `This is a description for ${data?.lastName}`, onClick: () => { alert(`Hello, ${data?.lastName} ${data?.firstName}`); }, }, { key: 'col', icon: '🙌', label: `Column: ${column.header}`, description: `Current clicked column: ${column.header}`, }, { key: 'learn', icon: '📚', label: `Learn`, description: `Learn more about ${data?.preferredLanguage}`, menu: { columns, items: [ { key: 'backend', label: 'Backend', icon: '👨‍💻', description: 'In the Backend', onClick: () => { alert( `Learn Backend, ${data?.lastName} ${data?.firstName}`, ); }, }, { key: 'frontend', label: 'Frontend', icon: '👨‍💻', description: 'In the Frontend', onClick: () => { alert( `Learn Frontend, ${data?.lastName} ${data?.firstName}`, ); }, }, ], }, }, ], }; }} /> ); } ``` ## Context Menus for the Table Body You might want to show a context menu for the table body, when the user right-clicks outside of any existing cell. For this, you can use the [`getContextMenuItems`](https://infinite-table.com/docs/reference/infinite-table-props.md#getContextMenuItems) prop. This function has almost the same signature as [`getCellContextMenuItems`](https://infinite-table.com/docs/reference/infinite-table-props.md#getCellContextMenuItems), with the following differences in the object passed as first parameter: - all cell-related properties (`column`, `data`, `value`, etc) can be `undefined` - it contains an `event` property with the original event object for the right-click event **Example: Context menu for outside cells** Right-click outside cells in the table to see a context menu for the table body. ```ts import { InfiniteTable, DataSource, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers100') .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { firstName: { field: 'firstName', header: 'Name', defaultWidth: 120, }, age: { field: 'age', header: 'Age', defaultWidth: 100, }, preferredLanguage: { header: 'Language', defaultWidth: 120, field: 'preferredLanguage', }, }; export default function App() { return ( <> primaryKey="id" data={dataSource}> debugId="table-context-menu-example" columns={columns} getContextMenuItems={({ data, column }) => { if (!data) return [ { key: 'add', label: 'Add Item', onClick: () => { alert('Add Item'); }, }, ]; return [ { key: 'hello', label: `Hello, ${data?.lastName} ${data?.firstName}`, onClick: () => { alert(`Hello, ${data?.lastName} ${data?.firstName}`); }, }, { key: 'col', label: `Current clicked column: ${column?.header}`, }, { key: 'learn', label: `Learn`, menu: { items: [ { key: 'backend', label: 'Backend', onClick: () => { alert( `Learn Backend, ${data?.lastName} ${data?.firstName}`, ); }, }, { key: 'frontend', label: 'Frontend', onClick: () => { alert( `Learn Frontend, ${data?.lastName} ${data?.firstName}`, ); }, }, ], }, }, ]; }} /> ); } ``` ## Hiding the Context Menu To hide the context menu when you click a menu item, you can use the `hideMenuOnAction` property on the menu item. Alternatively, you can use the object passed in as a parameter to the `item.onAction` callback function to hide the menu: ```tsx {12} const getCellContextMenuItems = () => { return { items: [ { label: 'Hello', key: 'hi', onAction: ({ key, hideMenu }) => { // do something console.log('Hello'); // hide the menu hideMenu(); }, }, ], }; }; ``` The third option is to use the [`hideContextMenu`](https://infinite-table.com/docs/reference/api/index.md#hideContextMenu) function in the [API](https://infinite-table.com/docs/reference/api/index.md). --- # Column Editors > Learn how to use configure editors for columns in Infinite Table Canonical page: https://infinite-table.com/docs/learn/editing/column-editors For now, Infinite Table comes with a default built-in editor that's rendered when editing starts on any editable cell. It's very easy to configure columns with your own custom editors via the [`columns.components.Editor`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.components.Editor) property. ```tsx const columns: InfiniteTablePropColumns = { canDesign: { field: 'canDesign', defaultEditable: true, components: { // don't forget to provide an implementation // for the BoolEditor component Editor: BoolEditor, }, }, id: { field: 'id', }, }; ``` For now, we're not shipping any extra editors with Infinite Table. There are a few reasons for that: - we want to keep our bundle size small - we're aware people have their own preferences - especially **select/combo boxes** and **date pickers** are very complex components on their own and there are many different popular alternatives many teams already use in their projects So in this page and other parts of the docs, we'll use some popular alternatives, to show how to integrate them with Infinite Table. ## Using Date Editors A common use-case is integrating date editors, so in the following example we'll use the [MUI X Date Picker](https://mui.com/x/react-date-pickers/date-picker/) component. **Example: Using MUI X Date Picker for editing dates in the DataGrid** This is a basic example integrating with the [MUI X Date Picker](https://mui.com/x/react-date-pickers/date-picker/) - click any cell in the **Birth Date** column to show the date picker. ```ts import { InfiniteTable, DataSource, useInfiniteColumnEditor, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import { StyledEngineProvider } from '@mui/material/styles'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import dayjs from 'dayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; import * as _emotionStyled from '@emotion/styled'; import * as _emotionReact from '@emotion/react'; import * as React from 'react'; type Developer = { birthDate: Date; id: number; firstName: string; country: string; city: string; currency: string; email: string; preferredLanguage: string; hobby: string; salary: number; }; const DATE_FORMAT = 'YYYY-MM-DD'; const DateEditor = () => { const { value, confirmEdit, cancelEdit } = useInfiniteColumnEditor(); const day = dayjs(value); return ( { if (day) { confirmEdit(day.toDate()); } }} /> ); }; const columns: InfiniteTablePropColumns = { firstName: { field: 'firstName', header: 'First Name' }, birthDate: { field: 'birthDate', header: 'Birth Date', // we need to specify the type of the column as "date" type: 'date', defaultEditable: true, defaultWidth: 200, components: { Editor: DateEditor, }, style: ({ inEdit }) => { return inEdit ? { padding: 0 } : {}; }, renderValue: ({ value }: { value: Date }) => { return {dayjs(value).format(DATE_FORMAT)}; }, }, salary: { field: 'salary', header: 'Salary', type: 'number', }, country: { field: 'country', header: 'Country' }, preferredLanguage: { field: 'preferredLanguage' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; export default function LocalUncontrolledSingleSortingExample() { return ( <> primaryKey="id" data={dataSource}> debugId="date-editor-example" columns={columns} columnDefaultWidth={120} /> ); } const dataSource: Developer[] = [ { id: 0, firstName: 'Nya', country: 'India', city: 'Unnao', birthDate: new Date(1997, 0, 1), currency: 'JPY', preferredLanguage: 'TypeScript', salary: 60000, hobby: 'sports', email: 'Nya44@gmail.com', }, { id: 1, firstName: 'Axel', country: 'Mexico', city: 'Cuitlahuac', birthDate: new Date(1993, 3, 10), currency: 'USD', preferredLanguage: 'TypeScript', salary: 100000, hobby: 'sports', email: 'Axel93@hotmail.com', }, { id: 2, firstName: 'Gonzalo', country: 'United Arab Emirates', city: 'Fujairah', birthDate: new Date(1997, 10, 30), currency: 'JPY', preferredLanguage: 'Go', salary: 120000, hobby: 'photography', email: 'Gonzalo_McGlynn34@gmail.com', }, { id: 3, firstName: 'Sherwood', country: 'Mexico', city: 'Tlacolula de Matamoros', birthDate: new Date(1990, 5, 20), currency: 'CHF', preferredLanguage: 'Rust', salary: 99000, hobby: 'cooking', email: 'Sherwood_McLaughlin65@hotmail.com', }, { id: 4, firstName: 'Alexandre', country: 'France', city: 'Persan', birthDate: new Date(1990, 3, 20), currency: 'EUR', preferredLanguage: 'Go', salary: 97000, hobby: 'reading', email: 'Alexandre_Harber@hotmail.com', }, { id: 5, firstName: 'Mariane', country: 'United States', city: 'Hays', birthDate: new Date(2002, 3, 20), currency: 'EUR', preferredLanguage: 'TypeScript', salary: 58000, hobby: 'cooking', email: 'Mariane0@hotmail.com', }, { id: 6, firstName: 'Rosalind', country: 'Mexico', city: 'Nuevo Casas Grandes', birthDate: new Date(1992, 11, 12), currency: 'AUD', preferredLanguage: 'JavaScript', salary: 198000, hobby: 'dancing', email: 'Rosalind69@gmail.com', }, { id: 7, firstName: 'Lolita', country: 'Sweden', city: 'Delsbo', birthDate: new Date(1990, 9, 5), currency: 'JPY', preferredLanguage: 'TypeScript', salary: 200000, hobby: 'cooking', email: 'Lolita.Hayes@hotmail.com', }, { id: 8, firstName: 'Tre', country: 'Germany', city: 'Bad Camberg', birthDate: new Date(1990, 9, 15), currency: 'GBP', preferredLanguage: 'TypeScript', salary: 200000, hobby: 'sports', email: 'Tre28@gmail.com', }, { id: 9, firstName: 'Lurline', country: 'Canada', city: 'Raymore', birthDate: new Date(1990, 4, 18), currency: 'EUR', preferredLanguage: 'Rust', salary: 58000, hobby: 'sports', email: 'Lurline_Deckow@gmail.com', }, ]; ``` ## Configure Editors for Column Types When you have more than one column that needs to use the same editor, you can use the [column types](https://infinite-table.com/docs/reference/infinite-table-props.md#columnTypes) and associate the editor with the column type. After defining your generic column types, make sure you assign them to the columns that need that specific type **Example: Using MUI X Date Picker with custom 'date' type columns** This is a basic example integrating with the [MUI X Date Picker](https://mui.com/x/react-date-pickers/date-picker/) - click any cell in the **Birth Date** or **Date Hired** columns to show the date picker. This example uses the [column types](https://infinite-table.com/docs/reference/infinite-table-props.md#columnTypes) to give each date column the same editor and styling. ```ts import { InfiniteTable, DataSource, useInfiniteColumnEditor, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import { StyledEngineProvider } from '@mui/material/styles'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import dayjs from 'dayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; import * as _emotionStyled from '@emotion/styled'; import * as _emotionReact from '@emotion/react'; import * as React from 'react'; type Developer = { birthDate: Date; dateHired: Date; id: number; firstName: string; country: string; city: string; currency: string; email: string; preferredLanguage: string; hobby: string; salary: number; }; const DATE_FORMAT = 'YYYY-MM-DD'; const DateEditor = () => { const { value, confirmEdit, cancelEdit } = useInfiniteColumnEditor(); const day = dayjs(value); return ( { if (day) { confirmEdit(day.toDate()); } }} /> ); }; const columns: InfiniteTablePropColumns = { firstName: { field: 'firstName', header: 'First Name' }, birthDate: { field: 'birthDate', header: 'Birth Date', // we need to specify the type of the column as "date" type: 'date', }, dateHired: { field: 'dateHired', header: 'Date Hired', // we need to specify the type of the column as "date" type: 'date', }, salary: { field: 'salary', header: 'Salary', type: 'number', }, country: { field: 'country', header: 'Country' }, preferredLanguage: { field: 'preferredLanguage' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; const columnTypes = { date: { defaultEditable: true, components: { Editor: DateEditor, }, defaultWidth: 200, style: ({ inEdit }: { inEdit: boolean }) => { return inEdit ? { padding: 0 } : {}; }, renderValue: ({ value }: { value: Date }) => { return {dayjs(value).format(DATE_FORMAT)}; }, }, }; export default function LocalUncontrolledSingleSortingExample() { return ( <> primaryKey="id" data={dataSource}> debugId="column-types-date-editor-example" columnTypes={columnTypes} columns={columns} columnDefaultWidth={120} /> ); } const dataSource: Developer[] = [ { id: 0, firstName: 'Nya', country: 'India', city: 'Unnao', birthDate: new Date(1997, 0, 1), dateHired: new Date(2023, 0, 1), currency: 'JPY', preferredLanguage: 'TypeScript', salary: 60000, hobby: 'sports', email: 'Nya44@gmail.com', }, { id: 1, firstName: 'Axel', country: 'Mexico', city: 'Cuitlahuac', birthDate: new Date(1993, 3, 10), dateHired: new Date(2022, 5, 10), currency: 'USD', preferredLanguage: 'TypeScript', salary: 100000, hobby: 'sports', email: 'Axel93@hotmail.com', }, { id: 2, firstName: 'Gonzalo', country: 'United Arab Emirates', city: 'Fujairah', birthDate: new Date(1997, 10, 30), dateHired: new Date(2021, 8, 29), currency: 'JPY', preferredLanguage: 'Go', salary: 120000, hobby: 'photography', email: 'Gonzalo_McGlynn34@gmail.com', }, { id: 3, firstName: 'Sherwood', country: 'Mexico', city: 'Tlacolula de Matamoros', birthDate: new Date(1990, 5, 20), dateHired: new Date(2021, 8, 20), currency: 'CHF', preferredLanguage: 'Rust', salary: 99000, hobby: 'cooking', email: 'Sherwood_McLaughlin65@hotmail.com', }, { id: 4, firstName: 'Alexandre', country: 'France', city: 'Persan', birthDate: new Date(1990, 3, 20), dateHired: new Date(2023, 11, 12), currency: 'EUR', preferredLanguage: 'Go', salary: 97000, hobby: 'reading', email: 'Alexandre_Harber@hotmail.com', }, { id: 5, firstName: 'Mariane', country: 'United States', city: 'Hays', birthDate: new Date(2002, 3, 20), dateHired: new Date(2022, 2, 22), currency: 'EUR', preferredLanguage: 'TypeScript', salary: 58000, hobby: 'cooking', email: 'Mariane0@hotmail.com', }, { id: 6, firstName: 'Rosalind', country: 'Mexico', city: 'Nuevo Casas Grandes', birthDate: new Date(1992, 11, 12), dateHired: new Date(2022, 1, 12), currency: 'AUD', preferredLanguage: 'JavaScript', salary: 198000, hobby: 'dancing', email: 'Rosalind69@gmail.com', }, { id: 7, firstName: 'Lolita', country: 'Sweden', city: 'Delsbo', birthDate: new Date(1990, 9, 5), dateHired: new Date(2022, 1, 5), currency: 'JPY', preferredLanguage: 'TypeScript', salary: 200000, hobby: 'cooking', email: 'Lolita.Hayes@hotmail.com', }, { id: 8, firstName: 'Tre', country: 'Germany', city: 'Bad Camberg', birthDate: new Date(1990, 9, 15), dateHired: new Date(2022, 10, 1), currency: 'GBP', preferredLanguage: 'TypeScript', salary: 200000, hobby: 'sports', email: 'Tre28@gmail.com', }, { id: 9, firstName: 'Lurline', country: 'Canada', city: 'Raymore', birthDate: new Date(1990, 4, 18), dateHired: new Date(2023, 3, 18), currency: 'EUR', preferredLanguage: 'Rust', salary: 58000, hobby: 'sports', email: 'Lurline_Deckow@gmail.com', }, ]; ``` --- # Custom Editor > Writing a custom editor for a inline editing in Infinite Table for React Canonical page: https://infinite-table.com/docs/learn/editing/custom-editor For writing a custom editor, you can use the [`useInfiniteColumnEditor`](https://infinite-table.com/docs/reference/hooks/index.md#useInfiniteColumnEditor) hook. For any column (or [column type](https://infinite-table.com/docs/reference/infinite-table-props.md#columnTypes) - which can then get applied to multiple columns), you can specify a custom editor component to be used for editing the column's value, via the [column.components.editor](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.components.editor) property. ```tsx {10} const columns: InfiniteTablePropColumns = { id: { field: 'id', defaultEditable: false, }, firstName: { field: 'firstName', components: { // this is using a custom editor component editor: CustomEditor, }, }, age: { field: 'age', type: 'number', defaultEditable: false, }, stack: { field: 'stack' }, currency: { field: 'currency' }, }; ``` The editor component should use the [`useInfiniteColumnEditor`](https://infinite-table.com/docs/reference/hooks/index.md#useInfiniteColumnEditor) hook to have access to cell-related information and to confirm, cancel or reject the edit. ```tsx {3} title="CustomEditor.tsx" import { useInfiniteColumnEditor } from '@infinite-table/infinite-react'; const CustomEditor = () => { const { initialValue, confirmEdit, cancelEdit } = useInfiniteColumnEditor(); const domRef = React.useRef(null); const onKeyDown = useCallback((event: React.KeyboardEvent) => { const { key } = event; if (key === 'Enter' || key === 'Tab') { confirmEdit(domRef.current?.value); } else if (key === 'Escape') { cancelEdit(); } else { event.stopPropagation(); } }, []); return (

); }; ``` Inside any custom editor component, you can use the [`useInfiniteColumnCell`](https://infinite-table.com/docs/reference/hooks/index.md#useInfiniteColumnCell) hook to get access to the cell-related information. **Example: Using a custom editor** In this example, the `salary` column is configured with a custom editor component. ```ts import { InfiniteTable, DataSource, InfiniteTablePropColumns, useInfiniteColumnEditor, } from '@infinite-table/infinite-react'; import { useRef, useCallback } from 'react'; type Developer = { id: number; firstName: string; currency: string; stack: string; hobby: string; salary: string; }; const dataSource: Developer[] = [ { id: 1, firstName: 'John', currency: 'USD', stack: 'frontend', hobby: 'gaming', salary: 'USD 1000', }, { id: 2, firstName: 'Jane', currency: 'EUR', stack: 'backend', hobby: 'reading', salary: 'EUR 2000', }, { id: 3, firstName: 'Jack', currency: 'GBP', stack: 'frontend', hobby: 'gaming', salary: 'GBP 3000', }, { id: 4, firstName: 'Jill', currency: 'USD', stack: 'backend', hobby: 'reading', salary: 'USD 4000', }, ]; const CustomEditor = () => { const { initialValue, confirmEdit, cancelEdit } = useInfiniteColumnEditor(); const domRef = useRef(null); const onKeyDown = useCallback((event: React.KeyboardEvent) => { const { key } = event; if (key === 'Enter' || key === 'Tab') { confirmEdit(domRef.current?.value); } else if (key === 'Escape') { cancelEdit(); } else { event.stopPropagation(); } }, []); return (

); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', defaultWidth: 80, defaultEditable: false }, salary: { components: { // reference to the custom editor component Editor: CustomEditor, }, defaultWidth: 320, field: 'salary', header: 'Salary - edit accepts numbers only', style: { color: 'tomato' }, getValueToEdit: ({ value }) => { return parseInt(value.substr(4), 10); }, getValueToPersist: ({ value, data }) => { return `${data!.currency} ${parseInt(value, 10)}`; }, shouldAcceptEdit: ({ value }) => { return parseInt(value, 10) == value; }, }, firstName: { field: 'firstName', header: 'Name', }, currency: { field: 'currency', header: 'Currency', }, }; export default function InlineEditingExample() { return ( <> primaryKey="id" data={dataSource}> debugId="custom-editor-example" columns={columns} columnDefaultEditable /> ); } ``` ## Using Custom Date Editors A common use-case is integrating date editors, so in the following example we'll use the [MUI X Date Picker](https://mui.com/x/react-date-pickers/date-picker/) component. **Example: Using MUI X Date Picker for editing dates in the DataGrid** This is a basic example integrating with the [MUI X Date Picker](https://mui.com/x/react-date-pickers/date-picker/) - click any cell in the **Birth Date** column to show the date picker. ```ts import { InfiniteTable, DataSource, useInfiniteColumnEditor, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import { StyledEngineProvider } from '@mui/material/styles'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import dayjs from 'dayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; import * as _emotionStyled from '@emotion/styled'; import * as _emotionReact from '@emotion/react'; import * as React from 'react'; type Developer = { birthDate: Date; id: number; firstName: string; country: string; city: string; currency: string; email: string; preferredLanguage: string; hobby: string; salary: number; }; const DATE_FORMAT = 'YYYY-MM-DD'; const DateEditor = () => { const { value, confirmEdit, cancelEdit } = useInfiniteColumnEditor(); const day = dayjs(value); return ( { if (day) { confirmEdit(day.toDate()); } }} /> ); }; const columns: InfiniteTablePropColumns = { firstName: { field: 'firstName', header: 'First Name' }, birthDate: { field: 'birthDate', header: 'Birth Date', // we need to specify the type of the column as "date" type: 'date', defaultEditable: true, defaultWidth: 200, components: { Editor: DateEditor, }, style: ({ inEdit }) => { return inEdit ? { padding: 0 } : {}; }, renderValue: ({ value }: { value: Date }) => { return {dayjs(value).format(DATE_FORMAT)}; }, }, salary: { field: 'salary', header: 'Salary', type: 'number', }, country: { field: 'country', header: 'Country' }, preferredLanguage: { field: 'preferredLanguage' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; export default function LocalUncontrolledSingleSortingExample() { return ( <> primaryKey="id" data={dataSource}> debugId="date-editor-example" columns={columns} columnDefaultWidth={120} /> ); } const dataSource: Developer[] = [ { id: 0, firstName: 'Nya', country: 'India', city: 'Unnao', birthDate: new Date(1997, 0, 1), currency: 'JPY', preferredLanguage: 'TypeScript', salary: 60000, hobby: 'sports', email: 'Nya44@gmail.com', }, { id: 1, firstName: 'Axel', country: 'Mexico', city: 'Cuitlahuac', birthDate: new Date(1993, 3, 10), currency: 'USD', preferredLanguage: 'TypeScript', salary: 100000, hobby: 'sports', email: 'Axel93@hotmail.com', }, { id: 2, firstName: 'Gonzalo', country: 'United Arab Emirates', city: 'Fujairah', birthDate: new Date(1997, 10, 30), currency: 'JPY', preferredLanguage: 'Go', salary: 120000, hobby: 'photography', email: 'Gonzalo_McGlynn34@gmail.com', }, { id: 3, firstName: 'Sherwood', country: 'Mexico', city: 'Tlacolula de Matamoros', birthDate: new Date(1990, 5, 20), currency: 'CHF', preferredLanguage: 'Rust', salary: 99000, hobby: 'cooking', email: 'Sherwood_McLaughlin65@hotmail.com', }, { id: 4, firstName: 'Alexandre', country: 'France', city: 'Persan', birthDate: new Date(1990, 3, 20), currency: 'EUR', preferredLanguage: 'Go', salary: 97000, hobby: 'reading', email: 'Alexandre_Harber@hotmail.com', }, { id: 5, firstName: 'Mariane', country: 'United States', city: 'Hays', birthDate: new Date(2002, 3, 20), currency: 'EUR', preferredLanguage: 'TypeScript', salary: 58000, hobby: 'cooking', email: 'Mariane0@hotmail.com', }, { id: 6, firstName: 'Rosalind', country: 'Mexico', city: 'Nuevo Casas Grandes', birthDate: new Date(1992, 11, 12), currency: 'AUD', preferredLanguage: 'JavaScript', salary: 198000, hobby: 'dancing', email: 'Rosalind69@gmail.com', }, { id: 7, firstName: 'Lolita', country: 'Sweden', city: 'Delsbo', birthDate: new Date(1990, 9, 5), currency: 'JPY', preferredLanguage: 'TypeScript', salary: 200000, hobby: 'cooking', email: 'Lolita.Hayes@hotmail.com', }, { id: 8, firstName: 'Tre', country: 'Germany', city: 'Bad Camberg', birthDate: new Date(1990, 9, 15), currency: 'GBP', preferredLanguage: 'TypeScript', salary: 200000, hobby: 'sports', email: 'Tre28@gmail.com', }, { id: 9, firstName: 'Lurline', country: 'Canada', city: 'Raymore', birthDate: new Date(1990, 4, 18), currency: 'EUR', preferredLanguage: 'Rust', salary: 58000, hobby: 'sports', email: 'Lurline_Deckow@gmail.com', }, ]; ``` --- # Excel-like Editing > Configuring the DataGrid to use Excel-like editing via keyboard shortcuts Canonical page: https://infinite-table.com/docs/learn/editing/excel-like-editing InfiniteTable offers support for Excel-like editing. This means users can simply start typing in an editable cell and the editor is displayed and updated immediately (no `Enter` key is required to start typing). This behavior is achieved by using the [Instant Edit keyboard shorcut](https://infinite-table.com/docs/learn/keyboard-navigation/keyboard-shortcuts.md#instant-edit). ```ts {4,12} import { DataSource, InfiniteTable, keyboardShortcuts } from '@infinite-table/infinite-react'; function App() { return primaryKey="id" data={dataSource}> columns={columns} keyboardShortcuts={[ keyboardShortcuts.instantEdit ]} /> } ``` The `instantEdit` keyboard shorcut is configured (by default) to respond to any key (via the special `*` identifier which matches anything) and will start editing the cell as soon as a key is pressed. This behavior is the same as in Excel, Google Sheets, Numbers or other spreadsheet software. **Example** Click on a cell and then start typing to edit the cell. ```ts import { InfiniteTable, DataSource, DataSourceData, keyboardShortcuts, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage', header: 'Language' }, country: { field: 'country', header: 'Country' }, salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id', defaultEditable: false }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; export default function KeyboardShortcuts() { return ( <> primaryKey="id" data={dataSource}> debugId="keyboard-shortcuts-instant-edit-example" columns={columns} columnDefaultEditable keyboardShortcuts={[keyboardShortcuts.instantEdit]} /> ); } ``` To confirm the editing, press the `Enter` key. ## Simulating formulas with `column.valueGetter` You can use the [`columns.valueGetter`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.valueGetter) property to simulate formulas in your cells. For example, you might want to have a column that multiplies or divides a value by a constant. ```ts {6} const columns = { salary: { field: 'salary' }, salaryK: { valueGetter: ({data}) => data.salary / 1000 } } ``` **Example** Edit the `salary` column and see the `Salary (thousands)` col update. ```ts import { InfiniteTable, DataSource, DataSourceData, keyboardShortcuts, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage', header: 'Language' }, salary: { field: 'salary', type: 'number', }, salaryK: { valueGetter: ({ data }) => data.salary / 1000, header: 'Salary (thousands)', type: 'number', defaultEditable: false, }, country: { field: 'country', header: 'Country', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id', defaultEditable: false }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; export default function KeyboardShortcuts() { return ( <> primaryKey="id" data={dataSource}> debugId="keyboard-shortcuts-instant-edit-with-valuegetter-example" columns={columns} columnDefaultEditable keyboardShortcuts={[keyboardShortcuts.instantEdit]} /> ); } ``` --- # Inline Editing Flow > Flow chart of inline editing - understand the flow of operations when performing edits in Infinite Table for React Canonical page: https://infinite-table.com/docs/learn/editing/inline-edit-flow Editing is described in great detail in the [Inline Editing](https://infinite-table.com/docs/learn/editing/inline-editing) page - so make sure you read that first. This page is just a chart that describes the editing flow with the most important steps: - starting the edit - via the API or by user interaction (which triggers the API call) - checking if the cell is editable - async checks are also supported - retrieving the value to edit - stopping the edit - via API or by user interaction - an edit can be cancelled - value discarded - an edit can be rejected - value rejected with error - an edit can be accepted - value accepted and passed to the persit layer - persisting the edit - defaulting to updating data to the data source - a custom persist function can be provided via [`persistEdit`](https://infinite-table.com/docs/reference/infinite-table-props.md#persistEdit) - notifying the user of the result of the edit - `onEditCancelled` - `onEditRejected` - `onEditAccepted` - after accepting the edit, either the persist success or error is called - `onEditPersistSuccess` - `onEditPersistError` ```mmd graph TD; startEdit-->editable; editable--"yes"-->editable_yes; editable--"no"-->done; editable_yes--column.getValueToEdit--->editing_active editing_active--"stopEdit({ cancel })"-->cancel editing_active--"stopEdit({ reject })"-->reject editing_active--"stopEdit({ value? })"-->should_accept_edit cancel-->onEditCancelled reject-->onEditRejected onEditCancelled-->done should_accept_edit--yes-->value_accepted should_accept_edit--no-->onEditRejected value_accepted --"column.getValueToPersist(async)"--> persist_value persist_value--no--> default_persist persist_value--yes--> custom_persist default_persist-->onEditPersistSuccess custom_persist-->onEditPersistSuccess custom_persist-->onEditPersistError onEditPersistSuccess-->done onEditPersistError-->done onEditRejected-->done startEdit["API.startEdit({rowIndex, columnId})"] editable{"editable?(async)"} editing_active(["Editing active"]) editable_yes(["Yes"]) cancel("Cancel - value discarded") reject("Reject - value rejected with error") onEditCancelled["onEditCancelled()"] onEditRejected["onEditRejected()"] should_accept_edit{"shouldAcceptEdit?(async)"} value_accepted(["onEditAccepted()"]) persist_value{"props.persistEdit defined?"} default_persist["dataSourceApi.updateData(...)"] custom_persist["props.persistEdit(...) async"] onEditPersistSuccess["onEditPersistSuccess()"] onEditPersistError["onEditPersistError()"] ``` --- # Editing > Learn how to use inline editing to update your data with Infinite Table for React Canonical page: https://infinite-table.com/docs/learn/editing/overview By default, editing is not enabled. To enable editing globally, you can use the [`columnDefaultEditable`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnDefaultEditable) boolean prop on the `InfiniteTable` component. This will enable the editing on all columns. Or you can be more specific and choose to make individual columns editable via the [column.defaultEditable](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.defaultEditable) prop. This overrides the global [`columnDefaultEditable`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnDefaultEditable). **Example: Inline Editing in action** All columns (except id) are editable. ```ts import { InfiniteTable, DataSource, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers100') .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', defaultWidth: 80, defaultEditable: false }, stack: { field: 'stack', contentFocusable: true, header: 'Stack', }, firstName: { field: 'firstName', header: 'Name', }, age: { field: 'age', header: 'Age', }, hobby: { field: 'hobby', header: 'Hobby', }, preferredLanguage: { header: 'Language', field: 'preferredLanguage', }, }; export default function ColumnValueGetterExample() { return ( <> primaryKey="id" data={dataSource}> debugId="inline-editing-example" columns={columns} columnDefaultEditable /> ); } ``` Read about how you can configure various editors for your columns. A picture is worth a thousand words - see a chart for the editing flow. The [column.defaultEditable](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.defaultEditable) property can be either a `boolean` or a `function`. If it is a function, it will be called when an edit is triggered on the column. The function will be called with a single object that contains the following properties: - `value` - the current value of the cell (the value currently displayed, so after [`columns.valueFormatter`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.valueFormatter) and [`columns.renderValue`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderValue) have been applied) - `rawValue` - the current value of the cell, but before any formatting and custom rendering has been applied. This is either the field value from the current data object, or the result of the column [valueGetter](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.valueGetter) function. - `data` - the data object (of type `DATA_TYPE`) for the current row - `rowInfo` - the row info object that underlies the row - `column` - the current column on which editing is invoked - `api` - a reference to the [InfiniteTable API](https://infinite-table.com/docs/reference/api/index.md) - `dataSourceApi` - - a reference to the [DataSource API](https://infinite-table.com/docs/reference/datasource-api/index.md) The function can return a boolean value or a Promise that resolves to a boolean value - this means you can asynchronously decide whether the cell is editable or not. Making [column.defaultEditable](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.defaultEditable) a function gives you the ability to granularly control which cells are editable or not (even within the same column, based on the cell value or other values you have access to). In addition to the flags mentioned above, you can use the [`editable`](https://infinite-table.com/docs/reference/infinite-table-props.md#editable) prop on the `InfiniteTable` component. This overrides all other properties and when it is defined, is the only source of truth for whether something is editable or not. The [`editable`](https://infinite-table.com/docs/reference/infinite-table-props.md#editable) prop allows you to centralize editing logic in one place. It has the same signature as the [column.defaultEditable](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.defaultEditable) function. ## Start Editing Editing can be started either by user interaction or programmatically via the [API](https://infinite-table.com/docs/reference/api/index.md). The user can start editing by double-clicking on a cell or by pressing the `Enter` key while the cell is active (see [Keyboard Navigation for Cells](docs/learn/keyboard-navigation/navigating-cells)). To start editing programmatically, use the [{`startEdit({ columnId, rowIndex })`}](https://infinite-table.com/docs/reference/api/index.md#startEdit) method. **Example: Starting an Edit via the API** ```ts import { InfiniteTable, DataSource, InfiniteTablePropColumns, InfiniteTableApi, } from '@infinite-table/infinite-react'; import { useCallback, useRef, useState } from 'react'; type Developer = { id: number; firstName: string; currency: string; stack: string; hobby: string; salary: string; }; const dataSource: Developer[] = [ { id: 1, firstName: 'John', currency: 'USD', stack: 'frontend', hobby: 'gaming', salary: 'USD 1000', }, { id: 2, firstName: 'Jane', currency: 'EUR', stack: 'backend', hobby: 'reading', salary: 'EUR 2000', }, { id: 3, firstName: 'Jack', currency: 'GBP', stack: 'frontend', hobby: 'gaming', salary: 'GBP 3000', }, { id: 4, firstName: 'Jill', currency: 'USD', stack: 'backend', hobby: 'reading', salary: 'USD 4000', }, ]; const columns: InfiniteTablePropColumns = { id: { field: 'id', defaultWidth: 80, defaultEditable: false }, salary: { defaultWidth: 320, field: 'salary', header: 'Salary - edit accepts numbers only', style: { color: 'tomato' }, getValueToEdit: ({ value }) => { return parseInt(value.substr(4), 10); }, getValueToPersist: ({ value, data }) => { return `${data!.currency} ${parseInt(value, 10)}`; }, shouldAcceptEdit: ({ value }) => { return parseInt(value, 10) == value; }, }, firstName: { field: 'firstName', header: 'Name', }, currency: { field: 'currency', header: 'Currency', }, }; export default function InlineEditingExample() { const [activeRowIndex, setActiveRowIndex] = useState(2); const apiRef = useRef | null>(null); const onReady = useCallback( ({ api }: { api: InfiniteTableApi }) => { apiRef.current = api; }, [], ); return ( <> primaryKey="id" data={dataSource}> debugId="api-inline-editing-custom-edit-value-example" onReady={onReady} columns={columns} columnDefaultEditable activeRowIndex={activeRowIndex} onActiveRowIndexChange={setActiveRowIndex} /> ); } ``` Either way, be it user interaction or API call, those actions will trigger checks to see if the cell is editable - taking into account the [`columnDefaultEditable`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnDefaultEditable), [column.defaultEditable](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.defaultEditable) or [`editable`](https://infinite-table.com/docs/reference/infinite-table-props.md#editable) props, as described in the paragraphs above. Only if the result is `true` will the cell editor be displayed. ## Customize Edit Value When Editing Starts When editing starts, the column editor is displayed with the value that was in the cell. This (initial) edit value can be customized via the [column.getValueToEdit](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.getValueToEdit) prop. This allows you to start editing with a different value than the one that is displayed in the cell - and even with a value fetched asynchronously. ```tsx const columns = { salary: { field: 'salary', // this can return a Promise getValueToEdit: ({ value, data, rowInfo, column }) => { // suppose the value is a string like '$1000' // but we want to start editing with the number 1000 return value.replace('$', ''); }, }, }; ``` **Example: Inline Editing with custom getter for edit value** Try editing the salary column - it has a custom getter for the edit value, which removes the curency string. ```ts import { InfiniteTable, DataSource, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; currency: string; stack: string; hobby: string; salary: string; }; const dataSource: Developer[] = [ { id: 1, firstName: 'John', currency: 'USD', stack: 'frontend', hobby: 'gaming', salary: 'USD 1000', }, { id: 2, firstName: 'Jane', currency: 'EUR', stack: 'backend', hobby: 'reading', salary: 'EUR 2000', }, { id: 3, firstName: 'Jack', currency: 'GBP', stack: 'frontend', hobby: 'gaming', salary: 'GBP 3000', }, { id: 4, firstName: 'Jill', currency: 'USD', stack: 'backend', hobby: 'reading', salary: 'USD 4000', }, ]; const columns: InfiniteTablePropColumns = { id: { field: 'id', defaultWidth: 80, defaultEditable: false }, salary: { defaultWidth: 320, field: 'salary', header: 'Salary - edit accepts numbers only', style: { color: 'tomato' }, getValueToEdit: ({ value }) => { return parseInt(value.substr(4), 10); }, getValueToPersist: ({ value, data }) => { return `${data!.currency} ${parseInt(value, 10)}`; }, shouldAcceptEdit: ({ value }) => { return parseInt(value, 10) == value; }, }, firstName: { field: 'firstName', header: 'Name', }, currency: { field: 'currency', header: 'Currency', }, }; export default function InlineEditingExample() { return ( <> primaryKey="id" data={dataSource}> debugId="inline-editing-custom-edit-value-example" columns={columns} columnDefaultEditable /> ); } ``` ## Finishing an Edit An edit is generally finished by user interaction - either the user confirms the edit by pressing the `Enter` key or cancels it by pressing the `Escape` key. As soon as the edit is confirmed by the user, the `InfiniteTable` needs to decide whether the edit should be accepted or not. In order to decide (either synchronously or asynchronously) whether an edit should be accepted or not, you can use the global [`shouldAcceptEdit`](https://infinite-table.com/docs/reference/infinite-table-props.md#shouldAcceptEdit) prop or the column-level [column.shouldAcceptEdit](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.shouldAcceptEdit) alternative. When neither the global [`shouldAcceptEdit`](https://infinite-table.com/docs/reference/infinite-table-props.md#shouldAcceptEdit) nor the column-level [column.shouldAcceptEdit](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.shouldAcceptEdit) are defined, all edits are accepted by default. Once an edit is accepted, the [`onEditAccepted`](https://infinite-table.com/docs/reference/infinite-table-props.md#onEditAccepted) callback prop is called, if defined. When an edit is rejected, the [`onEditRejected`](https://infinite-table.com/docs/reference/infinite-table-props.md#onEditRejected) callback prop is called instead. The accept/reject status of an edit is decided by using the `shouldAcceptEdit` props described above. However an edit can also be cancelled by the user pressing the `Escape` key in the cell editor - to be notified of this, use the [`onEditCancelled`](https://infinite-table.com/docs/reference/infinite-table-props.md#onEditCancelled) callback prop. **Example: Using shouldAcceptEdit to decide whether a value is acceptable or not** In this example, the `salary` column is configured with a [shouldAcceptEdit](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.shouldAcceptEdit) function property that rejects non-numeric values. ```ts import { InfiniteTable, DataSource, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; currency: string; stack: string; hobby: string; salary: string; }; const dataSource: Developer[] = [ { id: 1, firstName: 'John', currency: 'USD', stack: 'frontend', hobby: 'gaming', salary: 'USD 1000', }, { id: 2, firstName: 'Jane', currency: 'EUR', stack: 'backend', hobby: 'reading', salary: 'EUR 2000', }, { id: 3, firstName: 'Jack', currency: 'GBP', stack: 'frontend', hobby: 'gaming', salary: 'GBP 3000', }, { id: 4, firstName: 'Jill', currency: 'USD', stack: 'backend', hobby: 'reading', salary: 'USD 4000', }, ]; const columns: InfiniteTablePropColumns = { id: { field: 'id', defaultWidth: 80, defaultEditable: false }, salary: { defaultWidth: 320, field: 'salary', header: 'Salary - edit accepts numbers only', style: { color: 'tomato' }, getValueToEdit: ({ value }) => { return parseInt(value.substr(4), 10); }, getValueToPersist: ({ value, data }) => { return `${data!.currency} ${parseInt(value, 10)}`; }, shouldAcceptEdit: ({ value }) => { return parseInt(value, 10) == value; }, }, firstName: { field: 'firstName', header: 'Name', }, currency: { field: 'currency', header: 'Currency', }, }; export default function InlineEditingExample() { return ( <> primaryKey="id" data={dataSource}> debugId="inline-editing-custom-edit-value-example" columns={columns} columnDefaultEditable /> ); } ``` ## Persisting an Edit By default, accepted edits are persisted to the `DataSource` via the [DataSourceAPI.updateData](https://infinite-table.com/docs/reference/datasource-api/index.md#updateData) method. To change how you persist values (which might include persisting to remote locations), use the [`persistEdit`](https://infinite-table.com/docs/reference/infinite-table-props.md#persistEdit) function prop on the `InfiniteTable` component. The [`persistEdit`](https://infinite-table.com/docs/reference/infinite-table-props.md#persistEdit) function prop can return a `Promise` for async persistence. To signal that the persisting failed, reject the promise or resolve it with an `Error` object. After persisting the edit, if all went well, the [`onEditPersistSuccess`](https://infinite-table.com/docs/reference/infinite-table-props.md#onEditPersistSuccess) callback prop is called. If the persisting failed (was rejected), the [`onEditPersistError`](https://infinite-table.com/docs/reference/infinite-table-props.md#onEditPersistError) callback prop is called instead. --- # Changing the Data Source Canonical page: https://infinite-table.com/docs/learn/examples/change-datasource This example show how you can change the data source and the columns of the DataGrid. Find out more about how to work with data - both client-side and server-side. See our page on using and configuring columns. It shows you how to use and customize columns to your needs. **Example** In this demo you can toggle between 2 data sources and 2 sets of columns. ```tsx import { InfiniteTable, DataSource, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; import { useMemo, useState } from 'react'; export type Employee = { id: number; companyName: string; companySize: string; firstName: string; lastName: string; country: string; countryCode: string; city: string; streetName: string; streetPrefix: string; streetNo: string; department: string; team: string; salary: number; currency: number; age: number; email: string; }; 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; }; export const employeeColumns: InfiniteTablePropColumns = { firstName: { field: 'firstName', header: 'First Name', }, country: { field: 'country', header: 'Country', columnGroup: 'location', }, city: { field: 'city', header: 'City', columnGroup: 'address', }, salary: { field: 'salary', type: 'number', header: 'Salary', }, department: { field: 'department', header: 'Department', }, team: { field: 'team', header: 'Team', }, company: { field: 'companyName', header: 'Company' }, companySize: { field: 'companySize', header: 'Company Size', }, streetName: { field: 'streetName' }, streetNo: { field: 'streetNo', type: 'number' }, currency: { field: 'currency', type: 'number', }, email: { field: 'email' }, }; const developerColumns: InfiniteTablePropColumns = { firstName: { field: 'firstName' }, preferredLanguage: { field: 'preferredLanguage' }, stack: { field: 'stack' }, 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', }, }, canDesign: { field: 'canDesign' }, salary: { field: 'salary', type: 'number', }, }; const getDataSourceFor = (name: 'employee' | 'developer', size: string) => { if (size === '0') { return () => Promise.resolve([]); } return () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/${name}s` + size) .then((r) => r.json()) .then((data: Employee[]) => data); }; }; export default function App() { const [dataSourceSize, setDataSourceSize] = useState('10k'); const [type, setType] = useState<'employee' | 'developer'>('employee'); const dataSource = useMemo(() => { return getDataSourceFor(type, dataSourceSize); }, [type, dataSourceSize]); return (

Please select datasource:

Please select the size of the datasource:

data={dataSource} primaryKey="id"> debugId="change-datasource-example" columns={type === 'developer' ? developerColumns : employeeColumns} columnDefaultWidth={150} />

); } ``` Infinite Table guarantees you that the user will NEVER see white space when scrolling horizontally or vertically. --- # Dynamic Pivoting Example Canonical page: https://infinite-table.com/docs/learn/examples/dynamic-pivoting-example This example showcases client-side grouping, pivoting and aggregation. These properties are changed dynamically at run-time via the UI. It also showcases different way of customizing columns based on dynamic conditions: - uses custom `number` and `currency` column types, to format values - has a custom border for rows that have `canDesign=yes` - the custom column type `number` has a background color based on the color input **Example** ```tsx files=["dynamic-advanced-pivoting-example.page.tsx","Settings.tsx","types.ts"] ``` ## Server-side Dynamic Pivoting Example This example is very similar with the above one, but pivoting, grouping and aggregation is done on the server-side. **Example** ```tsx files=["dynamic-pivoting-serverside-example.page.tsx","Settings.tsx","types.ts"] ``` --- # Live Updates Example Canonical page: https://infinite-table.com/docs/learn/examples/live-updates-example This example shows how you can update the grid data in real-time. Find out more about how to update data in real-time **Example** The DataSource has 10k items - use the **Start/Stop** button to see updates in real-time. In this example, we're updating 5 rows (in the visible viewport) every 30ms. The update rate could be much higher, but we're keeping it at current levels to make it easier to see the changes. ```tsx import * as React from 'react'; import '@infinite-table/infinite-react/index.css'; import { DataSourceApi, InfiniteTable, InfiniteTableApi, InfiniteTablePropColumns, DataSource, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; lastName: string; currency: string; salary: number; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; age: number; reposCount: number; }; const dataSource = () => { return fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/developers10k-sql`) .then((r) => r.json()) .then((data: Developer[]) => { return data; }); }; export function getRandomInt(min: number, max: number) { return Math.floor(Math.random() * (max - min + 1) + min); } const CURRENCIES = ['USD', 'CAD', 'EUR']; const stacks = ['frontend', 'backend', 'fullstack']; const updateRow = (api: DataSourceApi, data: Developer) => { const getDelta = (num: number): number => Math.ceil(0.2 * num); const initialData = data; if (!initialData) { return; } const salaryDelta = getDelta(initialData?.salary); const reposCountDelta = getDelta(initialData?.reposCount); const newSalary = initialData.salary + getRandomInt(-salaryDelta, salaryDelta); const newReposCount = initialData.reposCount + getRandomInt(-reposCountDelta, reposCountDelta); const newData: Partial = { id: initialData.id, salary: newSalary, reposCount: newReposCount, currency: CURRENCIES[getRandomInt(0, CURRENCIES.length - 1)] || CURRENCIES[0], stack: stacks[getRandomInt(0, stacks.length - 1)] || stacks[0], age: getRandomInt(0, 100), }; api.updateData(newData); }; const ROWS_TO_UPDATE_PER_FRAME = 5; const UPDATE_INTERVAL_MS = 30; const columns: InfiniteTablePropColumns = { firstName: { field: 'firstName', }, age: { field: 'age', type: 'number', style: ({ value, rowInfo }) => { if (rowInfo.isGroupRow) { return {}; } return { color: 'black', background: value > 80 ? 'tomato' : value > 60 ? 'orange' : value > 40 ? 'yellow' : value > 20 ? 'lightgreen' : 'green', }; }, }, salary: { field: 'salary', type: 'number', }, reposCount: { field: 'reposCount', type: 'number', }, stack: { field: 'stack', renderMenuIcon: false }, currency: { field: 'currency' }, }; const domProps = { style: { height: '100%', }, }; export default function App() { const [running, setRunning] = React.useState(false); const [apis, onReady] = React.useState<{ api: InfiniteTableApi; dataSourceApi: DataSourceApi; }>(); const intervalIdRef = React.useRef(null); React.useEffect(() => { const { current: intervalId } = intervalIdRef; if (!running || !apis) { return clearInterval(intervalId); } intervalIdRef.current = setInterval(() => { const { dataSourceApi, api } = apis!; const { renderStartIndex, renderEndIndex } = api.getVerticalRenderRange(); const dataArray = dataSourceApi.getRowInfoArray(); const data = dataArray .slice(renderStartIndex, renderEndIndex) .map((x) => x.data as Developer); for (let i = 0; i < ROWS_TO_UPDATE_PER_FRAME; i++) { const row = data[getRandomInt(0, data.length - 1)]; if (row) { updateRow(dataSourceApi, row); } } return () => { clearInterval(intervalIdRef.current); intervalIdRef.current = null; }; }, UPDATE_INTERVAL_MS); }, [running, apis]); return ( data={dataSource} primaryKey="id"> debugId="realtime-updates-example" domProps={domProps} onReady={onReady} columnDefaultWidth={130} columnMinWidth={50} columns={columns} /> ); } ``` --- # Performance with Many Rows and Columns Canonical page: https://infinite-table.com/docs/learn/examples/performance-many-rows-and-columns This example showcases a DataGrid with **10.000 rows** and **12 columns**. Find out more about how to work with data - both client-side and server-side. See our page on using and configuring columns. It shows you how to use and customize columns to your needs. **Example** DataGrid with 10k rows and 12 columns. Adding more columns will not affect performance, as the DataGrid uses virtualization for both rows and **columns**. ```tsx import { InfiniteTable, DataSource, InfiniteTableColumn, } from '@infinite-table/infinite-react'; import { useMemo, useState } from 'react'; export type Employee = { id: number; companyName: string; companySize: string; firstName: string; lastName: string; country: string; countryCode: string; city: string; streetName: string; streetPrefix: string; streetNo: string; department: string; team: string; salary: number; currency: number; age: number; email: string; }; export const columns: Record> = { firstName: { field: 'firstName', header: 'First Name', }, country: { field: 'country', header: 'Country', columnGroup: 'location', }, city: { field: 'city', header: 'City', columnGroup: 'address', }, salary: { field: 'salary', type: 'number', header: 'Salary', }, department: { field: 'department', header: 'Department', }, team: { field: 'team', header: 'Team', }, company: { field: 'companyName', header: 'Company' }, companySize: { field: 'companySize', header: 'Company Size', }, streetName: { field: 'streetName' }, streetNo: { field: 'streetNo' }, currency: { field: 'currency' }, email: { field: 'email' }, }; const getDataSourceFor = (size: string) => { if (size === '0') { return () => Promise.resolve([]); } return () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/employees' + size) .then((r) => r.json()) .then((data: Employee[]) => data); }; }; export default function App() { const [dataSourceSize, setDataSourceSize] = useState('10k'); const dataSource = useMemo(() => { return getDataSourceFor(dataSourceSize); }, [dataSourceSize]); return (

Please select the size of the datasource:

data={dataSource} primaryKey="id"> debugId="many-rows-and-columns-example" columns={columns} columnDefaultWidth={150} />

); } ``` Infinite Table guarantees you that the user will NEVER see white space when scrolling horizontally or vertically. --- # Sparklines Example Canonical page: https://infinite-table.com/docs/learn/examples/using-sparklines This example shows how to use integrate a sparkline component in a DataGrid column. For this demo, we're using the [`react-sparklines`](https://www.npmjs.com/package/react-sparklines) library. The most important part is the [`columns.renderValue`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderValue) property, which allows you to render a custom React component for the cell value. ```tsx {11-26} title="Using column.renderValue to render a sparkline" const columns = { // ... other columns id: { field: 'id', defaultWidth: 100, }, bugFixes: { field: 'bugFixes', header: 'Bug Fixes', defaultWidth: 300, renderValue: ({ value, data }) => { const color = data?.department === 'IT' || data?.department === 'Management' ? 'tomato' : '#253e56'; return ( ); }, }, } ``` **Example: Using a sparkline component** This demo renders a sparkline and changes the color of the sparkline based on the `department` field in the row (red for IT or Management, blue for everything else). ```tsx import { InfiniteTable, DataSource, InfiniteTableColumn, } from '@infinite-table/infinite-react'; import { Sparklines, SparklinesLine } from 'react-sparklines'; export type Employee = { id: number; companyName: string; companySize: string; firstName: string; lastName: string; country: string; countryCode: string; city: string; bugFixes: number[]; streetName: string; streetPrefix: string; streetNo: string; department: string; team: string; salary: number; currency: number; age: number; email: string; }; export const columns: Record> = { firstName: { field: 'firstName', header: 'First Name', }, country: { field: 'country', header: 'Country', columnGroup: 'location', }, bugFixes: { field: 'bugFixes', header: 'Bug Fixes', defaultWidth: 300, renderValue: ({ value, data }) => { const color = data?.department === 'IT' || data?.department === 'Management' ? 'tomato' : '#253e56'; return ( ); }, }, city: { field: 'city', header: 'City', columnGroup: 'address', }, salary: { field: 'salary', type: 'number', header: 'Salary', }, department: { field: 'department', header: 'Department', }, team: { field: 'team', header: 'Team', }, }; const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/employees10k') .then((r) => r.json()) .then((data: Employee[]) => { return data.map((employee) => { return { ...employee, bugFixes: [...Array(10)].map(() => Math.round(Math.random() * 100)), }; }); }); }; export default function App() { return ( data={dataSource} primaryKey="id"> debugId="using-sparklines-example" columns={columns} columnDefaultWidth={150} /> ); } ``` --- # Filtering > Learn how to configure client-side and server-side filtering in Infinite Table for React Canonical page: https://infinite-table.com/docs/learn/filtering/ Filtering allows you to limit the rows available in the table. Both client-side and server-side filtering are available in Infinite Table - but the way the are configured is pretty similar, so this page documents the common parts, while pointing to the respective pages for the differences. ## Configuring Filters for Columns The most common way to use filtering in Infinite Table is by configuring filters for columns (this works both for client-side and server-side filtering). You specify an uncontrolled [`defaultFilterValue`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultFilterValue) on the `` component (or the controlled version, [`filterValue`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterValue)) and the specified value will be used as the initial filter. Based on the [column type](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.type), the correct filter editor is displayed in the column header, along with the correct operator icon. In the UI, you can change the operator being used for the filter. ```tsx title="Specifying an initial filter value for the DataSource" data={...} defaultFilterValue={[ { field: 'age', filter: { operator: 'gt', value: 30, type: 'number' } } ]} > columns={...} /> ``` If you don't need to specify some initial filters, but want the column filter bar to be visible, you need to specify `defaultFilterValue = []` (or the controlled `filterValue = []`). Specifying any of those props will make the column filter bar visible. Whenever filters change, [`onFilterChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onFilterChange) will be called with the new filter value - note however, it might not be called immediately, due to the [`filterDelay`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterDelay) prop. The above snippet will show a `number` filter for the `age` column. There are two filter types available at this stage in Infinite Table: - `string` - with the following operators available: `contains`, `eq`, `startsWith` and `endsWith` - `number` - with the following operators available: `eq`,`neq`, `gt`, `gte`, `lt` and `lte` ## Defining Filterable Columns By default, all columns are filterable. If you want to make columns by default not filterable, use the [`columnDefaultFilterable`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnDefaultFilterable) prop and set it to `false`. You can specifically configure each column by using the [defaultFilterable](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.defaultFilterable) property - this overrides the global [`columnDefaultFilterable`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnDefaultFilterable) prop. ## Defining a Filter Type for a Column Besides being filterable, a column can decide what type of filter it will display. Use the [`columns.type`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.type) property to specify the type of filter the column will use. Using the `type` property also configures the data type of the column, which in turn determines the sort type. If the type of filter you want to show does not match the column [type](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.type), you can specify the filter with the [column.filterType](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.filterType) property. Only use this when the type of the data differs from the type of the filter (eg: you have a numeric column, with a custom filter type). ## Understanding Filter Types A filter type is a concept that defines how a certain type of data is to be filtered. A filter type will have - a `key` - the key used to define the filter in the [`filterTypes`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterTypes) object - a `label`, - an array of values considered to be empty values - when any of these values is used in the filter, the filter will not be applied. - an array of `operators` - a default operator. Let's imagine you have a `DataSource` with developers, each with a `salary` column, and for that column you want to allow `>`, `>=`, `<` and `<=` comparisons (operators). For this, you would define the following filter type: ```tsx const filterTypes = { income: { label: 'Income', emptyValues: ['', null, undefined], defaultOperator: 'gt', operators: [ { name: 'gt', label: 'Greater than', fn: ({ currentValue, filterValue, emptyValues }) => { if (emptyValues.has(currentValue)) { return true; } return currentValue > filterValue; }, }, { name: 'gte', //... }, { name: 'lt', //... }, { name: 'lte', //... }, ], }, }; ``` Each operator for a certain filter type needs to at least have a `name` and `fn` defined. The `fn` property is a function that will be called when client-side filtering is enabled, with an object that has the following properties: - `currentValue` - the cell value of the current row for the column being filtered - `filterValue` - the value of the filter editor - `emptyValues` - the array of values considered to be empty values for the filter type - `data` - the current row data object - `typeof DATA_TYPE` - `index` - the index of the current row in the table - `number` - `dataArray` - the array of all rows originally in the table - `typeof DATA_TYPE[]` - `field?` - the field the current column is bound to (can be undefined if the column is not bound to a field) **Example: Client-side filtering in action with custom filter type** The `salary` column has a custom filter type, with the following operators: `gt`, `gte`, `lt` and `lte`. ```ts import * as React from 'react'; import { DataSourceData, DataSource, InfiniteTable, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; lastName: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; salary: number; }; const data: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', type: 'number', defaultWidth: 100, }, salary: { defaultFilterable: true, field: 'salary', type: 'number', filterType: 'salary', }, firstName: { field: 'firstName', }, stack: { field: 'stack' }, currency: { field: 'currency', defaultFilterable: false }, }; function getIcon(icon: string) { return () => (

{icon}

); } const domProps = { style: { height: '100%', }, }; export default () => { return ( <> data={data} primaryKey="id" defaultFilterValue={[]} filterDelay={0} filterMode="local" filterTypes={{ salary: { defaultOperator: 'gt', emptyValues: ['', null, undefined], operators: [ { name: 'gt', label: 'Greater Than', components: { Icon: getIcon('>'), }, fn: ({ currentValue, filterValue }) => { return currentValue > filterValue; }, }, { name: 'gte', components: { Icon: getIcon('>='), }, label: 'Greater Than or Equal', fn: ({ currentValue, filterValue }) => { return currentValue >= filterValue; }, }, { name: 'lt', components: { Icon: getIcon('<'), }, label: 'Less Than', fn: ({ currentValue, filterValue }) => { return currentValue < filterValue; }, }, { name: 'lte', components: { Icon: getIcon('<='), }, label: 'Less Than or Equal', fn: ({ currentValue, filterValue }) => { return currentValue <= filterValue; }, }, ], }, }} > debugId="filter-custom-filter-type-example" domProps={domProps} columnDefaultWidth={150} columnMinWidth={50} columns={columns} /> ); }; ``` ## Specifying the filter mode As already mentioned, filtering can happen either client-side or server-side. If the DataSource [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) property is a function (and not an array or a `Promise`), then the filtering will happen server-side by default. However, you can explicitly specify where the filtering should happen by setting the [`filterMode`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterMode) property on the `` component - possible values are - `filterMode="local"` - filtering will happen client-side - `filterMode="remote"` - filtering will happen remotely and the [`filterValue`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterValue) will be passed as a property to the parameter object sent to the [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) function. Explicitly specify [`filterMode`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterMode) as either `"local"` or `"remote"` if you want to change the default behavior. ## Filtering Columns Not Bound to a Field If a column is not bound to a `field`, it can still be used for filtering, even client-side filtering, if it is configured with a [`columns.valueGetter`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.valueGetter). If you don't need a default filter value, the [`filterValue`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterValue) that's set when the user interacts with the column filter will use the column [valueGetter](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.valueGetter) to filter values. If however, you need initial filtering by that column, the [`filterValue`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterValue) needs to specify a `valueGetter` itself. ```tsx defaultFilterValue={[ { id: 'salary', valueGetter: ({ data }) => data.salary, filter: { operator: 'gt', value: '', type: 'number', } }, ]} ``` **Example: Filtering a column not bound to a field** The `salary` column is not bound to a `field` - however, it can still be used for filtering, as it's configured with a `valueGetter`. ```ts import * as React from 'react'; import { DataSourceData, InfiniteTable, InfiniteTablePropColumns, DataSource, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; lastName: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; salary: number; }; const data: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', type: 'number', defaultWidth: 70, defaultFilterable: false, }, salary: { // we're intentionally using not binding this column to a `field` type: 'number', header: 'Salary', valueGetter: ({ data }) => data.salary, }, firstName: { field: 'firstName', }, stack: { field: 'stack' }, currency: { field: 'currency' }, }; const domProps = { style: { height: '100%', }, }; export default () => { return ( <> data={data} primaryKey="id" defaultFilterValue={[ // if you want the salary column to be filtered by default // you need to pass a valueGetter to the filter value // if you don't need a default filter, when you start filtering by // the column, the filter value will use the valueGetter of the column { id: 'salary', valueGetter: ({ data }) => data.salary, filter: { operator: 'gt', value: '', type: 'number', }, }, ]} filterDelay={0} filterMode="local" > debugId="filter-column-with-id-example" domProps={domProps} columnDefaultWidth={150} columnMinWidth={50} columns={columns} /> ); }; ``` ## Customizing the Filter Icon for Columns Columns can customize the filter icon by using the [`columns.renderFilterIcon`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderFilterIcon) property. **Example: Custom filter icons for salary and name columns** The `salary` column will show a bolded label when filtered. The `firstName` column will show a custom filter icon when filtered. ```ts import * as React from 'react'; import { DataSourceData, InfiniteTable, InfiniteTablePropColumns, DataSource, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; lastName: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; salary: number; }; const data: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', type: 'number', defaultWidth: 100, }, salary: { field: 'salary', type: 'number', header: ({ filtered }) => { return filtered ? Salary : 'Salary'; }, renderFilterIcon: () => { return null; }, }, firstName: { field: 'firstName', renderFilterIcon: ({ filtered }) => { return filtered ? '🔥' : ''; }, }, stack: { field: 'stack' }, currency: { field: 'currency' }, }; const domProps = { style: { height: '100%', }, }; export default () => { return ( <> data={data} primaryKey="id" defaultFilterValue={[]} filterDelay={0} filterMode="local" > debugId="column-filter-icon-example" domProps={domProps} columnDefaultWidth={150} columnMinWidth={50} columns={columns} /> ); }; ``` Learn how to use filtering in the browser. Figure out how to use filtering with server-side integration. --- # Extending existing filters > Learn how to extend existing filters and filter types for your Infinite Table React DataGrid Canonical page: https://infinite-table.com/docs/learn/filtering/extending-existing-filters By default `InfiniteTable` has the following default filter types: - `string` - `number` and each of them has a collection of operators that are supported - see [`filterTypes`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterTypes) for the respective list of supported operators. You may find those operators limiting - but it's easy to extend them and add new operators or even new filter types. ## Adding new operators to existing filter types You can import `defaultFilterTypes` from the root of the package. ```ts title="Adding a new operator to the string filter type" import { defaultFilterTypes } from '@infinite-table/infinite-react'; // add new operators for the `string` filter type defaultFilterTypes.string.operators.push({ name: 'notContains', component: { Icon: ReactComponentForIcon } label: 'Not Contains', fn: ({currentValue, filterValue }) => { return typeof currentValue === 'string' && typeof filterValue == 'string' && !currentValue.toLowerCase().includes(filterValue.toLowerCase()) } }) ``` When you import the named `defaultFilterTypes` value and extend it, that will affect all `InfiniteTable` components in your application. If you don't want that, you need to use the `filterTypes` prop of the `` component. Either build an entirely new object for `filterTypes`, or start by cloning `defaultFilterTypes` and extend it. **Example: Enhanced string filter type - new 'Not includes' operator** The `string` columns have a new `Not includes` operator. ```ts import * as React from 'react'; import { DataSourceData, InfiniteTable, InfiniteTablePropColumns, DataSource, defaultFilterTypes, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; lastName: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; salary: number; }; defaultFilterTypes.string.operators.push({ name: 'Not contains', label: 'Not Contains', fn: ({ currentValue, filterValue, emptyValues }) => { if ( emptyValues.includes(currentValue) || emptyValues.includes(filterValue) ) { return true; } return ( typeof currentValue === 'string' && typeof filterValue == 'string' && !currentValue.toLowerCase().includes(filterValue.toLowerCase()) ); }, }); const data: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', type: 'number', defaultWidth: 100, }, firstName: { field: 'firstName', }, stack: { field: 'stack' }, salary: { field: 'salary', type: 'number', }, currency: { field: 'currency', defaultFilterable: false }, }; const domProps = { style: { height: '100%', }, }; export default () => { return ( <> data={data} primaryKey="id" defaultFilterValue={[]} filterDelay={0} filterMode="local" > debugId="customised-default-filter-types-example" domProps={domProps} columnDefaultWidth={150} columnMinWidth={50} columns={columns} /> ); }; ``` ## Adding new filter types If the existing filter types are not enough, it's easy to add new ones. As already mentioned, you can either update the value of `defaultFilterTypes` or use the `filterTypes` prop of the `` component. Updating the value `defaultFilterTypes` will affect all your `InfiniteTable` DataGrid components. ```ts title="Adding a new filter type by updating defaultFilterTypes" import { defaultFilterTypes } from '@infinite-table/infinite-react'; defaultFilterTypes.bool = { defaultOperator: 'eq', emptyValues: [null], operators: [ { name: 'eq', label: 'Equals', fn: ({ currentValue, filterValue }) => currentValue === filterValue, }, ], }; ``` ```ts title="Adding a new filter type by using the filterTypes prop" import { DataSource } from '@infinite-table/infinite-react'; currentValue === filterValue, }, ], }, }} />; ``` When passing `filterTypes` to the `` component, the object will be merged with the `defaultFilterTypes`. As a result, the existing `string` and `number` filterTypes will be preserved, unless explicitly overridden. **Example: Writing a `bool` filter type with a custom filter editor** The `canDesign` column is using a custom `bool` filter type with a custom filter editor. ```ts import * as React from 'react'; import { InfiniteTable, InfiniteTablePropColumns, DataSource, components, useInfiniteColumnFilterEditor, } from '@infinite-table/infinite-react'; const { CheckBox } = components; type Developer = { id: number; firstName: string; canDesign: boolean; stack: string; hobby: string; }; const dataSource: Developer[] = [ { id: 1, firstName: 'John', canDesign: true, stack: 'frontend', hobby: 'gaming', }, { id: 2, firstName: 'Jane', canDesign: false, stack: 'backend', hobby: 'reading', }, { id: 3, firstName: 'Jack', canDesign: true, stack: 'frontend', hobby: 'gaming', }, { id: 4, firstName: 'Jill', canDesign: false, stack: 'backend', hobby: 'reading', }, { id: 5, firstName: 'Seb', canDesign: false, stack: 'backend', hobby: 'reading', }, ]; const columns: InfiniteTablePropColumns = { id: { field: 'id', type: 'number', defaultWidth: 100, }, canDesign: { field: 'canDesign', filterType: 'bool', renderValue: ({ value }) => (value ? 'Yes' : 'No'), }, firstName: { field: 'firstName', }, stack: { field: 'stack' }, }; const domProps = { style: { height: '100%', }, }; function BoolFilterEditor() { const { value, setValue, className } = useInfiniteColumnFilterEditor(); return (

{ if (value === true) { // after the value was true, make it go to indeterminate state newValue = null; } if (value === null) { // from indeterminate, goto false newValue = false; } setValue(newValue); }} />

); } export default () => { return ( <> data={dataSource} primaryKey="id" defaultFilterValue={[]} filterDelay={0} filterTypes={{ bool: { defaultOperator: 'eq', emptyValues: [null], components: { FilterEditor: BoolFilterEditor, FilterOperatorSwitch: () => null, }, operators: [ { name: 'eq', label: 'Equals', fn: ({ currentValue, filterValue }) => currentValue === filterValue, }, ], }, }} > debugId="checkbox-filter-editor-example" domProps={domProps} columnDefaultWidth={150} columnMinWidth={50} columns={columns} /> ); }; ``` --- # Client-side Filtering > Learn how to configure client-side filtering for your Infinite Table React DataGrid Canonical page: https://infinite-table.com/docs/learn/filtering/filtering-client-side The most common way to use filtering in Infinite Table is by configuring filters for columns (this works both for client-side and server-side filtering). If the DataSource [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) property is a function (and not an array or a `Promise`), then the filtering will happen server-side by default. To force client-side filtering, you can explicitly set the [filterMode="local"](https://infinite-table.com/docs/reference/datasource-props/index.md#filterMode) property on the `` component. The possible values for this prop are: - `filterMode="local"` - filtering will happen client-side - `filterMode="remote"` - filtering will happen remotely and the [`filterValue`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterValue) will be passed as a property to the parameter object sent to the [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) function. ## Showing the Column Filters In order to show the column filter editors in the column headers, you need to specify either the uncontrolled [`defaultFilterValue`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultFilterValue) property or the controlled [`filterValue`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterValue) version. **Example: Client-side filtering in action** This example shows remote data with local filtering - it sets `filterMode="local"` on the `` component. In addition, the `filterDelay` property is set to `0` for instant feedback. ```ts import * as React from 'react'; import { DataSourceData, InfiniteTable, InfiniteTablePropColumns, DataSource, defaultFilterTypes, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; lastName: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; salary: number; }; defaultFilterTypes.string.operators.push({ name: 'Not includes', label: 'Not Includes', fn: ({ currentValue, filterValue, emptyValues }) => { if ( emptyValues.includes(currentValue) || emptyValues.includes(filterValue) ) { return true; } return ( typeof currentValue === 'string' && typeof filterValue == 'string' && !currentValue.toLowerCase().includes(filterValue.toLowerCase()) ); }, }); const data: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', type: 'number', defaultWidth: 70, defaultFilterable: false, }, salary: { field: 'salary', type: 'number', }, firstName: { field: 'firstName', }, stack: { field: 'stack' }, currency: { field: 'currency' }, }; const domProps = { style: { height: '100%', }, }; export default () => { return ( <> data={data} primaryKey="id" defaultFilterValue={[]} filterDelay={0} filterMode="local" > debugId="basic-local-filter-example" domProps={domProps} columnDefaultWidth={150} columnMinWidth={50} columns={columns} /> ); }; ``` If you still want filtering to be enabled with the default functionality of using the [`filterValue`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterValue) (or uncontrolled [`defaultFilterValue`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultFilterValue)), but want to hide the column filter editors, you can set the [showColumnFilters](https://infinite-table.com/docs/reference/datasource-props/index.md#showColumnFilters) property to `false`. ## Using Filter Types As already documented in the [Understanding Filter Types](./#understanding-filter-types) section, you can specify the types of the filters the `` will support, by using the [`filterTypes`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterTypes) property. The default filter types are `string` and `number` - read the next section to see how you can add new operators to those filter types. A filter type is basically a collection of operators available for a type of data. Each operator needs a name and a function that will be used to filter the data, when that operator is applied. ```tsx {5,14} title="Using_filter_types_for_filterValue" filterValue={[ { field: 'firstName', filter: { type: 'string', operator: 'includes', value: 'John' } }, { field: 'age', filter: { type: 'number', operator: 'gt', value: 30 } } ]} ``` The above filter value specifies that there are 2 filters applied: - the `firstName` column applies a filter that will only match rows with `firstName` containining the string `John` - the `age` column has an additional filter, that will only match rows with `age` greater than `30` If [`filterMode`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterMode) is set to `local`, then the filtering will happen client-side, using the filtering functions specified by `includes` operator in the `string` filter type and the `gt` operator in the `number` filter type. Here's a snippet of code from the `string` filter type showing the `includes` operator: ```tsx operators: [ { name: 'includes', components: { Icon: /* a React Component */ }, label: 'Includes', fn: ({ currentValue, filterValue }) => { return ( typeof currentValue === 'string' && typeof filterValue == 'string' && currentValue.toLowerCase().includes(filterValue.toLowerCase()) ); }, }, //... ] ``` Let's now look at another example, of implementing a custom `salary` filter type. For this, we override the `filterTypes` property of the `` component: ```tsx const filterTypes = { salary: { defaultOperator: 'gt', emptyValues: ['', null, undefined], operators: [ /*...*/ ] } } filterTypes={filterTypes} /> ``` When you specify new [`filterTypes`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterTypes), the default filter types of `string` and `number` are still available - unless the new object contains those keys and overrides them explicitly. **Example: Client-side filtering in action with custom filter type** The `salary` column has a custom filter type, with the following operators: `gt`, `gte`, `lt` and `lte`. ```ts import * as React from 'react'; import { DataSourceData, DataSource, InfiniteTable, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; lastName: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; salary: number; }; const data: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', type: 'number', defaultWidth: 100, }, salary: { defaultFilterable: true, field: 'salary', type: 'number', filterType: 'salary', }, firstName: { field: 'firstName', }, stack: { field: 'stack' }, currency: { field: 'currency', defaultFilterable: false }, }; function getIcon(icon: string) { return () => (

{icon}

); } const domProps = { style: { height: '100%', }, }; export default () => { return ( <> data={data} primaryKey="id" defaultFilterValue={[]} filterDelay={0} filterMode="local" filterTypes={{ salary: { defaultOperator: 'gt', emptyValues: ['', null, undefined], operators: [ { name: 'gt', label: 'Greater Than', components: { Icon: getIcon('>'), }, fn: ({ currentValue, filterValue }) => { return currentValue > filterValue; }, }, { name: 'gte', components: { Icon: getIcon('>='), }, label: 'Greater Than or Equal', fn: ({ currentValue, filterValue }) => { return currentValue >= filterValue; }, }, { name: 'lt', components: { Icon: getIcon('<'), }, label: 'Less Than', fn: ({ currentValue, filterValue }) => { return currentValue < filterValue; }, }, { name: 'lte', components: { Icon: getIcon('<='), }, label: 'Less Than or Equal', fn: ({ currentValue, filterValue }) => { return currentValue <= filterValue; }, }, ], }, }} > debugId="filter-custom-filter-type-example" domProps={domProps} columnDefaultWidth={150} columnMinWidth={50} columns={columns} /> ); }; ``` ### Customizing Default Filter Types By default, the `string` and `number` filter types are available. You can import the default filter types like this: ```ts import { defaultFilterTypes } from '@infinite-table/infinite-react'; ``` If you want to make all your instances of `InfiniteTable` have new operators for those filter types, you can simply mutate the exported `defaultFilterTypes` object. **Example: Enhanced string filter type - new 'Not includes' operator** The `string` columns have a new `Not includes` operator. ```ts import * as React from 'react'; import { DataSourceData, InfiniteTable, InfiniteTablePropColumns, DataSource, defaultFilterTypes, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; lastName: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; salary: number; }; defaultFilterTypes.string.operators.push({ name: 'Not contains', label: 'Not Contains', fn: ({ currentValue, filterValue, emptyValues }) => { if ( emptyValues.includes(currentValue) || emptyValues.includes(filterValue) ) { return true; } return ( typeof currentValue === 'string' && typeof filterValue == 'string' && !currentValue.toLowerCase().includes(filterValue.toLowerCase()) ); }, }); const data: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', type: 'number', defaultWidth: 100, }, firstName: { field: 'firstName', }, stack: { field: 'stack' }, salary: { field: 'salary', type: 'number', }, currency: { field: 'currency', defaultFilterable: false }, }; const domProps = { style: { height: '100%', }, }; export default () => { return ( <> data={data} primaryKey="id" defaultFilterValue={[]} filterDelay={0} filterMode="local" > debugId="customised-default-filter-types-example" domProps={domProps} columnDefaultWidth={150} columnMinWidth={50} columns={columns} /> ); }; ``` When you specify new [`filterTypes`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterTypes), the default filter types of `string` and `number` are still available - unless the new object contains those keys and override them explicitly. ## Using a Filter Delay In order to save some resources, filtering is batched by default. This is controlled by the [`filterDelay`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterDelay) prop, which, if not specified, defaults to `200` milliseconds. This means, any changes to the column filters, that happen inside a 200ms window (or the current value of [`filterDelay`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterDelay)), will be debounced and only the last value will be used to trigger a filter. If you want to prevent debouncing/batching filter values, you can set [`filterDelay`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterDelay) to `0`. API calls to [`setColumnFilter`](https://infinite-table.com/docs/reference/api/index.md#setColumnFilter) or [`clearColumnFilter`](https://infinite-table.com/docs/reference/api/index.md#clearColumnFilter) are not batched. ## Using a Filter Function Instead of the Column Filters For client-side rendering, it's possible that instead of showing a column filter bar, you use a custom [`filterFunction`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterFunction) to filter the data. In this case, the filtering will happen client-side ... of course 🤦‍♂️. **Example: Custom filterFunction example** Loads data from remote location but will only show rows that have `id > 100`. ```ts import * as React from 'react'; import { DataSourceData, DataSource, InfiniteTable, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; lastName: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; salary: number; }; const data: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', type: 'number', defaultWidth: 100, }, salary: { defaultFilterable: true, field: 'salary', type: 'number', filterType: 'salary', }, firstName: { field: 'firstName', }, stack: { field: 'stack' }, currency: { field: 'currency', defaultFilterable: false }, }; const domProps = { style: { height: '100%', }, }; export default () => { return ( <> data={data} primaryKey="id" filterFunction={({ data }) => { return data.id > 100; }} > debugId="filter-function-example" domProps={domProps} columnDefaultWidth={150} columnMinWidth={50} columns={columns} /> ); }; ``` --- # Server-side Filtering > Learn how to integrate server-side filtering with your InfiniteTable React DataGrid Canonical page: https://infinite-table.com/docs/learn/filtering/filtering-server-side If you're using a remote [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) prop (a function that returns a `Promise`) on the `` component, the filtering will happen server-side by default. You can explicitly configure server-side filtering by using [filterMode="remote"](https://infinite-table.com/docs/reference/datasource-props/index.md#filterMode). When remote filtering is enabled, the [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) function prop will be called with an object argument that includes the `filterValue` property, so the filters can be sent to the server for performing the correct filtering operations. Obviously the filtering can be combined with sorting, grouping, etc. It's up to the [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) function prop to send the correct parameters to the server for remote operations. The returned JSON can include both - a `totalCount` property (`number`) and - a `totalCountUnfiltered` property (also `number`) - to inform the `` of the size of the data, both with and without the applied filters. **Example: Server-side filtering example** All the filtering in this example happens server-side. This example also does server-side (multiple) sorting. ```ts import * as React from 'react'; import { DataSourceData, InfiniteTable, InfiniteTablePropColumns, DataSource, DataSourcePropSortInfo, DataSourcePropFilterValue, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; lastName: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; salary: number; }; const data: DataSourceData = ({ filterValue, sortInfo }) => { if (sortInfo && !Array.isArray(sortInfo)) { sortInfo = [sortInfo]; } const args = [ sortInfo ? 'sortInfo=' + JSON.stringify( sortInfo.map((s) => ({ field: s.field, dir: s.dir, })), ) : null, filterValue ? 'filterBy=' + JSON.stringify( filterValue.map(({ field, filter }) => { return { field: field, operator: filter.operator, value: filter.type === 'number' ? Number(filter.value) : filter.value, }; }), ) : null, ] .filter(Boolean) .join('&'); return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?` + args) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', type: 'number', defaultWidth: 100, }, salary: { field: 'salary', type: 'number', }, firstName: { field: 'firstName', }, stack: { field: 'stack' }, currency: { field: 'currency' }, }; const domProps = { style: { height: '100%', }, }; const defaultSortInfo: DataSourcePropSortInfo = [ { field: 'stack', dir: 1, }, { field: 'salary', dir: 1, }, ]; const defaultFilterValue: DataSourcePropFilterValue = []; const shouldReloadData = { sortInfo: true, }; export default () => { return ( <> data={data} primaryKey="id" defaultFilterValue={defaultFilterValue} defaultSortInfo={defaultSortInfo} shouldReloadData={shouldReloadData} > debugId="server-side-example" domProps={domProps} columnDefaultWidth={150} columnMinWidth={50} columns={columns} /> ); }; ``` When the filter value for a column matches the empty value - as specified in the [filterTypes.operator.emptyValues](https://infinite-table.com/docs/reference/datasource-props/index.md#filterTypes) - that value is not sent to the server as part of the `filterValue` array. When doing server-side filtering, it's your responsability as a developer to make sure you're sending the correct filtering parameters to the server, in a way the server understands it. This means that the filter values, the filter type and the names of the operators are known to the server and there is a clear convention of what is supported or not. ## Batch filtering In order to reduce the number of requests sent to the server, filtering will be batched by default. Batching is controlled by the [`filterDelay`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterDelay) prop, which, if not specified, defaults to `200` milliseconds. This means, any changes to the column filters, that happen inside a 200ms window (or the current value of [`filterDelay`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterDelay)), will be debounced and only the last value will be sent to the server. If you want to prevent debouncing/batching filter values, you can set [`filterDelay`](https://infinite-table.com/docs/reference/datasource-props/index.md#filterDelay) to `0`. --- # Providing a Custom Filter Editor > Writing a custom filter editor for a column in Infinite Table is straightforward. Canonical page: https://infinite-table.com/docs/learn/filtering/providing-a-custom-filter-editor Almost certainly, our current `string` and `number` filters are not enough for you. You will definitely need to write your custom filter editor. Fortunately, doing this is straightforward - it involves using the [`useInfiniteColumnFilterEditor`](https://infinite-table.com/docs/reference/hooks/index.md#useInfiniteColumnFilterEditor) hook. The next snippet shows our implementation of the `number` filter editor: ```tsx export function NumberFilterEditor() { const { ariaLabel, value, setValue, className, disabled } = useInfiniteColumnFilterEditor(); return ( { let value = isNaN(event.target.valueAsNumber) ? event.target.value : event.target.valueAsNumber; setValue(value as any as T); }} className={className} /> ); } ``` This `NumberFilterEditor` is configured in the `components.FilterEditor` property for the `number` filter type. If you want to import the `NumberFilterEditor`, you can do so with the following code: ```tsx import { components } from '@infinite-table/infinite-react'; const { NumberFilterEditor, StringFilterEditor } = components; ``` As an exercise, let's write a custom filter editor that shows a checkbox and uses that to filter the values. First step is to define the `bool` filter type: ```tsx {6} title="Defining the bool filter type with one emptyValue" filterTypes={{ bool: { label: 'Boolean', defaultOperator: 'eq', // when the filter checkbox is indeterminate state, that's mapped to `null` emptyValues: [null], operators: [ // operators will come here ], } }} ``` Note in the code above, we have `emptyValues: [null]` - so when the filter checkbox is in indeterminate state, it should show all the rows. Now it's time to define the operators - more exactly, just one operator, `eq`: ```tsx {7} title="Defining the eq operator" filterTypes={{ bool: { defaultOperator: 'eq', emptyValues: [null], operators: [ { name: 'eq', label: 'Equals', fn: ({ currentValue, filterValue }) => currentValue === filterValue, }, ], }, }} ``` The last part of the `bool` filter type will be to specify the `FilterEditor` component - this can be either specified as part of the filter type or as part of the operator definition (each operator can override the `components.FilterEditor`). ```tsx {6} title="Specifying the FilterEditor component" filterTypes={{ bool: { defaultOperator: 'eq', emptyValues: [null], components: { FilterEditor: BoolFilterEditor, FilterOperatorSwitch: () => null, }, operators: [ { name: 'eq', label: 'Equals', fn: ({ currentValue, filterValue }) => currentValue === filterValue, }, ], }, }} ``` Now it's time to write the actual `BoolFilterEditor` that the `bool` filter type is using: ```tsx {9} title="BoolFilterEditor" import { components, useInfiniteColumnFilterEditor, } from '@infinite-table/infinite-react'; const { CheckBox } = components; function BoolFilterEditor() { const { value, setValue, className } = useInfiniteColumnFilterEditor(); return (

); } ``` In the snippet above, note how we're using the [`useInfiniteColumnFilterEditor`](https://infinite-table.com/docs/reference/hooks/index.md#useInfiniteColumnFilterEditor) hook to get the current `value` of the filter and also to retrieve the `setValue` function that we need to call when we want to update filtering. **Example: Writing a `bool` filter type with a custom filter editor** The `canDesign` column is using a custom `bool` filter type with a custom filter editor. ```ts import * as React from 'react'; import { InfiniteTable, InfiniteTablePropColumns, DataSource, components, useInfiniteColumnFilterEditor, } from '@infinite-table/infinite-react'; const { CheckBox } = components; type Developer = { id: number; firstName: string; canDesign: boolean; stack: string; hobby: string; }; const dataSource: Developer[] = [ { id: 1, firstName: 'John', canDesign: true, stack: 'frontend', hobby: 'gaming', }, { id: 2, firstName: 'Jane', canDesign: false, stack: 'backend', hobby: 'reading', }, { id: 3, firstName: 'Jack', canDesign: true, stack: 'frontend', hobby: 'gaming', }, { id: 4, firstName: 'Jill', canDesign: false, stack: 'backend', hobby: 'reading', }, { id: 5, firstName: 'Seb', canDesign: false, stack: 'backend', hobby: 'reading', }, ]; const columns: InfiniteTablePropColumns = { id: { field: 'id', type: 'number', defaultWidth: 100, }, canDesign: { field: 'canDesign', filterType: 'bool', renderValue: ({ value }) => (value ? 'Yes' : 'No'), }, firstName: { field: 'firstName', }, stack: { field: 'stack' }, }; const domProps = { style: { height: '100%', }, }; function BoolFilterEditor() { const { value, setValue, className } = useInfiniteColumnFilterEditor(); return (

); } export default () => { return ( <> data={dataSource} primaryKey="id" defaultFilterValue={[]} filterDelay={0} filterTypes={{ bool: { defaultOperator: 'eq', emptyValues: [null], components: { FilterEditor: BoolFilterEditor, FilterOperatorSwitch: () => null, }, operators: [ { name: 'eq', label: 'Equals', fn: ({ currentValue, filterValue }) => currentValue === filterValue, }, ], }, }} > debugId="checkbox-filter-editor-example" domProps={domProps} columnDefaultWidth={150} columnMinWidth={50} columns={columns} /> ); }; ``` --- # Getting Started > Get help starting with Infinite Table for React. Our DataGrid component helps with sorting, filtering, row/column grouping, pivoting, aggregations ... Canonical page: https://infinite-table.com/docs/learn/getting-started/ > `Infinite Table` is a UI component for data virtualization - helps you display huge datasets of tabular data. It's built specifically for React from the ground up and with performance in mind. # Installation `Infinite Table` is available on the public [npm registry](https://www.npmjs.com/package/@infinite-table/infinite-react) - install it by running the following command: npm i @infinite-table/infinite-react ## Meet the Code This is an example to get you started with Infinite Table with minimal setup. ```ts import * as React from 'react'; import '@infinite-table/infinite-react/index.css'; import { InfiniteTable, DataSource, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; type Person = { Id: number; FirstName: string; Age: number; }; const columns: InfiniteTablePropColumns = { id: { // specifies which field from the data source // should be rendered in this column field: 'Id', type: 'number', defaultWidth: 80, }, firstName: { field: 'FirstName', header: 'First Name', }, age: { field: 'Age', type: 'number' }, }; const data: Person[] = [ { Id: 1, FirstName: 'Bob', Age: 3, }, { Id: 2, FirstName: 'Alice', Age: 50, }, { Id: 3, FirstName: 'Bill', Age: 5, }, ]; export default function App() { return ( data={data} primaryKey="Id"> debugId="meet-the-code" columns={columns} /> ); } ``` Don't forget to import the CSS to see the component in action! ```tsx import '@infinite-table/infinite-react/index.css'; ``` ## Using the Components In the code snippet above, you notice we're using 2 components: - `DataSource` - this needs to be a parent (or ancestor, at any level) of the `InfiniteTable` component - it controls which `data` the table is rendering - `InfiniteTable` - the actual virtualized table component - needs to be inside a `DataSource` (can be at any level of nesting). Both components are named exports of the `@infinite-table/infinite-react` package. ## TypeScript Types Our `TypeScript` types are published as part of the package, as named exports from the root of the package. There are 2 components that you can use and import: - `InfiniteTable` - `DataSource` Each of those has types provided for all the props it exposes, with the pattern of `Prop`, so here are a few examples to clarify the rule: ```ts import { InfiniteTablePropColumns, // or accessible as InfiniteTableProps['columns'] // corresponding to the `columns` prop DataSourcePropGroupBy, // or accessible as DataSourceProps['groupBy'] // corresponding to the `groupBy` prop } from '@infinite-table/infinite-react'; ``` Read more about how to use our TypeScript types. ## Built for React from the ground-up `Infinite Table` is built specifically for React and is fully declarative and fully typed. When you use `Infinite Table`, it feels at-home in your React application - every prop has both a controlled and uncontrolled version so you get full control over every area of the component. This is an example of how you might configure `InfiniteTable` in a real-world application and puts together several functionalities: - grouping - aggregation - pinned columns - sorting - multiple selection - custom cell rendering ```ts 'use client'; import { InfiniteTable, DataSource, GroupRowsState, InfiniteTablePropColumnTypes, DataSourcePropRowSelection_MultiRow, InfiniteTableColumn, InfiniteTableColumnRenderValueParam, DataSourcePropAggregationReducers, DataSourceGroupBy, components, DataSourcePropFilterValue, } from '@infinite-table/infinite-react'; import * as React from 'react'; import { useState } from 'react'; const { CheckBox } = components; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const showLogo = typeof window === 'undefined' ? true : window.location.host.startsWith('localhost:') || window.location.host.startsWith('infinite-table.com'); const avgReducer = { initialValue: 0, reducer: (acc: number, sum: number) => acc + sum, done: (value: number, arr: any[]) => arr.length ? Math.floor(value / arr.length) : 0, }; const aggregationReducers: DataSourcePropAggregationReducers = { salary: { field: 'salary', ...avgReducer, }, age: { field: 'age', ...avgReducer, }, currency: { field: 'currency', initialValue: new Set(), reducer: (acc: Set, value: string) => { acc.add(value); return acc; }, done: (value: Set) => { return value.size > 1 ? 'Mixed' : value.values().next().value; }, }, canDesign: { field: 'canDesign', initialValue: false, reducer: (acc: boolean | null, value: 'yes' | 'no') => { if (acc === null) { return acc; } if (acc === false && value === 'yes') { return null; } if (acc === true && value === 'no') { return null; } return acc; }, }, }; const flags = { 'United States': '🇺🇸', Canada: '🇨🇦', France: '🇫🇷', Germany: '🇩🇪', 'United Kingdom': '🇬🇧', 'South Africa': '🇿🇦', 'New Zealand': '🇳🇿', Sweden: '🇸🇪', China: '🇨🇳', Brazil: '🇧🇷', Turkey: '🇹🇷', Italy: '🇮🇹', India: '🇮🇳', Indonesia: '🇮🇩', Japan: '🇯🇵', Argentina: '🇦🇷', 'Saudi Arabia': '🇸🇦', Mexico: '🇲🇽', 'United Arab Emirates': '🇦🇪', }; function getColumns(): Record> { return { age: { field: 'age', header: 'Age', type: 'number', defaultWidth: 100, renderValue: ({ value }) => value, }, salary: { header: 'Compensation', field: 'salary', type: 'number', defaultWidth: 210, }, currency: { field: 'currency', header: 'Currency', defaultWidth: 100 }, preferredLanguage: { field: 'preferredLanguage', header: 'Programming Language', }, canDesign: { defaultWidth: 135, field: 'canDesign', header: 'Design Skills', renderMenuIcon: false, renderValue: ({ value }) => { return (

{value === null ? 'Some' : value === 'yes' ? 'Yes' : 'No'}

); }, }, country: { field: 'country', header: 'Country', renderValue: ({ value }) => { return ( {(flags as any)[value] || null} {value} ); }, }, firstName: { field: 'firstName', header: 'First Name' }, stack: { field: 'stack', header: 'Stack' }, city: { field: 'city', header: 'City' }, }; } // → 123.456,789 const groupColumn: InfiniteTableColumn = { header: 'Grouping', field: 'firstName', defaultWidth: 250, renderSelectionCheckBox: true, defaultFilterable: false, // in this function we have access to collapsed info // and grouping info about the current row - see rowInfo.groupBy renderValue: ({ value, rowInfo, }: InfiniteTableColumnRenderValueParam) => { if (!rowInfo.isGroupRow) { return value; } const groupBy = rowInfo.groupBy || []; const collapsed = rowInfo.collapsed; const currentGroupBy = groupBy[groupBy.length - 1]; if (currentGroupBy?.field === 'age') { return `🥳 ${value}${collapsed ? ' 🤷‍♂️' : ''}`; } return `${value}`; }, }; const defaultGroupRowsState = new GroupRowsState({ //make all groups collapsed by default collapsedRows: true, expandedRows: [ ['United States'], ['United States', 'backend'], ['France'], ['Turkey'], ], }); const columnTypes: InfiniteTablePropColumnTypes = { number: { align: 'end', style: () => { return {}; }, renderValue: ({ value, data, rowInfo }) => { return new Intl.NumberFormat('en-US', { style: 'currency', currency: rowInfo.isGroupRow && rowInfo.data?.currency === 'Mixed' ? 'USD' : data?.currency || 'USD', }).format(value); }, }, }; const defaultRowSelection: DataSourcePropRowSelection_MultiRow = { selectedRows: [['United States'], ['India'], ['France'], ['Turkey']], deselectedRows: [['United States', 'frontend']], defaultSelection: false, }; const defaultFilterValue: DataSourcePropFilterValue = [ { field: 'age', filter: { operator: 'gt', type: 'number', value: null, }, }, ]; const domProps = { style: { minHeight: '50vh', height: 600, margin: 5, }, }; export default function App() { const [{ min, max }, setMinMax] = useState({ min: 0, max: 0 }); const columns = React.useMemo(() => { const cols = getColumns(); if (cols.salary) { cols.salary.render = ({ renderBag, value }) => { const increase: number = Math.abs(max - min); const percentage = ((value - min) / increase) * 100; const alpha = Number((percentage / 100).toPrecision(2)) + 0.2; const backgroundColor = `rgba(255, 0, 0, ${alpha})`; return (

{renderBag.all}

); }; } return cols; }, [min, max]); const groupBy: DataSourceGroupBy[] = React.useMemo( () => [ { field: 'country', }, { field: 'stack' }, ], [], ); const Link = ({ children, href, }: { children: React.ReactNode; href: string; }) => { return ( {children} ); }; return ( <> {showLogo ? (

Go Back Home View source

) : null} data={dataSource} primaryKey="id" defaultFilterValue={defaultFilterValue} filterMode="local" useGroupKeysForMultiRowSelection defaultRowSelection={defaultRowSelection} defaultSortInfo={{ dir: -1, field: 'country', }} onDataArrayChange={(data) => { const min = Math.min(...data.map((data) => data.salary ?? 0)); const max = Math.max(...data.map((data) => data.salary ?? 0)); setMinMax({ min, max }); }} defaultGroupRowsState={defaultGroupRowsState} aggregationReducers={aggregationReducers} groupBy={groupBy} > debugId="full-demo" groupRenderStrategy="single-column" defaultColumnPinning={{ 'group-by': true, }} domProps={domProps} defaultActiveRowIndex={0} groupColumn={groupColumn} licenseKey={process.env.NEXT_PUBLIC_INFINITE_LICENSE_KEY} columns={columns} columnTypes={columnTypes} columnDefaultWidth={150} /> ); } const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers100') .then((r) => r.json()) .then((data: Developer[]) => data); }; ``` ## Licensing You can use `@infinite-table/infinite-react` in 2 ways: - with a license - requests for license quotations and additional quotations must be made by email to admin@infinite-table.com. After purchasing, you will receive a `licenseKey` which you will provide as a prop when you instantiate Infinite Table. This will make the [Powered by Infinite Table](https://infinite-table.com) footer go away. - without a license, but it will include a [Powered by Infinite Table](https://infinite-table.com) link in the table footer. This way you can use it for free in any product, but make sure the footer is always visible when Infinite Table is visible. For demo purposes, we don't show any license error for embeds in [codesandbox.io](https://codesandbox.io) - which are used throughout this demo site. Check the demo below to see the license footer in action. ```ts live title="Invalid License Demo" files="invalid-license.page.tsx,data.tsx" ``` Read more about our licensing model and how you can use Infinite Table. ## About the Docs > We're grateful for the work done by the [team behind reactjs.org](https://github.com/reactjs/reactjs.org) and the new React documentation found at [beta.reactjs.org](https://beta.reactjs.org/) - we've built our documentation on their excellent work 🙏 and we're grateful for that. The documentation is versioned, and we will publish a new version of the documentation when there are any significant changes in the corresponding `@infinite-table/infinite-react` version. --- # Licensing Infinite Table > Free Usage and Licensing with Infinite Table Canonical page: https://infinite-table.com/docs/learn/getting-started/licensing ## Free Usage You can immediately download and use [Infinite Table from the NPM registry](https://www.npmjs.com/package/@infinite-table/infinite-react) free of charge. When using Infinite Table for free, you have access to **all the features** of Infinite Table, but you will see a [Powered by Infinite Table](https://infinite-table.com) link in the table footer. You can use it for free in any product, but make sure the footer is always visible when Infinite Table is visible. For demo purposes, we don't show any license error for embeds in [codesandbox.io](https://codesandbox.io) - which are used throughout this demo site. Check the demo below to see the license footer in action. **Example: Invalid License Demo** ```ts files=["invalid-license.page.tsx","data.tsx"] ``` ## Licensed Usage We invite you to try out Infinite Table and explore all the features it has to offer. We're confident it will be a useful addition to your React applications. We encourage companies 🙌 to purchase development licenses for their teams and help us improve the product and support the development of new features. See our pricing page for more information on how to purchase a license. --- # Getting Started Test > Get help starting with Infinite Table for React. Our DataGrid component helps with sorting, filtering, row/column grouping, pivoting, aggregations ... Canonical page: https://infinite-table.com/docs/learn/getting-started/test good morning `radu` how are you? ```hello``` [`columns`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns) --- # TypeScript Types > Infinite Table types for TypeScript are published as part of the package, as named exports from the root of the package. Canonical page: https://infinite-table.com/docs/learn/getting-started/typescript-types Our `TypeScript` types are published as part of the package, as named exports from the root of the package. The 2 main components that you can need to use and import are: - `InfiniteTable` - `DataSource` ```tsx title="Importing InfiniteTable and DataSource components" import { InfiniteTable, DataSource } from '@infinite-table/infinite-react'; ``` In our TypeScript typings, those components are exported as generic components, so they need to be bound to the type of the data they are rendering. ```tsx type Developer = { id: number; firstName: string; lastName: string; currency: string; salary: number; } const App = () => { return data={data} primaryKey="id"> columns={{...}} /> } ``` Throughout the documentation, we will use the `DATA_TYPE` placeholder to refer to the type of the data that the `InfiniteTable` and `DataSource` components are bound to. You can still use `InfiniteTable` in plain JavaScript, but you won't get all the type-checking benefits. Both `InfiniteTable` and `DataSource` components have types provided for most of the props they support. Generally the naming pattern is `Prop`, so here are a few examples to clarify the rule: ```ts import type { InfiniteTablePropColumns, // corresponding to the `columns` prop DataSourcePropGroupBy, // corresponding to the `groupBy` prop } from '@infinite-table/infinite-react'; ``` ## `DataSource` Types Here are a few examples for types for the `DataSource` component: - `DataSourcePropGroupBy` - the type for [DataSource.groupBy](https://infinite-table.com/docs/reference/datasource-props/index.md#groupBy) ```tsx import type { DataSourcePropGroupBy } from '@infinite-table/infinite-react'; ``` - `DataSourcePropAggregationReducers` - the type for [DataSource.aggregationReducers](https://infinite-table.com/docs/reference/datasource-props/index.md#aggregationReducers) ```tsx import type { DataSourcePropAggregationReducers } from '@infinite-table/infinite-react'; ``` Not all the `DataSource` props have types exported that follow this convention, so you can always use `DataSourceProps` to get the type that define all the props. In this way you can access specific prop types by name - `DataSourceProps['groupBy']` - the type for [DataSource.groupBy](https://infinite-table.com/docs/reference/datasource-props/index.md#groupBy) - `DataSourceProps['data']` - the type for [DataSource.data](https://infinite-table.com/docs/reference/datasource-props/index.md#data) - etc ## `InfiniteTable` Types Below you can find a few examples for types for the `InfiniteTable` component: - `InfiniteTablePropColumns` - the type for [InfiniteTable.columns](https://infinite-table.com/docs/reference/infinite-table-props.md#columns) ```tsx import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; ``` - `InfiniteTablePropRowStyle` - the type for [InfiniteTable.rowStyle](https://infinite-table.com/docs/reference/infinite-table-props.md#rowStyle) ```tsx import type { InfiniteTablePropRowStyle } from '@infinite-table/infinite-react'; ``` - `InfiniteTablePropColumnGroups` - the type for [InfiniteTable.columnGroups](https://infinite-table.com/docs/reference/infinite-table-props.md#columnGroups) ```tsx import type { InfiniteTablePropColumnGroups } from '@infinite-table/infinite-react'; ``` Not all the `InfiniteTable` props have types exported that follow this convention, so you can always use `InfiniteTableProps` to get the type that define all the props the `InfiniteTable` component supports. In this way you can access specific prop types by name: - `InfiniteTableProps['columns']` - the type for [InfiniteTable.columns](https://infinite-table.com/docs/reference/infinite-table-props.md#columns) - `InfiniteTableProps['columnSizing']` - the type for [InfiniteTable.columnSizing](https://infinite-table.com/docs/reference/infinite-table-props.md#columnSizing) - etc Worth mentioning is the `InfiniteTableColumn` prop, which defines the type for the table [`columns`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns). --- # Grouping and Pivoting Canonical page: https://infinite-table.com/docs/learn/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. Learn row grouping and explore the possibilities. Read thorough documentation covering pivoting and aggregation. **Example: Simple row grouping** ```ts files=["row-grouping-example.page.tsx","columns.ts"] ``` --- # Aggregations > Learn how to define & use aggregations on grouped rows in Infinite Table for React. Canonical page: https://infinite-table.com/docs/learn/grouping-and-pivoting/group-aggregations A natural next step when grouping data is **aggregating the grouped values**. We allow developers to define any number of aggregations and bind them to any column. The aggregations are defined on the `` component and are easily available at render time. A client-side aggregation needs a reducer function that accumulates the values in the data array and computes the final result. Throughout the docs, we might refer to aggregations as reducers - which, more technically, they are, since they reduce an array of values (from a group) to a single value. ## Client-Side Aggregations When using client-side aggregation, each [aggregation](https://infinite-table.com/docs/reference/datasource-props/index.md#aggregationReducers) can have the following: ### An initial value The `initialValue` is optional value to use as the initial (accumulator) value for the reducer function. You can think of aggregations as an "enhanced" version of [Array.reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce), so initial value should sound familiar. The `initialValue` can be a function - in this case it will be called to compute the initial value. ### A reducer function `reducer` is the function to call for each value in the (grouped) data array. It is called with the following arguments: - `accumulator` - the value returned by the previous call to the reducer function, or the `initialValue` if this is the first call. You return the new accumulator value from this function. - `value` - the value of the current item in the data array. If the aggregation has a `field`, this is the value of that field in the current item. Otherwise, value is the result of calling the `reducer.getter(data)` function (if one exists) or null if no getter is defined. - `dataItem` - the current item in the data array. - `index` - the index of the current item in the data array. ### A `field` property or a `getter` function For simple use-cases of client-side aggregations, a `field` is the way to go. This defines the field property (from the DATA_TYPE) to which the aggregation is bound. For more complex scenarios, the aggregation should have a `getter` function. If both a `field` and a `getter` are provided, the `getter` has higher priority and will be used. Use this `getter` function to compute the value the current item in the array brings to the aggregation. ```tsx title="Aggregation_custom_getter_function" // useful for retrieving nested values getter: (dataItem: Developer) => data.salary.net; ``` For using nested values inside aggregations, use the aggregation `getter` function. ### A completion `done` function The completion `done` function is optional - if specified, will be after iterating over all the values in the grouped data array. Can be used to change the final result of the aggregation. It is called with the following arguments: - `accumulator` - the value returned by the last call to the reducer function - `data` - the grouped data array. This is useful for computing averages, for example: ```tsx title="Done function for avg reducer" done: (acc, data) => acc / data.length; ``` ### Putting it all together Let's take a look at a simple example of aggregating two columns, one to display the avg and the other one should compute the sum of the salary column for grouped rows. ```tsx title="Average Aggregation" import { DataSource, InfiniteTable } from '@infinite-table/infinite-react'; const sum = (a: number, b: number) => a + b; const reducers = { avg: { initialValue: 0, field: 'age', reducer: sum, done: (acc, data) => Math.round(acc / data.length), }, sumAgg: { initialValue: 0, field: 'salary', reducer: sum } } function App() { return aggregationReducers={reducers} > {...} /> } ``` In the above example, note that aggregations are an object where the keys of the object are used to identify the aggregation and the values are the aggregation configuration objects, as described above. At run-time, you have access to the aggregation reducer results inside group rows - you can use the `rowInfo.reducerResults` object to access those values. For the example above, you change how group rows are rendered for a certain column and display the aggregation results in a custom way: ```tsx {9} title="Custom_group_row_rendering_for_the_country_column" country: { field: 'country', // define a custom renderGroupValue fn for the country column renderGroupValue: ({ rowInfo }) => { const { reducerResults = {} } = rowInfo; // note the keys in the reducerResults objects match the keys in the aggregationReducers object return `Avg age: ${reducerResults.avg}, total salary ${reducerResults.sumAgg}`; }, }, ``` **Example: Sum and average aggregation example** ```ts import { InfiniteTable, InfiniteTablePropColumns, DataSource, DataSourcePropAggregationReducers, DataSourceGroupBy, GroupRowsState, } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const sum = (a: number, b: number) => a + b; // NOTE the type naming pattern DataSourceProp const reducers: DataSourcePropAggregationReducers = { avg: { initialValue: 0, field: 'age', reducer: sum, done: (acc, data) => Math.round(acc / data.length), }, sumAgg: { initialValue: 0, field: 'salary', reducer: sum, }, }; const columns: InfiniteTablePropColumns = { age: { field: 'age', header: 'Age (avg)' }, salary: { field: 'salary', type: 'number', header: 'Salary (sum)', }, country: { field: 'country', renderGroupValue: ({ rowInfo }) => { const { reducerResults = {} } = rowInfo; return `Avg age: ${reducerResults.avg}, total salary ${reducerResults.sumAgg}`; }, }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; const defaultGroupRowsState = new GroupRowsState({ //make all groups collapsed by default collapsedRows: true, expandedRows: [], }); export default function App() { const groupBy: DataSourceGroupBy[] = React.useMemo( () => [ { field: 'country', column: { renderGroupValue: ({ value }) => value, }, }, { field: 'stack' }, ], [], ); return ( data={dataSource} primaryKey="id" defaultGroupRowsState={defaultGroupRowsState} aggregationReducers={reducers} groupBy={groupBy} > debugId="aggregations-simple-example" groupRenderStrategy="multi-column" columns={columns} columnDefaultWidth={250} /> ); } const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers1k') .then((r) => r.json()) .then((data: Developer[]) => data); }; ``` ## Server-Side Aggregations Server-side aggregations are defined in the same way as client-side aggregations (except the `reducer` function is missing), but the aggregation values are computed by the server and returned as part of the data response. For computing the grouping and aggregations on the server, the backend needs to know the grouping and aggregation configuration. As such, Infinite Table will call the [DataSource data](https://infinite-table.com/docs/reference/datasource-props/index.md#data) function with an object that contains all the required info: - `groupBy` - the array of grouping fields, as passed to the `` component. - `pivotBy` - the array of pivot fields, as passed to the `` component. - `aggregationReducers` - the value of the [`aggregationReducers`](https://infinite-table.com/docs/reference/datasource-props/index.md#aggregationReducers) prop, as configured on the `` component. - `sortInfo` - the current [sorting information](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) for the data. For the lazy-loading use-case, there are other useful properties you can use from the object passed into the `data` function: - `groupKeys: string[]` - the group keys for the current group - the `data` fn is generally called lazily when the user expands a group row. This info is useful for fetching the data for a specific group. - `lazyLoadStartIndex` - provided when batching is also enabled via the [`lazyLoad`](https://infinite-table.com/docs/reference/datasource-props/index.md#lazyLoad) prop. This is the index of the first item in the current batch. - `lazyLoadBatchSize` - also used when batching is enabled. This is the number of items in the current batch. Besides the above information, if filtering is used, a `fiterValue` is also made available. In order to showcase the server-side aggregations, let's build an example similar to the above one, but let's lazily load group data. ```tsx {2} title="DataSourcewith lazyLoad enabled" ``` As soon a grouping and aggregations are no longer computed on the client, your `data` function needs to send those configurations on the backend, so it needs to get a bit more complicated: ```tsx title="Data_function_sending_configurations_to_the_backend" const data = ({ groupBy, aggregationReducers, sortInfo, groupKeys }) => { // it's important to send the current group keys - for top level, this will be [] const args: string[] = [`groupKeys=${JSON.stringify(groupKeys)}`]; // turn the sorting info into an array if (sortInfo && !Array.isArray(sortInfo)) { sortInfo = [sortInfo]; } if (sortInfo) { // the backend expects the sort info to be an array of field,dir pairs args.push( 'sortInfo=' + JSON.stringify( sortInfo.map((s) => ({ field: s.field, dir: s.dir, })), ), ); } if (groupBy) { // for grouping, send an array of objects with the `field` property args.push( 'groupBy=' + JSON.stringify(groupBy.map((p) => ({ field: p.field }))), ); } if (aggregationReducers) { args.push( 'reducers=' + JSON.stringify( // by convention, we send an array of reducers, each with `field` `name`(= "avg") and `id` // it's up to you to decide what the backend needs Object.keys(aggregationReducers).map((key) => ({ field: aggregationReducers[key].field, id: key, name: aggregationReducers[key].reducer, })), ), ); } const url = BASE_URL + `/developers10k-sql?` + args.join('&'); return fetch(url).then(r=>r.json()) } ``` When fetching without grouping (or with local grouping and aggregations), the `` component expects a flat array of data items coming from the server. However, when the grouping is happening server-side, the `` component expects a response that has the following shape: - `data` - the root array with grouping and aggregation info. Each item in the array should have the following: - `keys` - an array of the keys for the current group - eg `['USA']` or `['USA', 'New York']` - `data` - an object with all the common values for the group - eg `{ country: 'USA' }` or `{ country: 'USA', city: 'New York' }` - `aggregations` - an object with the aggregation values for the group - eg `{ age: 30, salary: 120300 }`. The keys in this object should match the keys in the [`aggregationReducers`](https://infinite-table.com/docs/reference/datasource-props/index.md#aggregationReducers) object. - `pivot` - pivoting information for the current group - more on that on the dedicated [Pivoting page](./pivoting/overview). When the user is expanding the last level, in order to see the leaf rows, the shape of the response is expected to be the same as when there is no grouping - namely an array of data items or an object where the `data` property is an array of data items. Let's put all of this into a working example. **Example** This showcases grouping and aggregations on the server - both the `age` and `salary` columns have an AVG aggregation defined. Grouping is done by the `country`, `city` and `stack` columns. ```tsx import { InfiniteTable, DataSource, DataSourceData, InfiniteTablePropColumns, GroupRowsState, DataSourceGroupBy, DataSourcePropAggregationReducers, } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const aggregationReducers: DataSourcePropAggregationReducers = { salary: { name: 'Salary (avg)', field: 'salary', reducer: 'avg', }, age: { name: 'Age (avg)', field: 'age', reducer: 'avg', }, }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage' }, age: { field: 'age' }, salary: { field: 'salary', type: 'number', }, canDesign: { field: 'canDesign' }, country: { field: 'country' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; const groupRowsState = new GroupRowsState({ expandedRows: [], collapsedRows: true, }); export default function RemotePivotExample() { const groupBy: DataSourceGroupBy[] = React.useMemo( () => [ { field: 'country', }, { field: 'city' }, { field: 'stack' }, ], [], ); return ( primaryKey="id" data={dataSource} groupBy={groupBy} aggregationReducers={aggregationReducers} defaultGroupRowsState={groupRowsState} lazyLoad={true} > debugId="grouping-and-aggregations-with-lazy-load-example" scrollStopDelay={10} groupRenderStrategy="single-column" hideEmptyGroupColumns columns={columns} columnDefaultWidth={220} /> ); } const dataSource: DataSourceData = ({ aggregationReducers, groupBy, groupKeys, sortInfo, }) => { // it's important to send the current group keys - for top level, this will be [] const args: string[] = [`groupKeys=${JSON.stringify(groupKeys)}`]; // turn the sorting info into an array if (sortInfo && !Array.isArray(sortInfo)) { sortInfo = [sortInfo]; } if (sortInfo) { // the backend expects the sort info to be an array of field,dir pairs args.push( 'sortInfo=' + JSON.stringify( sortInfo.map((s) => ({ field: s.field, dir: s.dir, })), ), ); } if (groupBy) { // for grouping, send an array of objects with the `field` property args.push( 'groupBy=' + JSON.stringify(groupBy.map((p) => ({ field: p.field }))), ); } if (aggregationReducers) { args.push( 'reducers=' + JSON.stringify( // by convention, we send an array of reducers, each with `field` `name` and `id` Object.keys(aggregationReducers).map((key) => ({ field: aggregationReducers[key].field, id: key, name: aggregationReducers[key].reducer, })), ), ); } return fetch( process.env.NEXT_PUBLIC_BASE_URL + `/developers30k-sql?` + args.join('&'), ).then((r) => r.json()); }; ``` When the user is doing a sort on the table, the `` is fetched from scratch, but the expanded/collapsed state is preserved, and all the required groups that need to be re-fetched are reloaded as needed (if they are not eagerly included in the served data). --- # Grouping rows Canonical page: https://infinite-table.com/docs/learn/grouping-and-pivoting/grouping-rows You can use any `field` available in the `DataSource` to do the grouping - it can even be a `field` that is not a column. When using TypeScript, both `DataSource` and `InfiniteTable` components are generic and need to be rendered/instantiated with a `DATA_TYPE` parameter. The fields in that `DATA_TYPE` can then be used for grouping. ```tsx type Person = { name: string; age: number; country: string; id: string; } const groupBy = [{field: 'country'}] groupBy={groupBy}> /> ``` In the example above, we're grouping by `country`, which is a field available in the `Person` type. Specifying a field not defined in the `Person` type would be a type error. Additionally, a `column` object can be used together with the `field` to define how the group column should be rendered. ```tsx {4} const groupBy = [ { field: 'country', column: { // custom column configuration for group column width: 150, header: 'Country group', }, }, ]; ``` The example below puts it all together. Also see the [groupBy API reference](https://infinite-table.com/docs/reference/datasource-props/index.md#groupBy) to find out more. **Example: Simple row grouping** ```ts import { InfiniteTable, DataSource } from '@infinite-table/infinite-react'; import type { DataSourcePropGroupBy, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; import * as React from 'react'; const groupBy: DataSourcePropGroupBy = [ { field: 'country', column: { header: 'Country group', renderGroupValue: ({ value }) => <>Country: {value}, }, }, ]; const columns: InfiniteTablePropColumns = { 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 ( data={dataSource} primaryKey="id" groupBy={groupBy}> debugId="row-grouping-example" columns={columns} /> ); } const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/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; }; ``` In `groupBy.column` you can use any column property - so, for example, you can define a custom `renderValue` function to customize the rendering. ```tsx {5} const groupBy = [ { field: 'country', column: { renderValue: ({ value }) => <>Country: {value}, }, }, ]; ``` The generated group column(s) - can be one for all groups or one for each group - will inherit the `style`/`className`/renderers from the columns corresponding to the group fields themselves (if those columns exist). Additionally, there are other ways to override those inherited configurations, in order to configure the group columns: - use [`groupBy.column`](https://infinite-table.com/docs/reference/infinite-table-props.md#groupBy.column) to specify how each grouping column should look for the respective field (in case of [groupRenderStrateg="multi-column"](https://infinite-table.com/docs/reference/infinite-table-props.md#groupRenderStrategy)) - use [`groupColumn`](https://infinite-table.com/docs/reference/infinite-table-props.md#groupColumn) prop - can be used as an object - ideal for when you have simple requirements and when [groupRenderStrateg="single-column"](https://infinite-table.com/docs/reference/infinite-table-props.md#groupRenderStrategy) - as a function that returns a column configuration - can be used like this in either single or multiple group render strategy ## Controlling the collapse/expand state When you do grouping, by default, all row groups are expanded. Of course you have full control over this and you do this via the [`groupRowsState`](https://infinite-table.com/docs/reference/datasource-props/index.md#groupRowsState)/[`defaultGroupRowsState`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultGroupRowsState) props. If you simply want to specify the initial expanded/collapsed state, you should use the [`defaultGroupRowsState`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultGroupRowsState) prop. ```tsx title="Specifying the default state for group rows" const defaultGroupRowsState: DataSourcePropGroupRowsStateObject = { collapsedRows: true, expandedRows: [['Mexico'], ['Mexico', 'backend'], ['India']], }; ``` The two properties in this object are `collapsedRows` and `expandedRows`, and each can have the following values: - `true` - meaning that all groups have this state - an array of arrays - representing the exceptions to the default value So if you have `collapsedRows` set to `true` and then `expandedRows` set to `[['Mexico'], ['Mexico', 'backend'], ['India']]` then all rows are collapsed by default, except the rows specified in the `expandedRows`. **Example: Everything is collapsed except a few rows** ```ts import { InfiniteTable, DataSource } from '@infinite-table/infinite-react'; import type { DataSourcePropGroupBy, DataSourcePropGroupRowsStateObject, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; import * as React from 'react'; const groupBy: DataSourcePropGroupBy = [ { field: 'country', column: { header: 'Country group', renderGroupValue: ({ value }) => <>Country: {value}, }, }, { field: 'stack', }, ]; const columns: InfiniteTablePropColumns = { 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' }, }; const defaultGroupRowsState: DataSourcePropGroupRowsStateObject = { collapsedRows: true, expandedRows: [['Mexico'], ['Mexico', 'backend'], ['India']], }; export default function App() { return ( data={dataSource} primaryKey="id" groupBy={groupBy} defaultGroupRowsState={defaultGroupRowsState} > debugId="row-grouping-state-example" columns={columns} /> ); } const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/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; }; ``` You can specify expand/collapse state at any level of nesting. Let's suppose by default all rows are collapsed - if you want a node to be visible then you have to specify all its parents as expanded. So having this ```tsx const defaultGroupRowsState = { collapsedRows: true, expandedRows: [['Mexico', 'backend']], }; ``` will show all rows as collapsed, and just as soon as you expand `Mexico` you will see the `backend` group row for Mexico to be expanded. This data format gives you ultimate flexibility and allows you to easily restore an expand/collpase state at a later time, if you wanted to. If you use the controlled [`groupRowsState`](https://infinite-table.com/docs/reference/datasource-props/index.md#groupRowsState), make sure you update it by leveraging the [`onGroupRowsStateChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onGroupRowsStateChange) callback prop. **Example: Using controlled expanded/collapsed state for group rows** ```ts import { InfiniteTable, DataSource, GroupRowsState, } from '@infinite-table/infinite-react'; import type { DataSourcePropGroupBy, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; import * as React from 'react'; const groupBy: DataSourcePropGroupBy = [ { field: 'country', column: { header: 'Country group', renderGroupValue: ({ value }) => <>Country: {value}, }, }, { field: 'stack', }, ]; const columns: InfiniteTablePropColumns = { 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() { const [groupRowsState, setGroupRowsState] = React.useState< GroupRowsState >(() => { const groupRowsState = new GroupRowsState({ collapsedRows: true, expandedRows: [['Mexico'], ['Mexico', 'backend'], ['India']], }); return groupRowsState; }); return ( <> data={dataSource} primaryKey="id" groupBy={groupBy} groupRowsState={groupRowsState} onGroupRowsStateChange={setGroupRowsState} > debugId="row-grouping-state-controlled-example" columns={columns} /> ); } const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/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; }; ``` In addition to simple objects with the shape described above, the [`groupRowsState`](https://infinite-table.com/docs/reference/datasource-props/index.md#groupRowsState)/[`defaultGroupRowsState`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultGroupRowsState) can also be instanges of `GroupRowsState` class, which is exported by the Infinite Table package. This class is simply a wrapper around those objects, but it gives you additional utility methods. The [`onGroupRowsStateChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onGroupRowsStateChange) callback gives you an instance of [`GroupRowsState`](https://infinite-table.com/docs/reference/datasource-props/index.md#GroupRowsState) back as the single argument. If you're using plain objects, just do `groupRowsState.getState()` and you'll get the corresponding plain object for the current expand/collapse state. [`GroupRowsState`](https://infinite-table.com/docs/reference/type-definitions/index.md#GroupRowsState) give you some additional helper methods, which you can read about [here](https://infinite-table.com/docs/reference/type-definitions/index.md#GroupRowsState) ## Grouping strategies Multiple grouping strategies are supported by, `InfiniteTable` DataGrid: - multi column mode - multiple group columns are generated, one for each specified group field - single column mode - a single group column is generated, even when there are multiple group fields You can specify the rendering strategy explicitly by setting the [`groupRenderStrategy`](https://infinite-table.com/docs/reference/infinite-table-props.md#groupRenderStrategy) property to any of the following: `multi-column`, `single-column`. If you don't set it explicitly, it will choose the best default based on your configuration. ### Multiple groups columns When grouping by multiple fields, by default the component will render a group column for each group field ```tsx const groupBy = [ { field: 'age', column: { width: 100, renderValue: ({ value }) => <>Age: {value}, }, }, { field: 'companyName', }, { field: 'country', }, ]; ``` Let's see an example of how the component would render the table with the multi-column strategy. **Example: Multi-column group render strategy** ```ts files=["row-grouping-multi-column-example.page.tsx","columns.ts"] ``` For the `multi-column` strategy, you can use [`hideEmptyGroupColumns`](https://infinite-table.com/docs/reference/infinite-table-props.md#hideEmptyGroupColumns) in order to hide columns for groups which are currently not visible. **Example: Hide Empty Group Columns** ```ts files=["$DOCS/reference/hideEmptyGroupColumns-example.page.tsx","$DOCS/reference/employee-columns.ts"] ``` You can specify an `id` for group columns. This is helpful if you want to size those columns (via [`columnSizing`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnSizing)) or pin them (via [`columnPinning`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnPinning)) or configure them in other ways. If no `id` is specified, it will be generated like this: `"group-by-${field}"` ### Single group column You can group by multiple fields, yet only render a single group column. To choose this rendering strategy, specify [`groupRenderStrategy`](https://infinite-table.com/docs/reference/infinite-table-props.md#groupRenderStrategy) property to be `single-column` (or specify [`groupColumn`](https://infinite-table.com/docs/reference/infinite-table-props.md#groupColumn) as an object.) In this case, you can't override the group column for each group field, as there's only one group column being generated. However, you can specify a [`groupColumn`](https://infinite-table.com/docs/reference/infinite-table-props.md#groupColumn) property to customize the generated column. By default the generated group column will "inherit" many of the properties (the column style or className or renderers) of the columns corresponding to the group fields (if such columns exist, because it's not mandatory that they are defined). **Example: Single-column group render strategy** ```ts files=["row-grouping-single-column-example.page.tsx","columns.ts"] ``` If [`groupColumn`](https://infinite-table.com/docs/reference/infinite-table-props.md#groupColumn) is specified to an object and no [`groupRenderStrategy`](https://infinite-table.com/docs/reference/infinite-table-props.md#groupRenderStrategy) is passed, the render strategy will be `single-column`. [`groupColumn`](https://infinite-table.com/docs/reference/infinite-table-props.md#groupColumn) can also be a function, which allows you to individually customize each group column - in case the `multi-column` strategy is used. You can specify an `id` for the single [`groupColumn`](https://infinite-table.com/docs/reference/infinite-table-props.md#groupColumn). This is helpful if you want to size this column (via [`columnSizing`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnSizing)) or pin it (via [`columnPinning`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnPinning)) or configure it in other ways. If no `id` is specified, it will default to `"group-by"`. ## Customizing the group column There are many ways to customize the group column(s) and we're going to show a few of them below: ### Binding the group column to a `field` By default, group columns only show values in the group rows - but they are normal columns, so why not bind them to a [field](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.field) of the `DATA_TYPE`? ```tsx {6,11} const groupColumn = { id: 'the-group', // can specify an id style: { color: 'tomato', }, field: 'firstName', // non-group rows will render the first name }; const columns = { theFirstName: { field: 'firstName', style: { // this style will also be applied in the group column, // since it is bound to this same `field` fontWeight: 'bold', }, }, }; ``` This makes the column display the value of the `field` in non-group/normal rows. Also, if you have another column bound to that `field`, the renderers/styling of that column will be used for the value of the group column, in non-group rows. **Example: Bind group column to a field** ```ts import { InfiniteTable, DataSource } from '@infinite-table/infinite-react'; import type { DataSourcePropGroupBy, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; import * as React from 'react'; const groupBy: DataSourcePropGroupBy = [ { field: 'stack', }, { field: 'preferredLanguage', }, ]; const columns: InfiniteTablePropColumns = { country: { field: 'country', }, theFirstName: { field: 'firstName', style: { color: 'orange', }, renderLeafValue: ({ value }) => { return `${value}!`; }, }, stack: { field: 'stack', style: { color: 'tomato', }, }, age: { field: 'age' }, salary: { field: 'salary', type: 'number', }, canDesign: { field: 'canDesign' }, }; const groupColumn = { field: 'firstName' as keyof Developer, }; export default function App() { return ( data={dataSource} primaryKey="id" groupBy={groupBy}> debugId="bind-group-column-to-field-example" groupColumn={groupColumn} columns={columns} columnDefaultWidth={150} /> ); } const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/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; }; ``` ### Use `groupColumn` to customize rendering The [`groupColumn`](https://infinite-table.com/docs/reference/infinite-table-props.md#groupColumn) will inherit its own rendering and styling from the columns that are bound to the fields used in [`groupBy.field`](https://infinite-table.com/docs/reference/datasource-props/index.md#groupBy.field). However, you can override any of those properties so you have full control over the rendering process. ```tsx {3,6} const groupColumn = { field: 'firstName', renderGroupValue: ({ value }) => { return `Group: ${value}`; }, renderLeafValue: ({ value }) => { return `First name: ${value}`; }, }; ``` **Example: Customize group column renderer** The column that renders the `firstName` has a custom renderer that adds a `.` at the end. The group column is bound to the same `firstName` field, but specifies a different renderer, which will be used instead. ```ts import { InfiniteTable, DataSource } from '@infinite-table/infinite-react'; import type { DataSourcePropGroupBy, InfiniteTableColumn, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; import * as React from 'react'; const groupBy: DataSourcePropGroupBy = [ { field: 'stack', }, { field: 'preferredLanguage', }, ]; const columns: InfiniteTablePropColumns = { country: { field: 'country', }, firstName: { field: 'firstName', style: { color: 'orange', }, renderValue: ({ value, rowInfo }) => rowInfo.isGroupRow ? null : `${value}.`, }, stack: { field: 'stack', style: { color: 'tomato', }, }, age: { field: 'age' }, salary: { field: 'salary', type: 'number', }, canDesign: { field: 'canDesign' }, }; const groupColumn: InfiniteTableColumn = { field: 'firstName', renderValue: ({ value }) => { return `First name: ${value}`; }, }; export default function App() { return ( data={dataSource} primaryKey="id" groupBy={groupBy}> debugId="group-column-custom-renderers-example" groupColumn={groupColumn} columns={columns} columnDefaultWidth={250} /> ); } const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/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; }; ``` Learn more about customizing column rendering via multiple renderer functions. ## Hiding columns when grouping When grouping is enabled, you can choose to hide some columns. Here are the two main ways to do this: - use [`hideColumnWhenGrouped`](https://infinite-table.com/docs/reference/infinite-table-props.md#hideColumnWhenGrouped) - this will make columns bound to the group fields be hidden when grouping is active - use [`columns.defaultHiddenWhenGroupedBy`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.defaultHiddenWhenGroupedBy) (also available on the column types, as [`columnTypes.defaultHiddenWhenGroupedBy`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnTypes.defaultHiddenWhenGroupedBy)) - this is a column-level property, so you have more fine-grained control over what is hidden and when. Valid values for [`columns.defaultHiddenWhenGroupedBy`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.defaultHiddenWhenGroupedBy) are: - `"*"` - when any grouping is active, hide the column that specifies this property - `true` - when the field this column is bound to is used in grouping, hides this column - `keyof DATA_TYPE` - specify an exact field that, when grouped by, makes this column be hidden - `{[k in keyof DATA_TYPE]: true}` - an object that can specify more fields. When there is grouping by any of those fields, the current column gets hidden. **Example: Hide columns when grouping** In this example, the column bound to `firstName` field is set to hide when any grouping is active, since the group column is anyways found to the `firstName` field. In addition, [`hideColumnWhenGrouped`](https://infinite-table.com/docs/reference/infinite-table-props.md#hideColumnWhenGrouped) is set to `true`, so the `stack` and `preferredLanguage` columns are also hidden, since they are grouped by. ```ts import { InfiniteTable, DataSource } from '@infinite-table/infinite-react'; import type { DataSourcePropGroupBy, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; import * as React from 'react'; const groupBy: DataSourcePropGroupBy = [ { field: 'stack', }, { field: 'preferredLanguage', }, ]; const columns: InfiniteTablePropColumns = { country: { field: 'country', }, theFirstName: { field: 'firstName', style: { color: 'orange', }, // hide this column when grouping active // as the group column is anyways bound to this field defaultHiddenWhenGroupedBy: '*', }, stack: { field: 'stack', style: { color: 'tomato', }, }, preferredLanguage: { field: 'preferredLanguage' }, age: { field: 'age' }, salary: { field: 'salary', type: 'number', }, canDesign: { field: 'canDesign' }, }; const groupColumn = { field: 'firstName' as keyof Developer, }; export default function App() { return ( data={dataSource} primaryKey="id" groupBy={groupBy}> debugId="hide-columns-when-grouping-example" groupColumn={groupColumn} columns={columns} hideColumnWhenGrouped columnDefaultWidth={250} /> ); } const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/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; }; ``` ## Sorting the group column When [groupRenderStrategy="single-column"](https://infinite-table.com/docs/reference/infinite-table-props.md#groupRenderStrategy) is used, the group column is sortable by default if all the columns that are involved in grouping are sortable. Sorting the group column makes the `sortInfo` have a value that looks like this: ```ts const sortInfo = [ { dir: 1, id: 'group-by', field: ['stack', 'age'], type: ['string', 'number'], }, ]; ``` [groupRenderStrategy="multi-column"](https://infinite-table.com/docs/reference/infinite-table-props.md#groupRenderStrategy), each group column is sortable by default if the column with the corresponding field is sortable. The [`columnDefaultSortable`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnDefaultSortable) property can be used to override the default behavior. **Example: Group column with initial descending sorting** ```ts import { InfiniteTable, DataSource, DataSourcePropSortInfo, } from '@infinite-table/infinite-react'; import type { DataSourcePropGroupBy, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; import * as React from 'react'; const groupBy: DataSourcePropGroupBy = [ { field: 'stack', }, { field: 'preferredLanguage', }, ]; const columns: InfiniteTablePropColumns = { country: { field: 'country', }, theFirstName: { field: 'firstName', style: { color: 'orange', }, // hide this column when grouping active // as the group column is anyways bound to this field defaultHiddenWhenGroupedBy: '*', }, stack: { field: 'stack', style: { color: 'tomato', }, }, preferredLanguage: { field: 'preferredLanguage' }, age: { field: 'age' }, salary: { field: 'salary', type: 'number', }, canDesign: { field: 'canDesign' }, }; const groupColumn = { field: 'firstName' as keyof Developer, }; const defaultSortInfo: DataSourcePropSortInfo = [ { field: ['stack', 'preferredLanguage'], dir: -1, id: 'group-by', }, ]; export default function App() { return ( data={dataSource} primaryKey="id" defaultSortInfo={defaultSortInfo} groupBy={groupBy} > debugId="group-column-sorted-initially-example" groupColumn={groupColumn} columns={columns} hideColumnWhenGrouped columnDefaultWidth={250} /> ); } const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers10') .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; }; ``` When a group column is configured and the `groupBy` fields are not bound to actual columns in the table, the group column will not be sortable by default. If you want to make it sortable, you have to specify a [`columns.sortType`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.sortType) array, of the same length as the `groupBy` array, that specifies the sort type for each group field. ## Aggregations When grouping, you can also aggregate the values of the grouped rows. This is done via the [DataSource.aggregationReducers](https://infinite-table.com/docs/reference/datasource-props/index.md#aggregationReducers) property. See the example below **Example: Grouping with aggregations** ```ts import { InfiniteTable, DataSource, GroupRowsState, } from '@infinite-table/infinite-react'; import type { InfiniteTableColumn, InfiniteTablePropColumns, InfiniteTableColumnRenderValueParam, DataSourcePropAggregationReducers, DataSourceGroupBy, } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const avgReducer = { initialValue: 0, reducer: (acc: number, sum: number) => acc + sum, done: (value: number, arr: any[]) => arr.length ? Math.floor(value / arr.length) : 0, }; const aggregationReducers: DataSourcePropAggregationReducers = { salary: { field: 'salary', ...avgReducer, }, age: { field: 'age', ...avgReducer, }, }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage' }, age: { field: 'age' }, salary: { field: 'salary', type: 'number', }, canDesign: { field: 'canDesign' }, country: { field: 'country' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; const groupColumn: InfiniteTableColumn = { header: 'Grouping', defaultWidth: 250, // in this function we have access to collapsed info // and grouping info about the current row - see rowInfo.groupBy renderValue: ({ value, rowInfo, }: InfiniteTableColumnRenderValueParam) => { if (!rowInfo.isGroupRow) { return value; } const groupBy = rowInfo.groupBy || []; const collapsed = rowInfo.collapsed; const currentGroupBy = groupBy[groupBy.length - 1]; if (currentGroupBy?.field === 'age') { return `🥳 ${value}${collapsed ? ' 🤷‍♂️' : ''}`; } return `🎉 ${value}`; }, }; const defaultGroupRowsState = new GroupRowsState({ //make all groups collapsed by default collapsedRows: true, expandedRows: [], }); export default function App() { const groupBy: DataSourceGroupBy[] = React.useMemo( () => [ { field: 'country', }, { field: 'stack' }, ], [], ); return ( data={dataSource} primaryKey="id" defaultGroupRowsState={defaultGroupRowsState} aggregationReducers={aggregationReducers} groupBy={groupBy} > debugId="grouping-with-aggregations-example" groupRenderStrategy="single-column" groupColumn={groupColumn} columns={columns} columnDefaultWidth={150} /> ); } const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers10k') .then((r) => r.json()) .then((data: Developer[]) => data); }; ``` Each [reducer](https://infinite-table.com/docs/reference/datasource-props/index.md#aggregationReducers) from the `aggregationReducers` map can have the following properties: - `field` - the field to aggregate on - `getter(data)` - a value-getter function, if the aggregation values are are not mapped directly to a `field` - `initialValue` - the initial value to start with when computing the aggregation (for client-side aggregations only) - `reducer: string | (acc, current, data: DATA_TYPE, index)=>value` - the reducer function to use when computing the aggregation (for client-side aggregations only). For server-side aggregations, this will be a `string` - `done(value, arr)` - a function that is called when the aggregation is done (for client-side aggregations only) and returns the final value of the aggregation - `name` - useful especially in combination with [`pivotBy`](https://infinite-table.com/docs/reference/datasource-props/index.md#pivotBy), as it will be used as the pivot column header. If an aggregation reducer is bound to a `field` in the dataset, and there is a column mapped to the same `field`, that column will show the corresponding aggregation value for each group row, as shown in the example above. If you want to prevent the user to expand the last level of group rows, you can override the `render` function for the group column **Example: Customized group expand on last group level** ```ts import { InfiniteTable, DataSource, DataSourcePropAggregationReducers, InfiniteTablePropColumns, DataSourceGroupBy, GroupRowsState, InfiniteTableGroupColumnFunction, InfiniteTableGroupColumnBase, InfiniteTableColumnCellContextType, } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const avgReducer = { initialValue: 0, reducer: (acc: number, sum: number) => acc + sum, done: (value: number, arr: any[]) => arr.length ? Math.floor(value / arr.length) : 0, }; const aggregationReducers: DataSourcePropAggregationReducers = { salary: { field: 'salary', ...avgReducer, }, age: { field: 'age', ...avgReducer, }, }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage' }, age: { field: 'age' }, salary: { field: 'salary', type: 'number', }, canDesign: { field: 'canDesign' }, country: { field: 'country' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; // TODO remove this after the next release //@ts-ignore const groupColumn: InfiniteTableGroupColumnFunction = (arg) => { const column = {} as Partial>; if (arg.groupIndexForColumn === arg.groupBy.length - 1) { column.render = (param: InfiniteTableColumnCellContextType) => { const { value, rowInfo } = param; if ( rowInfo.isGroupRow && rowInfo.groupBy?.length != rowInfo.rootGroupBy?.length ) { // we are on a group row that is the last grouping level return null; } return value; }; } return column; }; const defaultGroupRowsState = new GroupRowsState({ //make all groups collapsed by default collapsedRows: true, expandedRows: [], }); export default function App() { const groupBy: DataSourceGroupBy[] = React.useMemo( () => [ { field: 'country', }, { field: 'stack' }, ], [], ); return ( data={dataSource} primaryKey="id" defaultGroupRowsState={defaultGroupRowsState} aggregationReducers={aggregationReducers} groupBy={groupBy} > debugId="grouping-with-aggregations-discard-expand-example" groupRenderStrategy="multi-column" groupColumn={groupColumn} columns={columns} columnDefaultWidth={250} /> ); } const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers10k') .then((r) => r.json()) .then((data: Developer[]) => data); }; ``` Dive deeper into the aggregation reducers and how they work. ## Server side grouping with lazy loading Lazy loading becomes all the more useful when working with grouped data. The `DataSource` [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) function is called with an object that has all the information about the current `DataSource` state(grouping/pivoting/sorting/lazy-loading, etc) - see the paragraphs above for details. Server side grouping needs two kinds of data responses in order to work properly: - response for **non-leaf row groups** - these are groups that have children. For such groups (including the top-level group), the `DataSource.data` function must return a promise that's resolved to an object with the following properties: - `totalCount` - the total number of records in the group - `data` - an array of objects that describes non-leaf child groups, each object has the following properties: - `keys` - an array of the group keys (usually strings) that uniquely identifies the group, from the root to the current group - `data` - an object that describes the common properties of the group - `aggregations` - an object that describes the aggregations for the current group - response for **leaf rows** - these are normal rows - rows that would have been served in the non-grouped response. The resolved object should have the following properties: - `data` - an array of objects that describes the rows - `totalCount` - the total number of records on the server, that are part of the current group Here's an example, that assumes grouping by `country` and `city` and aggregations by `age` and `salary` (average values): ```tsx //request: groupKeys: [] // empty keys array, so it's a top-level group groupBy: [{"field":"country"},{"field":"city"}] reducers: [{"field":"salary","id":"avgSalary","name":"avg"},{"field":"age","id":"avgAge","name":"avg"}] // lazyLoadStartIndex: 0, - passed if lazyLoad is configured with a batchSize // lazyLoadBatchSize: 20 - passed if lazyLoad is configured with a batchSize //response { cache: true, totalCount: 20, data: [ { data: {country: "Argentina"}, aggregations: {avgSalary: 20000, avgAge: 30}, keys: ["Argentina"], }, { data: {country: "Australia"}, aggregations: {avgSalary: 25000, avgAge: 35}, keys: ["Australia"], } //... ] } ``` Now let's expand the first group and see how the request/response would look like: ```tsx //request: groupKeys: ["Argentina"] groupBy: [{"field":"country"},{"field":"city"}] reducers: [{"field":"salary","id":"avgSalary","name":"avg"},{"field":"age","id":"avgAge","name":"avg"}] //response { totalCount: 4, data: [ { data: {country: "Argentina", city: "Buenos Aires"}, aggregations: {avgSalary: 20000, avgAge: 30}, keys: ["Argentina", "Buenos Aires"], }, { data: {country: "Argentina", city: "Cordoba"}, aggregations: {avgSalary: 25000, avgAge: 35}, keys: ["Argentina", "Cordoba"], }, //... ] } ``` Finally, let's have a look at the leaf/normal rows and a request for them: ```tsx //request groupKeys: ["Argentina","Buenos Aires"] groupBy: [{"field":"country"},{"field":"city"}] reducers: [{"field":"salary","id":"avgSalary","name":"avg"},{"field":"age","id":"avgAge","name":"avg"}] //response { totalCount: 20, data: [ { id: 34, country: "Argentina", city: "Buenos Aires", age: 30, salary: 20000, stack: "full-stack", firstName: "John", //... }, { id: 35, country: "Argentina", city: "Buenos Aires", age: 35, salary: 25000, stack: "backend", firstName: "Jane", //... }, //... ] } ``` When a row group is expanded, since `InfiniteTable` has the group `keys` from the previous response when the node was loaded, it will use the `keys` array and pass them to the `DataSource.data` function when requesting for the children of the respective group. You know when to serve last-level rows, because in that case, the length of the `groupKeys` array will be equal to the length of the `groupBy` array. **Example: Server side grouping with lazy loding** ```ts import { InfiniteTable, DataSource, DataSourceData, InfiniteTablePropColumns, GroupRowsState, DataSourceGroupBy, DataSourcePropAggregationReducers, } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const aggregationReducers: DataSourcePropAggregationReducers = { salary: { name: 'Salary (avg)', field: 'salary', reducer: 'avg', }, age: { name: 'Age (avg)', field: 'age', reducer: 'avg', }, }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage' }, age: { field: 'age' }, salary: { field: 'salary', type: 'number', }, canDesign: { field: 'canDesign' }, country: { field: 'country' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; const groupRowsState = new GroupRowsState({ expandedRows: [], collapsedRows: true, }); export default function RemotePivotExample() { const groupBy: DataSourceGroupBy[] = React.useMemo( () => [ { field: 'country', }, { field: 'city' }, { field: 'stack' }, ], [], ); return ( primaryKey="id" data={dataSource} groupBy={groupBy} aggregationReducers={aggregationReducers} defaultGroupRowsState={groupRowsState} lazyLoad={true} > debugId="server-side-grouping-with-lazy-load-example" scrollStopDelay={10} hideEmptyGroupColumns columns={columns} columnDefaultWidth={220} /> ); } const dataSource: DataSourceData = ({ pivotBy, aggregationReducers, groupBy, lazyLoadStartIndex, lazyLoadBatchSize, groupKeys = [], sortInfo, }) => { if (sortInfo && !Array.isArray(sortInfo)) { sortInfo = [sortInfo]; } const startLimit: string[] = []; if (lazyLoadBatchSize && lazyLoadBatchSize > 0) { const start = lazyLoadStartIndex || 0; startLimit.push(`start=${start}`); startLimit.push(`limit=${lazyLoadBatchSize}`); } const args = [ ...startLimit, pivotBy ? 'pivotBy=' + JSON.stringify(pivotBy.map((p) => ({ field: p.field }))) : null, `groupKeys=${JSON.stringify(groupKeys)}`, groupBy ? 'groupBy=' + JSON.stringify(groupBy.map((p) => ({ field: p.field }))) : null, sortInfo ? 'sortInfo=' + JSON.stringify( sortInfo.map((s) => ({ field: s.field, dir: s.dir, })), ) : null, aggregationReducers ? 'reducers=' + JSON.stringify( Object.keys(aggregationReducers).map((key) => ({ field: aggregationReducers[key].field, id: key, name: aggregationReducers[key].reducer, })), ) : null, ] .filter(Boolean) .join('&'); return fetch( process.env.NEXT_PUBLIC_BASE_URL + `/developers30k-sql?` + args, ).then((r) => r.json()); }; ``` ## Eager loading for group row nodes When using lazy-loading together with batching, node data (without children) is loaded when a node (normal or grouped) comes into view. Only when a group node is expanded will its children be loaded. However, you can do this loading eagerly, by using the `dataset` property on the node you want to load. This can be useful in combination with using `dataParams.groupRowsState` from the [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) function - so your datasource can know which groups are expanded, and thus it can serve those groups already loaded with children. ```tsx {18} //request: groupKeys: [] // empty keys array, so it's a top-level group groupBy: [{"field":"country"},{"field":"city"}] reducers: [{"field":"salary","id":"avgSalary","name":"avg"},{"field":"age","id":"avgAge","name":"avg"}] // lazyLoadStartIndex: 0, - passed if lazyLoad is configured with a batchSize // lazyLoadBatchSize: 20 - passed if lazyLoad is configured with a batchSize //response { cache: true, totalCount: 20, data: [ { data: {country: "Argentina"}, aggregations: {avgSalary: 20000, avgAge: 30}, keys: ["Argentina"], // NOTE this dataset property used for eager-loading of group nodes dataset: { // the shape of the dataset is the same as the one normally returned by the datasource cache: true, totalCount: 4, data: [ { data: {country: "Argentina", city: "Buenos Aires"}, aggregations: {avgSalary: 20000, avgAge: 30}, keys: ["Argentina", "Buenos Aires"], }, { data: {country: "Argentina", city: "Cordoba"}, aggregations: {avgSalary: 25000, avgAge: 35}, keys: ["Argentina", "Cordoba"], }, ] } }, { data: {country: "Australia"}, aggregations: {avgSalary: 25000, avgAge: 35}, keys: ["Australia"], } //... ] } ``` --- # Customizing Pivot Columns Canonical page: https://infinite-table.com/docs/learn/grouping-and-pivoting/pivoting/customizing-pivot-columns There are a number of ways to customize the generated pivot columns and we'll cover each of them in this page ## Inheriting from initial columns Pivoting is all about aggregations, so you need to specify the [reducers](https://infinite-table.com/docs/reference/datasource-props/index.md#aggregationReducers) that will aggregate your data. Each reducer can have a `field` property that specifies the field that will be used for aggregation. If the table [`columns`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns) collection already has a column bound to the `field` used in the aggregation, the column configuration will be inherited by the generated pivot column. ```ts const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage', style: { color: 'blue' }, }, age: { field: 'age', style: { color: 'magenta', background: 'yellow', }, }, salary: { field: 'salary', type: 'number', style: { color: 'red', }, }, canDesign: { field: 'canDesign' }, country: { field: 'country' }, firstName: { field: 'firstName' }, id: { field: 'id' }, }; const avgReducer: InfiniteTableColumnAggregator = { initialValue: 0, reducer: (acc, sum) => acc + sum, done: (sum, arr) => { return Math.floor(arr.length ? sum / arr.length : 0); }, }; const aggregationReducers: DataSourceProps['aggregationReducers'] = { // will have the same configuration as the `salary` column avgSalary: { field: 'salary', ...avgReducer }, avgAge: { field: 'age', ...avgReducer, pivotColumn: { // will have the same configuration as the `preferredLanguage` column inheritFromColumn: 'preferredLanguage', // but specify a custom default width defaultWidth: 500, }, }, }; ``` **Example: Pivot columns inherit from original columns bound to the same field** ```ts import { InfiniteTable, DataSource, GroupRowsState, } from '@infinite-table/infinite-react'; import type { DataSourcePropAggregationReducers, InfiniteTableColumnAggregator, InfiniteTablePropColumns, DataSourceGroupBy, DataSourcePivotBy, } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers100') .then((r) => r.json()) .then((data: Developer[]) => data); }; const avgReducer: InfiniteTableColumnAggregator = { initialValue: 0, reducer: (acc, sum) => acc + sum, done: (sum, arr) => (arr.length ? sum / arr.length : 0), }; const columnAggregations: DataSourcePropAggregationReducers = { avgSalary: { field: 'salary', name: 'Average salary', ...avgReducer, }, avgAge: { field: 'age', ...avgReducer, pivotColumn: { defaultWidth: 500, inheritFromColumn: 'firstName', }, }, }; const columns: InfiniteTablePropColumns = { id: { field: 'id' }, firstName: { field: 'firstName', style: { fontWeight: 'bold', }, renderValue: ({ value }) => <>{value}!, }, preferredLanguage: { field: 'preferredLanguage' }, stack: { field: 'stack' }, country: { field: 'country' }, canDesign: { field: 'canDesign' }, hobby: { field: 'hobby' }, city: { field: 'city' }, age: { field: 'age' }, salary: { field: 'salary', type: 'number', header: 'Salary', style: { color: 'red' }, }, currency: { field: 'currency' }, }; const groupRowsState = new GroupRowsState({ expandedRows: [], collapsedRows: true, }); export default function PivotByExample() { const groupBy: DataSourceGroupBy[] = React.useMemo( () => [ { field: 'preferredLanguage', }, { field: 'stack' }, ], [], ); const pivotBy: DataSourcePivotBy[] = React.useMemo( () => [ { field: 'country' }, { field: 'canDesign', }, ], [], ); return ( <> primaryKey="id" data={dataSource} groupBy={groupBy} pivotBy={pivotBy} aggregationReducers={columnAggregations} defaultGroupRowsState={groupRowsState} > {({ pivotColumns, pivotColumnGroups }) => { return ( debugId="pivot-column-inherit-example" columns={columns} hideEmptyGroupColumns pivotColumns={pivotColumns} pivotColumnGroups={pivotColumnGroups} columnDefaultWidth={180} /> ); }} ); } ``` --- # Pivoting Canonical page: https://infinite-table.com/docs/learn/grouping-and-pivoting/pivoting/overview An enteprise-level feature `InfiniteTable` provides is the pivoting functionality. Combined with grouping and advanced aggregation, it unlocks new ways to visualize data. Pivoting is first defined at the `DataSource` level, via the [`pivotBy`](https://infinite-table.com/docs/reference/infinite-table-props.md#pivotBy) prop. It's an array of objects, each with a `field` property bound (so `pivotBy[].field` is keyof `DATA_TYPE`) to the `DataSource`. Pivoting generates columns based on the pivoting values, so you have to pass those generated columns into the `` component. You do that by using a `function` as a direct child of the `DataSource`, and in that function you have access to the generated `pivotColumns` array. Likewise for `pivotColumnGroups`. For more pivoting examples, see [our pivoting demos](https://infinite-table.com/docs/learn/examples/dynamic-pivoting-example.md) ```ts const pivotBy = [{ field: 'team' }] // field needs to be keyof DATA_TYPE both in `pivotBy` and `groupBy` const groupBy = [{field: 'department'}, {field: 'country'}] pivotBy={pivotBy} groupBy={groupBy}> { ({pivotColumns, pivotColumnGroups}) => { return pivotColumns={pivotColumns} pivotColumnGroups={pivotColumnGroups} /> } } ``` **Example: Pivoting with avg aggregation** ```ts import { InfiniteTable, DataSource, GroupRowsState, } from '@infinite-table/infinite-react'; import type { InfiniteTableColumnAggregator, InfiniteTablePropColumns, DataSourcePropAggregationReducers, DataSourceGroupBy, DataSourcePivotBy, } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers100') .then((r) => r.json()) .then((data: Developer[]) => data) .then( (data) => new Promise((resolve) => { setTimeout(() => resolve(data), 1000); }), ); }; const avgReducer: InfiniteTableColumnAggregator = { initialValue: 0, field: 'salary', reducer: (acc, sum) => acc + sum, done: (sum, arr) => (arr.length ? sum / arr.length : 0), }; const reducers: DataSourcePropAggregationReducers = { salary: avgReducer, }; const columns: InfiniteTablePropColumns = { id: { field: 'id' }, firstName: { field: 'firstName' }, preferredLanguage: { field: 'preferredLanguage' }, stack: { field: 'stack' }, country: { field: 'country' }, canDesign: { field: 'canDesign' }, hobby: { field: 'hobby' }, city: { field: 'city' }, age: { field: 'age' }, salary: { field: 'salary', type: 'number' }, currency: { field: 'currency' }, }; const groupRowsState = new GroupRowsState({ expandedRows: [], collapsedRows: true, }); export default function GroupByExample() { const groupBy: DataSourceGroupBy[] = React.useMemo( () => [ { field: 'preferredLanguage', }, { field: 'stack' }, ], [], ); const pivotBy: DataSourcePivotBy[] = React.useMemo( () => [ { field: 'country' }, { field: 'canDesign', }, ], [], ); return ( <> primaryKey="id" data={dataSource} groupBy={groupBy} pivotBy={pivotBy} aggregationReducers={reducers} defaultGroupRowsState={groupRowsState} > {({ pivotColumns, pivotColumnGroups }) => { return ( debugId="pivoting-example" columns={columns} pivotColumns={pivotColumns} pivotColumnGroups={pivotColumnGroups} columnDefaultWidth={200} pivotTotalColumnPosition="end" /> ); }} ); } ``` ## Customizing Pivot Columns There are a number of ways to customize the pivot columns and [pivot column groups](https://infinite-table.com/docs/reference/datasource-props/index.md#pivotBy.columnGroup). This is something you generally want to do, as they are generated and you might need to tweak column headers, size, etc. The default behavior for pivot columns generated for aggregations is that they inherit the properties of the original columns bound to the same field as the aggregation. ```ts const avgReducer: InfiniteTableColumnAggregator = { initialValue: 0, reducer: (acc, sum) => acc + sum, done: (sum, arr) => { return Math.floor(arr.length ? sum / arr.length : 0); }, }; const aggregationReducers: DataSourceProps['aggregationReducers'] = { // will have the same configuration as the `salary` column avgSalary: { field: 'salary', ...avgReducer }, avgAge: { field: 'age', ...avgReducer, pivotColumn: { // will have the same configuration as the `preferredLanguage` column inheritFromColumn: 'preferredLanguage', // but specify a custom default width defaultWidth: 500, }, }, }; ``` **Example: Pivot columns inherit from original columns bound to the same field** ```ts import { InfiniteTable, DataSource, GroupRowsState, } from '@infinite-table/infinite-react'; import type { DataSourcePropAggregationReducers, InfiniteTableColumnAggregator, InfiniteTablePropColumns, DataSourceGroupBy, DataSourcePivotBy, } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers100') .then((r) => r.json()) .then((data: Developer[]) => data); }; const avgReducer: InfiniteTableColumnAggregator = { initialValue: 0, reducer: (acc, sum) => acc + sum, done: (sum, arr) => (arr.length ? sum / arr.length : 0), }; const columnAggregations: DataSourcePropAggregationReducers = { avgSalary: { field: 'salary', name: 'Average salary', ...avgReducer, }, avgAge: { field: 'age', ...avgReducer, pivotColumn: { defaultWidth: 500, inheritFromColumn: 'firstName', }, }, }; const columns: InfiniteTablePropColumns = { id: { field: 'id' }, firstName: { field: 'firstName', style: { fontWeight: 'bold', }, renderValue: ({ value }) => <>{value}!, }, preferredLanguage: { field: 'preferredLanguage' }, stack: { field: 'stack' }, country: { field: 'country' }, canDesign: { field: 'canDesign' }, hobby: { field: 'hobby' }, city: { field: 'city' }, age: { field: 'age' }, salary: { field: 'salary', type: 'number', header: 'Salary', style: { color: 'red' }, }, currency: { field: 'currency' }, }; const groupRowsState = new GroupRowsState({ expandedRows: [], collapsedRows: true, }); export default function PivotByExample() { const groupBy: DataSourceGroupBy[] = React.useMemo( () => [ { field: 'preferredLanguage', }, { field: 'stack' }, ], [], ); const pivotBy: DataSourcePivotBy[] = React.useMemo( () => [ { field: 'country' }, { field: 'canDesign', }, ], [], ); return ( <> primaryKey="id" data={dataSource} groupBy={groupBy} pivotBy={pivotBy} aggregationReducers={columnAggregations} defaultGroupRowsState={groupRowsState} > {({ pivotColumns, pivotColumnGroups }) => { return ( debugId="pivot-column-inherit-example" columns={columns} hideEmptyGroupColumns pivotColumns={pivotColumns} pivotColumnGroups={pivotColumnGroups} columnDefaultWidth={180} /> ); }} ); } ``` Another way to do it is to specify [`pivotBy.column`](https://infinite-table.com/docs/reference/datasource-props/index.md#pivotBy.column), as either an object, or (more importantly) as a function. If you pass an object, it will be applied to all pivot columns in the column group generated for the `field` property. ```tsx const pivotBy: DataSourcePivotBy[] = [ { field: 'country' }, { field: 'canDesign', column: { defaultWidth: 400 } }, ]; ; ``` In the above example, the `column.defaultWidth=400` will be applied to columns generated for all `canDesign` values corresponding to each country. This is good but not good enough as you might want to customize the pivot column for every value in the pivot. You can do that by passing a function to the `pivotBy.column` property. ```tsx const pivotBy: DataSourcePivotBy[] = [ { field: 'country' }, { field: 'canDesign', column: ({ column }) => { return { header: column.pivotGroupKey === 'yes' ? 'Designer' : 'Not a Designer', }; }, }, ]; ``` **Example: Pivoting with customized pivot column** ```ts import { InfiniteTable, DataSource, GroupRowsState, } from '@infinite-table/infinite-react'; import type { DataSourcePropAggregationReducers, InfiniteTableColumnAggregator, InfiniteTablePropColumns, DataSourceGroupBy, DataSourcePivotBy, } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers100') .then((r) => r.json()) .then((data: Developer[]) => data); }; const avgReducer: InfiniteTableColumnAggregator = { initialValue: 0, field: 'salary', reducer: (acc, sum) => acc + sum, done: (sum, arr) => (arr.length ? sum / arr.length : 0), }; const columnAggregations: DataSourcePropAggregationReducers = { salary: avgReducer, }; const columns: InfiniteTablePropColumns = { id: { field: 'id' }, firstName: { field: 'firstName' }, preferredLanguage: { field: 'preferredLanguage' }, stack: { field: 'stack' }, country: { field: 'country' }, canDesign: { field: 'canDesign' }, hobby: { field: 'hobby' }, city: { field: 'city' }, age: { field: 'age' }, salary: { field: 'salary', type: 'number' }, currency: { field: 'currency' }, }; const groupRowsState = new GroupRowsState({ expandedRows: [], collapsedRows: true, }); export default function PivotByExample() { const groupBy: DataSourceGroupBy[] = React.useMemo( () => [ { field: 'preferredLanguage', }, { field: 'stack' }, ], [], ); const pivotBy: DataSourcePivotBy[] = React.useMemo( () => [ { field: 'country' }, { field: 'canDesign', column: ({ column: pivotCol }) => { const lastKey = pivotCol.pivotGroupKeys[pivotCol.pivotGroupKeys.length - 1]; return { header: lastKey === 'yes' ? '💅 Designer' : '💻 Non-designer', }; }, }, ], [], ); return ( <> primaryKey="id" data={dataSource} groupBy={groupBy} pivotBy={pivotBy} aggregationReducers={columnAggregations} defaultGroupRowsState={groupRowsState} > {({ pivotColumns, pivotColumnGroups }) => { return ( debugId="pivoting-customize-column-example" columns={columns} hideEmptyGroupColumns pivotColumns={pivotColumns} pivotColumnGroups={pivotColumnGroups} columnDefaultWidth={180} /> ); }} ); } ``` ## Total and grand-total columns In [pivot mode](https://infinite-table.com/docs/reference/datasource-props/index.md#pivotBy) you can configure both [total columns](https://infinite-table.com/docs/reference/infinite-table-props.md#pivotTotalColumnPosition) and [grand-total columns](https://infinite-table.com/docs/reference/infinite-table-props.md#pivotGrandTotalColumnPosition). By default, grand-total columns are not displayed, so you have to explicitly set the [`pivotGrandTotalColumnPosition`](https://infinite-table.com/docs/reference/infinite-table-props.md#pivotGrandTotalColumnPosition) prop for them to be visible. Pivot total columns are only displayed when [pivotBy](https://infinite-table.com/docs/reference/datasource-props/index.md#pivotBy) has two or more fields (`pivotBy.length > 1`). With a single pivot field only grand-total columns can be shown, and naving [`pivotTotalColumnPosition`](https://infinite-table.com/docs/reference/infinite-table-props.md#pivotTotalColumnPosition) has no effect — the totals would be the same as the already displayed values. The example below pivots by `stack` and `canDesign` so both total and grand-total columns are visible. **Example: Pivoting with customized position for totals and grand-total columns** ```ts import { InfiniteTable, DataSource, DataSourceGroupBy, DataSourcePivotBy, InfiniteTableColumnAggregator, DataSourcePropAggregationReducers, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers1k') .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', defaultWidth: 80 }, preferredLanguage: { field: 'preferredLanguage' }, stack: { field: 'stack' }, }; const defaultGroupBy: DataSourceGroupBy[] = [ { field: 'country', }, { field: 'city', }, ]; const defaultPivotBy: DataSourcePivotBy[] = [ { field: 'stack', }, { field: 'canDesign', columnGroup: ({ columnGroup }) => { return { ...columnGroup, header: columnGroup.pivotGroupKey === 'yes' ? 'Designer' : 'Non-designer', }; }, }, ]; const avgReducer: InfiniteTableColumnAggregator = { initialValue: 0, reducer: (acc, sum) => acc + sum, done: (sum, arr) => Math.round(arr.length ? sum / arr.length : 0), }; const aggregations: DataSourcePropAggregationReducers = { salary: { ...avgReducer, name: 'Salary (avg)', field: 'salary', }, age: { ...avgReducer, name: 'Age (avg)', field: 'age', }, }; export default function ColumnValueGetterExample() { return ( <> primaryKey="id" defaultGroupBy={defaultGroupBy} defaultPivotBy={defaultPivotBy} aggregationReducers={aggregations} data={dataSource} > {({ pivotColumns, pivotColumnGroups }) => { return ( debugId="pivot-grand-total-column-position-example" groupRenderStrategy="single-column" columns={columns} columnDefaultWidth={200} pivotColumns={pivotColumns} pivotColumnGroups={pivotColumnGroups} pivotTotalColumnPosition="end" pivotGrandTotalColumnPosition="start" /> ); }} ); } ``` **What are grand-total columns?** For each [aggregation reducer](https://infinite-table.com/docs/reference/datasource-props/index.md#aggregationReducers) specified in the `DataSource`, you can have a total column - this is what [grand-total columns](https://infinite-table.com/docs/reference/infinite-table-props.md#pivotGrandTotalColumnPosition) basically are. ## Server-side pivoting By default, pivoting is client side. However, if you specify [DataSource.lazyLoad](https://infinite-table.com/docs/reference/datasource-props/index.md#lazyLoad) and provide a function that returns a promise for the [DataSource.data](https://infinite-table.com/docs/reference/datasource-props/index.md#data) prop, the table will use server-pivoted data. The [DataSource.data](https://infinite-table.com/docs/reference/datasource-props/index.md#data) function is expected to return a promise that resolves to an object with the following shape: - `totalCount` - the total number of records in the group we're pivoting on - `data` - an array of objects that describes child groups, each object has the following properties: - `keys` - an array of the group keys (usually strings) that uniquely identifies the group, from the root to the current group - `data` - an object that describes the common properties of the group - `aggregations` - an object that describes the aggregations for the current group - `pivot` - the pivoted values and aggregations for each value. This object will have the following properties: - `totals` - an object with a key for each aggregation. The value is the aggregated value for the respective aggregation reducer. - `values` - an object keyed with the unique values for the pivot field. The values of those keys are objects with the same shape as the `pivot` top-level object, namely `totals` and `values`. In the example below, let's assume the following practical scenario, with the data-type being a `Developer{country, stack, preferredLanguage, canDesign, age, salary}`. ```tsx const groupBy = [ { field: 'country' }, // possible values: any valid country { field: 'stack' }, // possible values: "backend", "frontend", "full-stack" ]; const pivotBy = [ { field: 'preferredLanguage' }, // possible values: "TypeScript","JavaScript","Go" { field: 'canDesign' }, // possible values: "yes" or "no" ]; const aggregationReducers = { salary: { name: 'Salary (avg)', field: 'salary', reducer: 'avg' }, age: { name: 'Age (avg)', field: 'age', reducer: 'avg' }, }; ``` ```tsx const dataSource = ({ groupBy, pivotBy, groupKeys, aggregationReducers }) => { // make sure you return a Promise that resolves to the correct structure - see details below //eg: groupBy: [{ field: 'country' }, { field: 'stack' }], // groupKeys: [], - so we're requesting top-level data //eg: groupBy: [{ field: 'country' }, { field: 'stack' }], // groupKeys: ["Canada"], - so we're requesting Canada's data //eg: groupBy: [{ field: 'country' }, { field: 'stack' }], // groupKeys: ["Canada"], - so we're requesting Canada's data } ``` ```js { data: [ { aggregations: { // for each aggregation id, have an entry salary: , age: , }, data: { // data is an object with the common group values country: "Canada" }, // the array of keys that uniquely identify this group, including all parent keys keys: ["Canada"], pivot: { totals: { // for each aggregation id, have an entry salary: , age: , }, values: { [for each unique value]: { // eg: for country totals: { // for each aggregation, have an entry salary: , age: , }, values: { [for each unique value]: { // eg: for stack totals: { salary: , age: , } } } } } } } ], // the total number of rows in the remote data set totalCount: 10, // you can map "values" and "totals" above to shorter names mappings: { values: "values", totals: "totals" } } ``` **Example: Server-side pivoting example** ```ts import { InfiniteTable, DataSource, GroupRowsState, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns, InfiniteTablePropColumnPinning, DataSourceData, DataSourcePropAggregationReducers, DataSourceGroupBy, DataSourcePivotBy, } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const DATA_SOURCE_SIZE = '10k'; const dataSource: DataSourceData = ({ pivotBy, aggregationReducers, groupBy, groupKeys = [], }) => { const args = [ pivotBy ? 'pivotBy=' + JSON.stringify(pivotBy.map((p) => ({ field: p.field }))) : null, `groupKeys=${JSON.stringify(groupKeys)}`, groupBy ? 'groupBy=' + JSON.stringify(groupBy.map((p) => ({ field: p.field }))) : null, aggregationReducers ? 'reducers=' + JSON.stringify( Object.keys(aggregationReducers).map((key) => ({ field: aggregationReducers[key].field, id: key, name: aggregationReducers[key].reducer, })), ) : null, ] .filter(Boolean) .join('&'); return fetch( process.env.NEXT_PUBLIC_BASE_URL + `/developers${DATA_SOURCE_SIZE}-sql?` + args, ) .then((r) => r.json()) .then((data: Developer[]) => data); }; const aggregationReducers: DataSourcePropAggregationReducers = { salary: { // the aggregation name will be used as the column header name: 'Salary (avg)', field: 'salary', reducer: 'avg', }, age: { name: 'Age (avg)', field: 'age', reducer: 'avg', }, }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage' }, age: { field: 'age' }, salary: { field: 'salary', type: 'number', }, canDesign: { field: 'canDesign' }, country: { field: 'country' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; // make the row labels column (id: 'labels') be pinned const defaultColumnPinning: InfiniteTablePropColumnPinning = { // make the generated group columns pinned to start 'group-by-country': 'start', 'group-by-stack': 'start', }; // make all rows collapsed by default const groupRowsState = new GroupRowsState({ expandedRows: [], collapsedRows: true, }); export default function RemotePivotExample() { const groupBy: DataSourceGroupBy[] = React.useMemo( () => [ { field: 'country', column: { // give the group column for the country prop a custom id id: 'group-by-country', }, }, { field: 'stack', column: { // give the group column for the stack prop a custom id id: 'group-by-stack', }, }, ], [], ); const pivotBy: DataSourcePivotBy[] = React.useMemo( () => [ { field: 'preferredLanguage' }, { field: 'canDesign', // customize the column group columnGroup: ({ columnGroup }) => { return { ...columnGroup, header: `${ columnGroup.pivotGroupKey === 'yes' ? 'Designer' : 'Non-designer' }`, }; }, // customize columns generated under this column group column: ({ column }) => ({ ...column, header: `🎉 ${column.header}`, }), }, ], [], ); return ( primaryKey="id" data={dataSource} groupBy={groupBy} pivotBy={pivotBy} aggregationReducers={aggregationReducers} defaultGroupRowsState={groupRowsState} lazyLoad={true} > {({ pivotColumns, pivotColumnGroups }) => { return ( debugId="remote-pivoting-example" defaultColumnPinning={defaultColumnPinning} columns={columns} hideEmptyGroupColumns pivotColumns={pivotColumns} pivotColumnGroups={pivotColumnGroups} columnDefaultWidth={220} /> ); }} ); } ``` The [`groupRenderStrategy`](https://infinite-table.com/docs/reference/infinite-table-props.md#groupRenderStrategy) prop is applicable even to pivoted tables, but `groupRenderStrategy="inline"` is not supported in this case. ### Another pivoting example with batching Pivoting builds on the same data response as server-side grouping, but adds the pivot values for each group, as we already showed. Another difference is that in pivoting, no leaf rows are rendered or loaded, since this is pivoting and it only works with aggregated data. This means the `DataSource.data` function must always return the same format for the response data. Just like server-side grouping, server-side pivoting also supports batching - make sure you specify [lazyLoad.batchSize](https://infinite-table.com/docs/reference/datasource-props/index.md#lazyLoad). The example below also shows you how to customize the table rows while records are still loading. **Example: Server side pivoting with lazy loding batching** ```ts import { InfiniteTable, DataSource, GroupRowsState, } from '@infinite-table/infinite-react'; import type { DataSourceData, InfiniteTablePropColumns, DataSourceGroupBy, DataSourcePropAggregationReducers, DataSourcePivotBy, InfiniteTableColumn, InfiniteTablePropColumnPinning, InfiniteTablePropGroupColumn, } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const aggregationReducers: DataSourcePropAggregationReducers = { salary: { name: 'Salary (avg)', field: 'salary', reducer: 'avg', }, age: { name: 'Age (avg)', field: 'age', reducer: 'avg', }, }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage' }, age: { field: 'age' }, salary: { field: 'salary', type: 'number', }, canDesign: { field: 'canDesign' }, country: { field: 'country' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; const numberFormat = new Intl.NumberFormat(undefined, { style: 'currency', currency: 'USD', }); const groupRowsState = new GroupRowsState({ expandedRows: [], collapsedRows: true, }); const groupColumn: InfiniteTablePropGroupColumn = { id: 'group-col', // while loading, we can render a custom loading icon renderGroupIcon: ({ renderBag: { groupIcon }, data }) => !data ? '🤷‍' : groupIcon, // while we have no data, we can render a placeholder renderValue: ({ data, value }) => (!data ? ' Loading...' : value), }; const columnPinning: InfiniteTablePropColumnPinning = { 'group-col': 'start', }; const pivotColumnWithFormatter = ({ column, }: { column: InfiniteTableColumn; }) => { return { ...column, renderValue: ({ value }: { value: any }) => value ? numberFormat.format(value as number) : 0, }; }; export default function RemotePivotExample() { const groupBy: DataSourceGroupBy[] = React.useMemo( () => [ { field: 'country', }, { field: 'city' }, ], [], ); const pivotBy: DataSourcePivotBy[] = React.useMemo( () => [ { field: 'preferredLanguage', // for totals columns column: pivotColumnWithFormatter, }, { field: 'canDesign', columnGroup: ({ columnGroup }) => { return { ...columnGroup, header: columnGroup.pivotGroupKey === 'yes' ? 'Designer 💅' : 'Non-Designer 💻', }; }, column: pivotColumnWithFormatter, }, ], [], ); const lazyLoad = React.useMemo(() => ({ batchSize: 10 }), []); return ( primaryKey="id" data={dataSource} groupBy={groupBy} pivotBy={pivotBy.length ? pivotBy : undefined} aggregationReducers={aggregationReducers} defaultGroupRowsState={groupRowsState} lazyLoad={lazyLoad} > {({ pivotColumns, pivotColumnGroups }) => { return ( debugId="server-side-pivoting-with-lazy-load-batching-example" scrollStopDelay={10} columnPinning={columnPinning} columns={columns} groupColumn={groupColumn} groupRenderStrategy="single-column" columnDefaultWidth={220} pivotColumns={pivotColumns} pivotColumnGroups={pivotColumnGroups} /> ); }} ); } const dataSource: DataSourceData = ({ pivotBy, aggregationReducers, groupBy, lazyLoadStartIndex, lazyLoadBatchSize, groupKeys = [], sortInfo, }) => { if (sortInfo && !Array.isArray(sortInfo)) { sortInfo = [sortInfo]; } const startLimit: string[] = []; if (lazyLoadBatchSize && lazyLoadBatchSize > 0) { const start = lazyLoadStartIndex || 0; startLimit.push(`start=${start}`); startLimit.push(`limit=${lazyLoadBatchSize}`); } const args = [ ...startLimit, pivotBy ? 'pivotBy=' + JSON.stringify(pivotBy.map((p) => ({ field: p.field }))) : null, `groupKeys=${JSON.stringify(groupKeys)}`, groupBy ? 'groupBy=' + JSON.stringify(groupBy.map((p) => ({ field: p.field }))) : null, sortInfo ? 'sortInfo=' + JSON.stringify( sortInfo.map((s) => ({ field: s.field, dir: s.dir, })), ) : null, aggregationReducers ? 'reducers=' + JSON.stringify( Object.keys(aggregationReducers).map((key) => ({ field: aggregationReducers[key].field, id: key, name: aggregationReducers[key].reducer, })), ) : null, ] .filter(Boolean) .join('&'); return fetch( process.env.NEXT_PUBLIC_BASE_URL + `/developers30k-sql?` + args, ).then((r) => r.json()); }; ``` Here's another example, that assumes grouping by `country` and `city`, aggregations by `age` and `salary` (average values) and pivot by `preferredLanguage` and `canDesign` (a boolean property): ```tsx //request: groupKeys: [] // empty keys array, so it's a top-level group groupBy: [{"field":"country"},{"field":"city"}] reducers: [{"field":"salary","id":"avgSalary","name":"avg"},{"field":"age","id":"avgAge","name":"avg"}] lazyLoadStartIndex: 0 lazyLoadBatchSize: 10 pivotBy: [{"field":"preferredLanguage"},{"field":"canDesign"}] //response { cache: true, totalCount: 20, data: [ { data: {country: "Argentina"}, aggregations: {avgSalary: 20000, avgAge: 30}, keys: ["Argentina"], pivot: { totals: {avgSalary: 20000, avgAge: 30}, values: { Csharp: { totals: {avgSalary: 19000, avgAge: 29}, values: { no: {totals: {salary: 188897, age: 34}}, yes: {totals: {salary: 196000, age: 36}} } }, Go: { totals: {salary: 164509, age: 36}, values: { no: {totals: {salary: 189202, age: 37}}, yes: {totals: {salary: 143977, age: 35}} } }, Java: { totals: {salary: 124809, age: 32}, values: { no: {totals: {salary: 129202, age: 47}}, yes: {totals: {salary: 233977, age: 25}} } }, //... } } }, //... ] } ``` If we were to scroll down, the next batch of data would have the same structure as the previous one, but with `lazyLoadStartIndex` set to 10 (if `lazyLoad.batchSize = 10`). Now let's expand the first group and see how the request/response would look like: ```tsx //request: groupKeys: ["Argentina"] groupBy: [{"field":"country"},{"field":"city"}] reducers: [{"field":"salary","id":"avgSalary","name":"avg"},{"field":"age","id":"avgAge","name":"avg"}] lazyLoadStartIndex: 0 lazyLoadBatchSize: 10 pivotBy: [{"field":"preferredLanguage"},{"field":"canDesign"}] //response { mappings: { totals: "totals", values: "values" }, cache: true, totalCount: 20, data: [ { data: {country: "Argentina", city: "Buenos Aires"}, aggregations: {avgSalary: 20000, avgAge: 30}, keys: ["Argentina", "Buenos Aires"], pivot: { totals: {avgSalary: 20000, avgAge: 30}, values: { Csharp: { totals: {avgSalary: 39000, avgAge: 29}, values: { no: {totals: {salary: 208897, age: 34}}, yes: {totals: {salary: 296000, age: 36}} } }, Go: { totals: {salary: 164509, age: 36}, values: { no: {totals: {salary: 189202, age: 37}}, yes: {totals: {salary: 143977, age: 35}} } }, Java: { totals: {salary: 124809, age: 32}, values: { no: {totals: {salary: 129202, age: 47}}, yes: {totals: {salary: 233977, age: 25}} } }, //... } } }, //... ] } ``` The response can contain a `mappings` key with values for `totals` and `values` keys - this can be useful for making the server-side pivot response lighter. If `mappings` would be `{totals: "t", values: "v"}`, the response would look like this: ```tsx { totalCount: 20, data: {...}, pivot: { t: {avgSalary: 10000, avgAge: 30}, v: { Go: { t: {...}, v: {...} }, Java: { t: {...}, v: {...} } } } ``` More-over, you can also give aggregationReducers shorter keys to make the server response even more compact ```tsx const aggregationReducers: DataSourcePropAggregationReducers = { s: { name: 'Salary (avg)', field: 'salary', reducer: 'avg', }, a: { name: 'Age (avg)', field: 'age', reducer: 'avg', }, }; // pivot response { totalCount: 20, data: {...}, pivot: { t: {s: 10000, a: 30}, v: { Go: { t: { s: 10000, a: 30 }, v: {...} }, Java: { t: {...}, v: {...} } } } ``` Adding a `cache: true` key to the resolved object in the `DataSource.data` call will cache the value for the expanded group, so that when collaped and expanded again, the cached value will be used, and no new call is made to the `DataSource.data` function. This is applicable for both pivoted and/or grouped data. Not passing `cache: true` will make the function call each time the group is expanded. --- # Keyboard Shorcuts > Infinite React DataGrid supports user-friendly keyboard shortcuts for executing custom actions. Canonical page: https://infinite-table.com/docs/learn/keyboard-navigation/keyboard-shortcuts The React DataGrid supports defining [keyboard shorcuts](https://infinite-table.com/docs/reference/infinite-table-props.md#keyboardShortcuts) for performing custom actions. A keyboard shortcut is defined as an object of the following shape: ```ts { key: string; when?: (context) => boolean | Promise; handler: (context, event) => void | Promise; } ``` The `key` definition is what you're used to from VS Code and other applications - it can be * a single character: `t`, `x`, etc... * a combination of characters (e.g. `Ctrl+Shift+p`,`Cmd+Shift+Enter`) - key modifiers are supported, and can be added with the `+` (plus) sign. * or a special key (e.g. `Enter`, `ArrowUp`, `ArrowDown`, ` ` (space), `Escape`, `Delete`, `Insert`, `PageDown`,`PageUp`,`F1`, `F2`, etc). Examples of valid shortcuts: `Cmd+Shift+e`, `Alt+Shift+Enter`, `Shift+PageDown`, `Ctrl+x` There's a special key `*` that matches any key. This can be useful when you want to define a keyboard shortcut that should be triggered on any key press. Another important key is the `Cmd|Ctrl` key, which matches both the `Cmd` key on Mac and the `Ctrl` key on Windows/Linux. Example combinations: `Cmd|Ctrl+Shift+Enter`, `Cmd|Ctrl+e`, `Cmd|Ctrl+Shift+i`. **Example** Click on a cell and use the keyboard to navigate. Press `Shift+Enter` to show an alert with the current active cell position. ```ts import { InfiniteTable, DataSource, DataSourceData, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage', header: 'Language' }, country: { field: 'country', header: 'Country' }, salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; export default function KeyboardShortcuts() { return ( <> primaryKey="id" data={dataSource}> debugId="keyboard-shortcuts-initial-example" columns={columns} keyboardShortcuts={[ { key: 'Shift+Enter', when: (context) => !!context.getState().activeCellIndex, handler: (context) => { const { activeCellIndex } = context.getState(); const [rowIndex, columnIndex] = activeCellIndex!; alert( `Current active cell: row ${rowIndex}, column ${columnIndex}.`, ); }, }, { key: 'PageUp', handler: () => { console.log('PageUp key pressed.'); }, }, { key: 'PageDown', handler: () => { console.log('PageDown key pressed.'); }, }, ]} /> ); } ``` Keyboard shortcuts have a `when` optional property. If defined, it restricts when the `handler` function is called. The handler will only be called when the handler returns `true`. ## Implementing Keyboard Shortcut Handlers Both the `handler` function and the `when` function of a keyboard shorcut are called with an object that gives access to the following: - `api` - a reference to the [Infinite Table API](https://infinite-table.com/docs/reference/api/index.md) object. - `dataSourceApi` - a reference to the [DataSource API](https://infinite-table.com/docs/reference/datasource-api/index.md) object. - `getState` - a function that returns the current state of the grid. - `getDataSourceState` - a function that returns the current state of the data source. The second parameter of the `handler` function is the `event` object that triggered the keyboard shortcut. ## Predefined Keyboard Shortcuts Infinite Table DataGrid comes with some predefined keyboard shorcuts. you can import from the `keyboardShortcuts` named export. ```ts import { keyboardShortcuts } from '@infinite-table/infinite-react' ``` ### Instant Edit ```ts {4,12} import { DataSource, InfiniteTable, keyboardShortcuts } from '@infinite-table/infinite-react'; function App() { return primaryKey="id" data={dataSource}> columns={columns} keyboardShortcuts={[ keyboardShortcuts.instantEdit ]} /> } ``` For now, the only predefined keyboard shorcut is `keyboardShortcuts.instantEdit`. This keyboard shorcut starts cell editing when any key is pressed on the active cell. This is the same behavior found in Excel/Google Sheets. **Example** Click on a cell and then start typing to edit the cell. ```ts import { InfiniteTable, DataSource, DataSourceData, keyboardShortcuts, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage', header: 'Language' }, country: { field: 'country', header: 'Country' }, salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id', defaultEditable: false }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; export default function KeyboardShortcuts() { return ( <> primaryKey="id" data={dataSource}> debugId="keyboard-shortcuts-instant-edit-example" columns={columns} columnDefaultEditable keyboardShortcuts={[keyboardShortcuts.instantEdit]} /> ); } ``` --- # Keyboard Navigation for Table Cells > Documentation for Cell Keyboard Navigation for your React Infinite Table DataGrid component Canonical page: https://infinite-table.com/docs/learn/keyboard-navigation/navigating-cells By default, [keyboard navigation](https://infinite-table.com/docs/reference/infinite-table-props.md#keyboardNavigation) for table cells is enabled in React Infinite Table. When a cell is clicked, it shows a highlight that indicates it is the currently active cell. From that point onwards, the user can use the keyboard to navigate the table cells. **Example** Click on a cell in the table and use the arrow keys to navigate around. ```ts import { InfiniteTable, DataSource, DataSourceData, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage' }, country: { field: 'country' }, salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; export default function KeyboardNavigationForCells() { return ( <> primaryKey="id" data={dataSource}> debugId="navigating-cells-initial-example" // keyboardNavigation="cell" is the default, so no need to specify it columns={columns} /> ); } ``` - Use `ArrowUp` and `ArrowDown` to navigate to the previous and next cells vertically. - Use `ArrowLeft` and `ArrowRight` to navigate to the previous and next cells horizontally. --- - Use `PageUp` and `PageDown` to navigate the cells vertically by pages (a page is considered equal to the visible row count). - Use `Shift+PageUp` and `Shift+PageDown` to navigate the cells horizontally by pages (a page is considered equal to the visible column count). --- - Use `Home` and `End` to navigate vertically to the cell above (that's on the first row) and the cell below (that's on the last row), - Use `Shift+Home` and `Shift+End` to navigate horizontally to the first and respectively last cell in the current row. [Watch video](https://www.youtube.com/watch?v=D4_jFYkfsUI) Keyboard navigation is controlled by the [`keyboardNavigation`](https://infinite-table.com/docs/reference/infinite-table-props.md#keyboardNavigation) prop, which can be either `"cell"`, `"row"` or `false`. Navigating table cells is the default behavior. ## Using a default active cell You can also specify an initial active cell, by using [defaultActiveCellIndex=[2,4]](https://infinite-table.com/docs/reference/infinite-table-props.md#defaultActiveCellIndex). This tells the table that there should be a default active cell, namely the one at index 2,4 (row 2, so third row; column 4, so fifth column). The active cell should be an array of length 2, where the first number is the index of the row and the second number is the index of the column (both are zero-based). **Example** This example starts with cell `[2,0]` already active. ```ts import { InfiniteTable, DataSource, DataSourceData, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage' }, country: { field: 'country' }, salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; export default function KeyboardNavigationForCells() { return ( <> primaryKey="id" data={dataSource}> debugId="navigating-cells-uncontrolled-example" defaultActiveCellIndex={[2, 0]} columns={columns} /> ); } ``` ## Listening to active cell changes You can easily listen to changes in the cell navigation by using the [onActiveCellIndexChange](https://infinite-table.com/docs/reference/infinite-table-props.md#onActiveCellIndexChange) callback. When you use controlled [`activeCellIndex`](https://infinite-table.com/docs/reference/infinite-table-props.md#activeCellIndex), make sure to use [onActiveCellIndexChange](https://infinite-table.com/docs/reference/infinite-table-props.md#onActiveCellIndexChange) to update the prop value, as otherwise the component will not update on navigation **Example** This example starts with cell `[2,0]` already active and uses [onActiveCellIndexChange](https://infinite-table.com/docs/reference/infinite-table-props.md#onActiveCellIndexChange) to update [`activeCellIndex`](https://infinite-table.com/docs/reference/infinite-table-props.md#activeCellIndex). ```ts import { InfiniteTable, DataSource, DataSourceData, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = () => { return fetch( 'https://infinite-table.com/.netlify/functions/json-server' + `/developers1k-sql?`, ) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage' }, country: { field: 'country' }, salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; export default function KeyboardNavigationForCells() { const [activeCellIndex, setActiveCellIndex] = React.useState< [number, number] >([2, 0]); return ( <>

Current active cell: {activeCellIndex[0]}, {activeCellIndex[1]}.

primaryKey="id" data={dataSource}> debugId="navigating-cells-controlled-example" activeCellIndex={activeCellIndex} onActiveCellIndexChange={setActiveCellIndex} columns={columns} /> ); } ``` ## Toggling group rows When the DataSource is [grouped](https://infinite-table.com/docs/reference/datasource-props/index.md#groupBy), you can use the keyboard to collapse/expand group rows, by pressing the `Enter` key on the active row. Your active cell doesn't need to be in the group column in order for `Enter` key to collapse/expand the group row - being on a group row is enough. **Example** Press the `Enter` key on the active group row to toggle it. ```ts import { InfiniteTable, DataSource } from '@infinite-table/infinite-react'; import type { DataSourceProps, InfiniteTableProps, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; import * as React from 'react'; const columns: InfiniteTablePropColumns = { country: { field: 'country', }, firstName: { field: 'firstName', defaultHiddenWhenGroupedBy: '*', }, stack: { field: 'stack', }, age: { field: 'age' }, id: { field: 'id' }, preferredLanguage: { field: 'preferredLanguage', }, canDesign: { field: 'canDesign', }, }; const defaultGroupBy: DataSourceProps['groupBy'] = [ { field: 'canDesign', }, { field: 'stack', }, { field: 'preferredLanguage', }, ]; const groupColumn: InfiniteTableProps['groupColumn'] = { field: 'firstName', defaultWidth: 300, }; const domProps = { style: { flex: 1, minHeight: 500, }, }; export default function App() { return ( data={dataSource} groupBy={defaultGroupBy} primaryKey="id" > debugId="keyboard-toggle-group-rows-cell-nav" columns={columns} domProps={domProps} keyboardNavigation="cell" hideColumnWhenGrouped groupColumn={groupColumn} columnDefaultWidth={150} /> ); } const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers100') .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; }; ``` ## Selecting Rows with the Keyboard When [`rowSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#rowSelection) is enabled (read more about it in the [row selection page](../selection/row-selection)), you can use the spacebar key to select a group row (or `shift` + spacebar to do multiple selection). By default [`keyboardSelection`](https://infinite-table.com/docs/reference/infinite-table-props.md#keyboardSelection) is enabled, so you can use the **spacebar** key to select multiple rows, when [selectionMode="multi-row"](https://infinite-table.com/docs/reference/datasource-props/index.md#selectionMode). Using the spacebar key is equivalent to doing a mouse click, so expect the combination of **spacebar** + `cmd`/`ctrl`/`shift` modifier keys to behave just like clicking + the same modifier keys. **Example: Multi row selection with keyboard support** Use spacebar + optional `cmd`/`ctrl`/`shift` modifier keys just like you would do clicking + the same modifier keys. ```ts import { InfiniteTable, DataSource } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; import { useState } from 'react'; const columns: InfiniteTablePropColumns = { country: { field: 'country', }, firstName: { field: 'firstName', }, stack: { field: 'stack', }, age: { field: 'age' }, id: { field: 'id' }, salary: { field: 'salary', type: 'number', }, canDesign: { field: 'canDesign' }, }; export default function App() { const [keyboardSelection, setKeyboardSelection] = useState(true); return ( <>

Keyboard selection is now{' '} {keyboardSelection ? 'enabled' : 'disabled'}.

Select color{' '}

primaryKey="id" data={dataSource}> debugId="navigating-cells-theming-example" defaultActiveCellIndex={[5, 0]} domProps={domProps} columns={columns} /> ); } ``` --- # Keyboard Navigation for Table Rows Canonical page: https://infinite-table.com/docs/learn/keyboard-navigation/navigating-rows To enable keyboard navigation for table rows, specify [keyboardNavigation="row"](https://infinite-table.com/docs/reference/infinite-table-props.md#keyboardNavigation) in your React Infinite Table component. When row navigation is enabled, clicking a row highlights it and the user can use the arrow keys to navigate the table rows. **Example** Click on the table and use the arrow keys to navigate the rows. ```ts import { InfiniteTable, DataSource, DataSourceData, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = () => { return fetch( 'https://infinite-table.com/.netlify/functions/json-server' + `/developers1k-sql?`, ) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage' }, country: { field: 'country' }, salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; export default function KeyboardNavigationForCells() { return ( <> primaryKey="id" data={dataSource}> debugId="navigating-rows-initial-example" keyboardNavigation="row" columns={columns} /> ); } ``` - Use `ArrowUp` and `ArrowDown` to navigate to the previous and next row. - Use `PageUp` and `PageDown` to navigate the rows vertically by pages (a page is considered equal to the visible row count). - Use `Home` and `End` to navigate vertically to the first and last row respectively Other possible values for the [`keyboardNavigation`](https://infinite-table.com/docs/reference/infinite-table-props.md#keyboardNavigation) prop, besides `"row"`, are `"cell"` and `false`. ## Using a default active row You can also specify an initial active row, by using [defaultActiveRowIndex=2](https://infinite-table.com/docs/reference/infinite-table-props.md#defaultActiveRowIndex). This tells the table that there should be a default active row, namely the one at index 2 (so the third row). **Example** This example starts with row at index `2` already active. ```ts import { InfiniteTable, DataSource, DataSourceData, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage' }, country: { field: 'country' }, salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; const domProps = { style: { height: '90vh' } }; export default function KeyboardNavigationForRows() { return ( <> primaryKey="id" data={dataSource}> debugId="navigating-rows-uncontrolled-example" domProps={domProps} columns={columns} keyboardNavigation="row" defaultActiveRowIndex={2} /> ); } ``` ## Listening to active row changes You can easily listen to changes in the row navigation by using the [`onActiveRowIndexChange`](https://infinite-table.com/docs/reference/infinite-table-props.md#onActiveRowIndexChange) callback. When you use controlled [`activeRowIndex`](https://infinite-table.com/docs/reference/infinite-table-props.md#activeRowIndex), make sure to use [onActiveRowIndexChange](https://infinite-table.com/docs/reference/infinite-table-props.md#onActiveRowIndexChange) to update the prop value, as otherwise the component will not update on navigation **Example** This example starts with row at index `2` already active and uses [onActiveRowIndexChange](https://infinite-table.com/docs/reference/infinite-table-props.md#onActiveRowIndexChange) to update [`activeRowIndex`](https://infinite-table.com/docs/reference/infinite-table-props.md#activeRowIndex). ```ts import { InfiniteTable, DataSource, DataSourceData, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = () => { return fetch( 'https://infinite-table.com/.netlify/functions/json-server' + `/developers1k-sql?`, ) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage' }, country: { field: 'country' }, salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; export default function KeyboardNavigationForRows() { const [activeRowIndex, setActiveRowIndex] = React.useState(2); return ( <>

Current active row: {activeRowIndex}.

primaryKey="id" data={dataSource}> debugId="navigating-rows-controlled-example" keyboardNavigation="row" activeRowIndex={activeRowIndex} onActiveRowIndexChange={setActiveRowIndex} columns={columns} /> ); } ``` ## Toggling group rows When the DataSource is [grouped](https://infinite-table.com/docs/reference/datasource-props/index.md#groupBy), you can use the keyboard to collapse/expand group rows, by pressing the `Enter` key on the active row. Since you're in row navigation mode, you can also use - `←` to collapse a group row - `→` to expand a group row **Example** Press the `Enter` key on the active group row to toggle it. `ArrowLeft` will collapse a group row and `ArrowRight` will expand a group row. ```ts import { InfiniteTable, DataSource } from '@infinite-table/infinite-react'; import type { DataSourceProps, InfiniteTableProps, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; import * as React from 'react'; const columns: InfiniteTablePropColumns = { country: { field: 'country', }, firstName: { field: 'firstName', defaultHiddenWhenGroupedBy: '*', }, stack: { field: 'stack', }, age: { field: 'age' }, id: { field: 'id' }, preferredLanguage: { field: 'preferredLanguage', }, canDesign: { field: 'canDesign', }, }; const defaultGroupBy: DataSourceProps['groupBy'] = [ { field: 'canDesign', }, { field: 'stack', }, { field: 'preferredLanguage', }, ]; const groupColumn: InfiniteTableProps['groupColumn'] = { field: 'firstName', defaultWidth: 300, }; const domProps = { style: { flex: 1, minHeight: 500, }, }; export default function App() { return ( data={dataSource} groupBy={defaultGroupBy} primaryKey="id" > debugId="keyboard-toggle-group-rows" columns={columns} domProps={domProps} keyboardNavigation="row" hideColumnWhenGrouped groupColumn={groupColumn} columnDefaultWidth={150} /> ); } const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers100') .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; }; ``` ## Selecting Rows with the Keyboard When [`rowSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#rowSelection) is enabled (read more about it in the [row selection page](../selection/row-selection)), you can use the spacebar key to select a group row (or `shift` + spacebar to do multiple selection). By default [`keyboardSelection`](https://infinite-table.com/docs/reference/infinite-table-props.md#keyboardSelection) is enabled, so you can use the **spacebar** key to select multiple rows, when [selectionMode="multi-row"](https://infinite-table.com/docs/reference/datasource-props/index.md#selectionMode). Using the spacebar key is equivalent to doing a mouse click, so expect the combination of **spacebar** + `cmd`/`ctrl`/`shift` modifier keys to behave just like clicking + the same modifier keys. **Example: Multi row selection with keyboard support** Use spacebar + optional `cmd`/`ctrl`/`shift` modifier keys just like you would do clicking + the same modifier keys. ```ts import { InfiniteTable, DataSource } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; import { useState } from 'react'; const columns: InfiniteTablePropColumns = { country: { field: 'country', }, firstName: { field: 'firstName', }, stack: { field: 'stack', }, age: { field: 'age' }, id: { field: 'id' }, salary: { field: 'salary', type: 'number', }, canDesign: { field: 'canDesign' }, }; export default function App() { const [keyboardSelection, setKeyboardSelection] = useState(true); return ( <>

Keyboard selection is now{' '} {keyboardSelection ? 'enabled' : 'disabled'}.

data={dataSource} selectionMode="multi-row" primaryKey="id" > debugId="default-selection-mode-multi-row-keyboard-toggle-example-row-navigation" keyboardNavigation="row" keyboardSelection={keyboardSelection} columns={columns} columnDefaultWidth={150} /> ); } const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers100') .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; }; ``` For selection all the rows in the table, you can use `cmd`/`ctrl` + `A` keyboard shortcut. Keyboard selection is also possible when there's a column configured with checkbox selection - [make sure you read more about it](../selection/row-selection#using-a-selection-checkbox). ## Theming By default, the style of the element that highlights the active row is the same style as that of the element that highlights the active cell. The easiest is to override the style is via those three CSS variables: - `--infinite-active-cell-border-color--r` - the `red` component of the border color - `--infinite-active-cell-border-color--g` - the `green` component of the border color - `--infinite-active-cell-border-color--b` - the `blue` component of the border color The initial values for those are `77`, `149` and`215` respectively, so the border color is `rgb(77, 149, 215)`. In addition, the background color of the element that highlights the active row is set to the same color as the border color (computed based on the above `r`, `g` and `b` variables), but with an opacity of `0.25`, configured via the `--infinite-active-row-background-alpha` CSS variable. When the table is not focused, the opacity for the background color is set to `0.1`, which is the default value of the `--infinite-active-row-background-alpha--table-unfocused` CSS variable. To summarize, use - `--infinite-active-cell-border-color--r` - `--infinite-active-cell-border-color--g` - `--infinite-active-cell-border-color--b` to control border and background color of the active row highlight element. No, it's not a mistake that the element that highlights the active row is configured via the same CSS variables as the element that highlights the active cell. This is deliberate - so override CSS variables for cell, and those are propagated to the row highlight element. There are other CSS variables as well, that give you fined-tuned control over both the border and background color for the active row, if you don't want to use the above three variables to propagate the same color across both border and background. - `--infinite-active-cell-background` - the background color. If you use this, you need to set opacity yourself. Applied for both cell and row. - `--infinite-active-row-background` - the background color. If you use this, you need to set opacity yourself. If this is specified, it takes precendence over `--infinite-active-cell-background` - `--infinite-active-cell-background` - the background color. If you use this, you need to set opacity yourself. Applied for both cell and row. - `--infinite-active-row-background` - the background color. If this is specified, it takes precedence over `--infinite-active-cell-background` - `--infinite-active-row-border` - border configuration (eg:`2px solid magenta`). If you use this, it will not be propagated to the background color. For more details on the CSS variables, see the [CSS Variables documentation](../theming/css-variables##active-row-background). **Example: Theming active row highlight** Use the color picker to configured the desired color for the active row highlight ```ts import { InfiniteTable, DataSource, DataSourceData, debounce, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; import { useState } from 'react'; import { useMemo } from 'react'; import { HTMLProps } from 'react'; import { ChangeEvent } from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage' }, country: { field: 'country' }, salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; const rgb = { r: 77, g: 149, b: 215, }; const defaultColor = `#${rgb.r.toString(16)}${rgb.g.toString( 16, )}${rgb.b.toString(16)}`; export default function KeyboardNavigationForRows() { const [color, setColor] = useState({ ...rgb, }); const domProps = useMemo(() => { return { style: { '--infinite-active-cell-border-color--r': color.r, '--infinite-active-cell-border-color--g': color.g, '--infinite-active-cell-border-color--b': color.b, // for the same of the example being more obvious, // make the opacity of the unfocused table same as the one used on focus '--infinite-active-cell-background-alpha--table-unfocused': '0.25', // but this defaults to 0.1 }, } as HTMLProps; }, [color]); const onChange = useMemo(() => { const onColorChange = (event: ChangeEvent) => { const color = event.target.value; const r = parseInt(color.substr(1, 2), 16); const g = parseInt(color.substr(3, 2), 16); const b = parseInt(color.substr(5, 2), 16); setColor({ r, g, b, }); }; return debounce(onColorChange, { wait: 200 }); }, []); return ( <>

Select color{' '}

primaryKey="id" data={dataSource}> debugId="navigating-rows-theming-example" keyboardNavigation="row" defaultActiveRowIndex={7} domProps={domProps} columns={columns} /> ); } ``` --- # Master Detail - Caching Detail DataGrid > Learn how to use master-detail with caching for a better user-experience Canonical page: https://infinite-table.com/docs/learn/master-detail/caching-detail-datagrid By far the most common scenario will be to render another DataGrid in the detail row. For such cases we offer a caching mechanism that will keep the state of the detail DataGrid when the user collapses and then expands the row again. The most important part of the state of detail DataGrid that will be cached is the data-related. More specifically, when cached, the detail `` will get its data from the cache and will not call the [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) function when mounted. Other persisted parts of the state are the sorting, filtering and grouping information. To enable caching, use the [`rowDetailCache`](https://infinite-table.com/docs/reference/infinite-table-props.md#rowDetailCache) prop. It can be one of the following: - `false` - caching is disabled - this is the default - `true` - enables caching for all detail DataGrids - `number` - the maximum number of detail DataGrids to keep in the cache. When the limit is reached, the oldest detail DataGrid will be removed from the cache. **Example: Master detail DataGrid with caching for 5 detail DataGrids** This example will cache the last 5 detail DataGrids - meaning they won't reload when you expand them again. You can try collapsing a row and then expanding it again to see the caching in action - it won't reload the data. But when you open up a row that hasn't been opened before, it will load the data from the remote location. ```ts file=master-detail-caching-with-default-expanded-example.page.tsx ``` --- # Master Detail - Collapsing and Expanding Rows > Learn how to use master-detail and configure the state of the row details as expanded or collapsed Canonical page: https://infinite-table.com/docs/learn/master-detail/collapsing-and-expanding-rows You can control the collapsed/expanded state of rows in the master-detail configuration. By default, all row details are collapsed. You can very easily change this by using the [`defaultRowDetailState`](https://infinite-table.com/docs/reference/infinite-table-props.md#defaultRowDetailState) prop. ```tsx title="Specyfing the default row detail state" {8} const defaultRowDetailState = { collapsedRows: true, expandedRows: [39, 54], }; ``` **Example: Master detail DataGrid with some row details expanded by default** Some of the rows in the master DataGrid are expanded by default. Also, we have a default sort defined, by the `country` and `city` columns. ```ts import * as React from 'react'; import { DataSourceData, InfiniteTable, InfiniteTablePropColumns, DataSource, InfiniteTableRowInfo, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; lastName: string; city: string; currency: string; country: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; salary: number; }; type City = { id: number; name: string; country: string; }; const masterColumns: InfiniteTablePropColumns = { id: { field: 'id', header: 'ID', defaultWidth: 70, renderRowDetailIcon: true, }, country: { field: 'country', header: 'Country' }, city: { field: 'name', header: 'City', defaultFlex: 1 }, }; const detailColumns: InfiniteTablePropColumns = { firstName: { field: 'firstName', header: 'First Name', }, salary: { field: 'salary', type: 'number', }, stack: { field: 'stack' }, currency: { field: 'currency' }, city: { field: 'city' }, }; const domProps = { style: { height: '100%', }, }; const shouldReloadData = { sortInfo: true, filterValue: true, }; function renderDetail(rowInfo: InfiniteTableRowInfo) { console.log('rendering detail for master row', rowInfo.id); return ( data={detailDataSource} primaryKey="id" shouldReloadData={shouldReloadData} > debugId="master-detail-default-expanded-example" columnDefaultWidth={150} columnMinWidth={50} columns={detailColumns} /> ); } const defaultRowDetailState = { collapsedRows: true as const, expandedRows: [39, 54], }; export default () => { return ( <> data={citiesDataSource} primaryKey="id" defaultSortInfo={[ { field: 'country', dir: 1, }, { field: 'name', dir: 1, }, ]} > debugId="master-detail-default-expanded-example-2" domProps={domProps} columnDefaultWidth={150} defaultRowDetailState={defaultRowDetailState} columnMinWidth={50} columns={masterColumns} rowDetailHeight={200} rowDetailRenderer={renderDetail} /> ); }; // fetch an array of cities from the server const citiesDataSource: DataSourceData = () => { const cityNames = new Set(); const result: City[] = []; return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql`) .then((response) => response.json()) .then((response) => { response.data.forEach((data: Developer) => { if (cityNames.has(data.city)) { return; } cityNames.add(data.city); result.push({ name: data.city, country: data.country, id: result.length, }); }); return result; }); }; const detailDataSource: DataSourceData = ({ filterValue, sortInfo, masterRowInfo, }) => { if (sortInfo && !Array.isArray(sortInfo)) { sortInfo = [sortInfo]; } if (!filterValue) { filterValue = []; } if (masterRowInfo) { // filter by master country and city filterValue = [ { field: 'city', filter: { operator: 'eq', type: 'string', value: masterRowInfo.data.name, }, }, { field: 'country', filter: { operator: 'eq', type: 'string', value: masterRowInfo.data.country, }, }, ...filterValue, ]; } const args = [ sortInfo ? 'sortInfo=' + JSON.stringify( sortInfo.map((s) => ({ field: s.field, dir: s.dir, })), ) : null, filterValue ? 'filterBy=' + JSON.stringify( filterValue.map(({ field, filter }) => { return { field: field, operator: filter.operator, value: filter.type === 'number' ? Number(filter.value) : filter.value, }; }), ) : null, ] .filter(Boolean) .join('&'); return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?` + args) .then((r) => r.json()) .then((data: Developer[]) => data); }; ``` ## Understanding and defining the collapse/expand state for row details When you want to specify a different collapse/expand state of the row details (since by default they are all collapsed, and you might want to expand some of them), you need to use the [`defaultRowDetailState`](https://infinite-table.com/docs/reference/infinite-table-props.md#defaultRowDetailState) prop, or its controlled counterpart - the [`rowDetailState`](https://infinite-table.com/docs/reference/infinite-table-props.md#rowDetailState) prop. The [row detail state](https://infinite-table.com/docs/reference/type-definitions/index.md#RowDetailState) can be defined in two ways: - either specify `collapsedRows: true` (which means all rows are collapsed by default) and specify an array of `expandedRows`, which will contain the ids of the rows that should be rendered as expanded. ```tsx const defaultRowDetailState = { collapsedRows: true, expandedRows: ['id-1', 'id-2', 'id-56'], }; ``` - or specify `expandedRows: true` (which means all rows are expanded by default) and specify an array of `collapsedRows`, which will contain the ids of the rows that should be rendered as collapsed. ```tsx const rowDetailState = { expandedRows: true, collapsedRows: ['id-1', 'id-2', 'id-56'], }; ``` You can pass these objects into either the [`defaultRowDetailState`](https://infinite-table.com/docs/reference/infinite-table-props.md#defaultRowDetailState) (uncontrolled) or the [`rowDetailState`](https://infinite-table.com/docs/reference/infinite-table-props.md#rowDetailState) (controlled). If you're using the controlled [`rowDetailState`](https://infinite-table.com/docs/reference/infinite-table-props.md#rowDetailState) prop, you'll need to respond to user interaction by listening to [`onRowDetailStateChange`](https://infinite-table.com/docs/reference/infinite-table-props.md#onRowDetailStateChange) and updating the value of [`rowDetailState`](https://infinite-table.com/docs/reference/infinite-table-props.md#rowDetailState) accordingly. As an alternative to using the object literals as specified above, you can import the `RowDetailState` class from `@infinite-table/infinite-react` and use it to define the state of the row details. You can pass instances of `RowDetailState` into the [`defaultRowDetailState`](https://infinite-table.com/docs/reference/infinite-table-props.md#defaultRowDetailState) or [`rowDetailState`](https://infinite-table.com/docs/reference/infinite-table-props.md#rowDetailState) props. ```tsx title="Passing an instance of RowDetailState to the InfiniteTable" import { RowDetailState } from '@infinite-table/infinite-react'; const rowDetailState = new RowDetailState({ collapsedRows: true, expandedRows: [2, 3, 4], }); rowDetailState={rowDetailState} />; ``` ```tsx title="Passing an object literal to the InfiniteTable" rowDetailState={{ collapsedRows: true, expandedRows: [2, 3, 4], }} /> ``` See our type definitions for [more details on row detail state](https://infinite-table.com/docs/reference/type-definitions/index.md#RowDetailState). **Example: Master detail DataGrid with listener for row expand/collapse** Some of the rows in the master DataGrid are expanded by default. We use the controlled [`rowDetailState`](https://infinite-table.com/docs/reference/infinite-table-props.md#rowDetailState) prop to manage the state of the row details and update it by using [`onRowDetailStateChange`](https://infinite-table.com/docs/reference/infinite-table-props.md#onRowDetailStateChange). ```ts file=master-detail-controlled-expanded-enhanced-example.page.tsx ``` ## Listening to row detail state changes In order to be notified when the collapse/expand state of row details changes, you can use the [`onRowDetailStateChange`](https://infinite-table.com/docs/reference/infinite-table-props.md#onRowDetailStateChange) prop. This function is called with only one argument - the new [`rowDetailState`](https://infinite-table.com/docs/reference/infinite-table-props.md#rowDetailState). Please note this is an instance of [`RowDetailState`](https://infinite-table.com/docs/reference/type-definitions/index.md#RowDetailState). If you want to use the object literal, make sure you call `getState()` on the instance of `RowDetailState`. ```tsx title="Using the onRowDetailStateChange listener" {11} function App() { const [rowDetailState, setRowDetailState] = React.useState({ collapsedRows: true as const, expandedRows: [39, 54], }); return {...}> rowDetailState={rowDetailState} onRowDetailStateChange={(rowDetailStateInstance) => { setRowDetailState(rowDetailStateInstance.getState()); }} columnMinWidth={50} columns={masterColumns} rowDetailHeight={200} rowDetailRenderer={renderDetail} /> } ``` When using the controlled [`rowDetailState`](https://infinite-table.com/docs/reference/infinite-table-props.md#rowDetailState), you'll need to respond to the user interaction by using the [`onRowDetailStateChange`](https://infinite-table.com/docs/reference/infinite-table-props.md#onRowDetailStateChange) listener, in order to update the controlled [`rowDetailState`](https://infinite-table.com/docs/reference/infinite-table-props.md#rowDetailState). This allows you to manage the state of the row details yourself - making it easy to expand/collapse all rows, or to expand/collapse a specific row by simply updating the value of the [`rowDetailState`](https://infinite-table.com/docs/reference/infinite-table-props.md#rowDetailState) prop. ```tsx const [rowDetailState, setRowDetailState] = React.useState({ collapsedRows: true, expandedRows: [39, 54], }); const expandAll = () => { setRowDetailState({ collapsedRows: [], expandedRows: true, }); }; const collapseAll = () => { setRowDetailState({ collapsedRows: true, expandedRows: [], }); }; return ( <> rowDetailState={rowDetailState} /> ); ``` If you prefer the more imperative approach, you can still use the [Row Detail API](https://infinite-table.com/docs/reference/row-detail-api/index.md) to [expand](https://infinite-table.com/docs/reference/row-detail-api/index.md#expandRowDetail) or [collapse](https://infinite-table.com/docs/reference/row-detail-api/index.md#collapseRowDetail) details for rows. ## Single row expand Using the controlled [`rowDetailState`](https://infinite-table.com/docs/reference/infinite-table-props.md#rowDetailState) prop is very powerful - it allows you to configure the expand state to only allow one row to be expanded at a time, if that's something you need. This means that if any other row(s) are expanded and you expand a new row, the previously expanded rows will all be collapsed. **Example: Master detail only one row expanded at a time** In this demo we allow only one row to be expanded at any given time. We use the controlled [`rowDetailState`](https://infinite-table.com/docs/reference/infinite-table-props.md#rowDetailState) prop to manage the state of the row details and update it by using [`onRowDetailStateChange`](https://infinite-table.com/docs/reference/infinite-table-props.md#onRowDetailStateChange). ```ts file=master-detail-one-expanded-row-example.page.tsx ``` --- # Master Detail with Custom Row Detail Contents > Learn how to use master-detail to customise your row detail contents Canonical page: https://infinite-table.com/docs/learn/master-detail/custom-row-detail-content The Infinite Table React DataGrid allows you to render any valid JSX nodes as row details. You can render a DataGrid directly or you can nest the DataGrid at any level of nesting inside the row details. Or you can simply choose to render anything else - no DataGrid required. ## Rendering a detail DataGrid Your row detail content can include another Infinite Table DataGrid. The DataGrid you're rendering inside the row detail doesn't need to be the return value of the [`rowDetailRenderer`](https://infinite-table.com/docs/reference/infinite-table-props.md#rowDetailRenderer) function - it can be nested inside other valid JSX nodes you return from the function. **Example: Master detail with custom content & DataGrid** In this example, the row detail contains custom content, along with another Infinite Table DataGrid. You can nest a child DataGrid inside the row details at any level of nesting. ```ts import * as React from 'react'; import { DataSourceData, InfiniteTable, InfiniteTablePropColumns, DataSource, InfiniteTableRowInfo, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; lastName: string; city: string; currency: string; country: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; salary: number; }; type City = { id: number; name: string; country: string; }; const masterColumns: InfiniteTablePropColumns = { id: { field: 'id', header: 'ID', defaultWidth: 70, renderRowDetailIcon: true, }, country: { field: 'country', header: 'Country' }, city: { field: 'name', header: 'City', defaultFlex: 1 }, }; const detailColumns: InfiniteTablePropColumns = { firstName: { field: 'firstName', header: 'First Name', }, salary: { field: 'salary', type: 'number', }, stack: { field: 'stack' }, currency: { field: 'currency' }, city: { field: 'city' }, }; const domProps = { style: { height: '100%', }, }; const shouldReloadData = { sortInfo: true, filterValue: true, }; function renderDetail(rowInfo: InfiniteTableRowInfo) { return (

Developers in {rowInfo.data?.name}, {rowInfo.data?.country}

data={detailDataSource} primaryKey="id" shouldReloadData={shouldReloadData} > debugId="master-detail-custom-datagrid-example" columnDefaultWidth={150} columnMinWidth={50} columns={detailColumns} />

No data ...

; } return (

Developer: {data.firstName} {data.lastName}

Preferred Language

{data.preferredLanguage}

Salary

{data.salary}

Currency

{data.currency}

Can Design

{data.canDesign}

); } const shouldReloadData = { sortInfo: true, filterValue: true, }; function renderDetail(rowInfo: InfiniteTableRowInfo) { return (

Developers in {rowInfo.data?.name}, {rowInfo.data?.country}

data={detailDataSource} primaryKey="id" shouldReloadData={shouldReloadData} > debugId="master-detail-3-levels-example" columnDefaultWidth={150} columnMinWidth={50} columns={detailColumns} rowDetailHeight={200} rowDetailRenderer={renderLastDetail} />

Developers in {rowInfo.data?.name}, {rowInfo.data?.country}

data={detailDataSource} primaryKey="id" shouldReloadData={shouldReloadData} > debugId="master-detail-custom-datagrid-example" columnDefaultWidth={150} columnMinWidth={50} columns={detailColumns} />

); } const defaultRowDetailState = { collapsedRows: true as const, expandedRows: [39, 54], }; export default () => { return ( <> data={citiesDataSource} primaryKey="id" defaultSortInfo={[ { field: 'country', dir: 1, }, { field: 'name', dir: 1, }, ]} > debugId="master-detail-custom-datagrid-example-2" domProps={domProps} columnDefaultWidth={150} defaultRowDetailState={defaultRowDetailState} columnMinWidth={50} columns={masterColumns} rowDetailHeight={320} rowDetailRenderer={renderDetail} /> ); }; // fetch an array of cities from the server const citiesDataSource: DataSourceData = () => { const cityNames = new Set(); const result: City[] = []; return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql`) .then((response) => response.json()) .then((response) => { response.data.forEach((data: Developer) => { if (cityNames.has(data.city)) { return; } cityNames.add(data.city); result.push({ name: data.city, country: data.country, id: result.length, }); }); return result; }); }; const detailDataSource: DataSourceData = ({ filterValue, sortInfo, masterRowInfo, }) => { if (sortInfo && !Array.isArray(sortInfo)) { sortInfo = [sortInfo]; } if (!filterValue) { filterValue = []; } if (masterRowInfo) { // filter by master country and city filterValue = [ { field: 'city', filter: { operator: 'eq', type: 'string', value: masterRowInfo.data.name, }, }, { field: 'country', filter: { operator: 'eq', type: 'string', value: masterRowInfo.data.country, }, }, ...filterValue, ]; } const args = [ sortInfo ? 'sortInfo=' + JSON.stringify( sortInfo.map((s) => ({ field: s.field, dir: s.dir, })), ) : null, filterValue ? 'filterBy=' + JSON.stringify( filterValue.map(({ field, filter }) => { return { field: field, operator: filter.operator, value: filter.type === 'number' ? Number(filter.value) : filter.value, }; }), ) : null, ] .filter(Boolean) .join('&'); return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?` + args) .then((r) => r.json()) .then((data: Developer[]) => data); }; ``` ## Configuring the master-detail height In order to configure the height of the row details, you can use the [`rowDetailHeight`](https://infinite-table.com/docs/reference/infinite-table-props.md#rowDetailHeight) prop. ```tsx title="Configuring the row detail height" {3} columns={masterColumns} rowDetailHeight={500} rowDetailRenderer={renderDetail} /> ``` The default value for the [`rowDetailHeight`](https://infinite-table.com/docs/reference/infinite-table-props.md#rowDetailHeight) is `300` px. [`rowDetailHeight`](https://infinite-table.com/docs/reference/infinite-table-props.md#rowDetailHeight) can be one of the following: - `number` - the height in pixels - `string` - the name of a CSS variable that configures the height - eg: `--master-detail-height` - `(rowInfo) => number` - a function that can return a different height for each row. The sole argument is the [rowInfo object](https://infinite-table.com/docs/reference/type-definitions/index.md#InfiniteTableRowInfo). **Example: Master detail DataGrid with custom height for row details** This master-detail DataGrid is configured with a custom [`rowDetailHeight`](https://infinite-table.com/docs/reference/infinite-table-props.md#rowDetailHeight) of `200px`. ```ts import * as React from 'react'; import { DataSourceData, InfiniteTable, InfiniteTablePropColumns, DataSource, InfiniteTableRowInfo, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; lastName: string; city: string; currency: string; country: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; salary: number; }; type City = { id: number; name: string; country: string; }; const masterColumns: InfiniteTablePropColumns = { id: { field: 'id', header: 'ID', defaultWidth: 70, renderRowDetailIcon: true, }, country: { field: 'country', header: 'Country' }, city: { field: 'name', header: 'City', defaultFlex: 1 }, }; const detailColumns: InfiniteTablePropColumns = { firstName: { field: 'firstName', header: 'First Name', }, salary: { field: 'salary', type: 'number', }, stack: { field: 'stack' }, currency: { field: 'currency' }, city: { field: 'city' }, }; const domProps = { style: { height: '100%', }, }; const shouldReloadData = { sortInfo: true, filterValue: true, }; function renderDetail(rowInfo: InfiniteTableRowInfo) { console.log('rendering detail for master row', rowInfo.id); return ( data={detailDataSource} primaryKey="id" shouldReloadData={shouldReloadData} > debugId="master-detail-custom-detail-height-example" columnDefaultWidth={150} columnMinWidth={50} columns={detailColumns} /> ); } const defaultRowDetailState = { collapsedRows: true as const, expandedRows: [39, 54], }; export default () => { return ( <> data={citiesDataSource} primaryKey="id" defaultSortInfo={[ { field: 'country', dir: 1, }, { field: 'name', dir: 1, }, ]} > debugId="master-detail-custom-detail-height-example-2" domProps={domProps} columnDefaultWidth={150} defaultRowDetailState={defaultRowDetailState} columnMinWidth={50} columns={masterColumns} rowDetailHeight={200} rowDetailRenderer={renderDetail} /> ); }; // fetch an array of cities from the server const citiesDataSource: DataSourceData = () => { const cityNames = new Set(); const result: City[] = []; return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql`) .then((response) => response.json()) .then((response) => { response.data.forEach((data: Developer) => { if (cityNames.has(data.city)) { return; } cityNames.add(data.city); result.push({ name: data.city, country: data.country, id: result.length, }); }); return result; }); }; const detailDataSource: DataSourceData = ({ filterValue, sortInfo, masterRowInfo, }) => { if (sortInfo && !Array.isArray(sortInfo)) { sortInfo = [sortInfo]; } if (!filterValue) { filterValue = []; } if (masterRowInfo) { // filter by master country and city filterValue = [ { field: 'city', filter: { operator: 'eq', type: 'string', value: masterRowInfo.data.name, }, }, { field: 'country', filter: { operator: 'eq', type: 'string', value: masterRowInfo.data.country, }, }, ...filterValue, ]; } const args = [ sortInfo ? 'sortInfo=' + JSON.stringify( sortInfo.map((s) => ({ field: s.field, dir: s.dir, })), ) : null, filterValue ? 'filterBy=' + JSON.stringify( filterValue.map(({ field, filter }) => { return { field: field, operator: filter.operator, value: filter.type === 'number' ? Number(filter.value) : filter.value, }; }), ) : null, ] .filter(Boolean) .join('&'); return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?` + args) .then((r) => r.json()) .then((data: Developer[]) => data); }; ``` ## Conditional row details Not all rows in a DataGrid need to have details. To configure which rows have details, you can use the [`isRowDetailEnabled`](https://infinite-table.com/docs/reference/infinite-table-props.md#isRowDetailEnabled) function prop. ```tsx title="Using conditional row details" {5} columns={masterColumns} rowDetailHeight={500} rowDetailRenderer={renderDetail} isRowDetailEnabled={(rowInfo) => rowInfo.data.cityName.contains('i')} /> ``` The [`isRowDetailEnabled`](https://infinite-table.com/docs/reference/infinite-table-props.md#isRowDetailEnabled) function prop is called with the [rowInfo object](https://infinite-table.com/docs/reference/type-definitions/index.md#InfiniteTableRowInfo) and is expected to return a boolean value. **Example: Master detail DataGrid with conditional details** This example shows a master DataGrid with cities & countries. Not all rows have details - every other row is configured without details via the [`isRowDetailEnabled`](https://infinite-table.com/docs/reference/infinite-table-props.md#isRowDetailEnabled) function prop. ```ts import * as React from 'react'; import { DataSourceData, InfiniteTable, InfiniteTablePropColumns, DataSource, InfiniteTableRowInfo, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; lastName: string; city: string; currency: string; country: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; salary: number; }; type City = { id: number; name: string; country: string; }; const masterColumns: InfiniteTablePropColumns = { id: { field: 'id', header: 'ID', defaultWidth: 70, renderRowDetailIcon: true, }, country: { field: 'country', header: 'Country' }, city: { field: 'name', header: 'City', defaultFlex: 1 }, }; const detailColumns: InfiniteTablePropColumns = { firstName: { field: 'firstName', header: 'First Name', }, salary: { field: 'salary', type: 'number', }, stack: { field: 'stack' }, currency: { field: 'currency' }, city: { field: 'city' }, }; const domProps = { style: { height: '100%', }, }; const shouldReloadData = { sortInfo: true, filterValue: true, }; function renderDetail(rowInfo: InfiniteTableRowInfo) { console.log('rendering detail for master row', rowInfo.id); return ( data={detailDataSource} primaryKey="id" shouldReloadData={shouldReloadData} > debugId="master-detail-per-row-example" columnDefaultWidth={150} columnMinWidth={50} columns={detailColumns} /> ); } const isRowDetailEnabled = (rowInfo: InfiniteTableRowInfo) => { return rowInfo.indexInAll % 2 === 0; }; export default () => { return ( <> data={citiesDataSource} primaryKey="id" defaultSortInfo={[ { field: 'country', dir: 1, }, { field: 'name', dir: 1, }, ]} > debugId="master-detail-per-row-example-2" domProps={domProps} columnDefaultWidth={150} columnMinWidth={50} columns={masterColumns} isRowDetailEnabled={isRowDetailEnabled} rowDetailRenderer={renderDetail} /> ); }; // fetch an array of cities from the server const citiesDataSource: DataSourceData = () => { const cityNames = new Set(); const result: City[] = []; return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql`) .then((response) => response.json()) .then((response) => { response.data.forEach((data: Developer) => { if (cityNames.has(data.city)) { return; } cityNames.add(data.city); result.push({ name: data.city, country: data.country, id: result.length, }); }); return result; }); }; const detailDataSource: DataSourceData = ({ filterValue, sortInfo, masterRowInfo, }) => { if (sortInfo && !Array.isArray(sortInfo)) { sortInfo = [sortInfo]; } if (!filterValue) { filterValue = []; } if (masterRowInfo) { // filter by master country and city filterValue = [ { field: 'city', filter: { operator: 'eq', type: 'string', value: masterRowInfo.data.name, }, }, { field: 'country', filter: { operator: 'eq', type: 'string', value: masterRowInfo.data.country, }, }, ...filterValue, ]; } const args = [ sortInfo ? 'sortInfo=' + JSON.stringify( sortInfo.map((s) => ({ field: s.field, dir: s.dir, })), ) : null, filterValue ? 'filterBy=' + JSON.stringify( filterValue.map(({ field, filter }) => { return { field: field, operator: filter.operator, value: filter.type === 'number' ? Number(filter.value) : filter.value, }; }), ) : null, ] .filter(Boolean) .join('&'); return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?` + args) .then((r) => r.json()) .then((data: Developer[]) => data); }; ``` --- # Disabled Rows Canonical page: https://infinite-table.com/docs/learn/rows/disabled-rows Disabling rows allows you to have some rows that are not selectable, not clickable, not reacheable via keyboard navigation and other interactions. The `DataSource` manages the disabled state of rows, via the [`defaultRowDisabledState`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultRowDisabledState) (uncontrolled) prop and [`rowDisabledState`](https://infinite-table.com/docs/reference/datasource-props/index.md#rowDisabledState) (controlled) prop. ```tsx idProperty="id" data={[]} defaultRowDisabledState={{ enabledRows: true, disabledRows: ['id1', 'id4', 'id5'] }} /> {/* ... */} /> ``` In addition to using the [`defaultRowDisabledState`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultRowDisabledState)/[`rowDisabledState`](https://infinite-table.com/docs/reference/datasource-props/index.md#rowDisabledState) props, you can also specify the [`isRowDisabled`](https://infinite-table.com/docs/reference/datasource-props/index.md#isRowDisabled) function prop, which overrides those other props and ultimately determines whether a row is disabled or not. **Example: Specify some rows as initially disabled** ```tsx import * as React from 'react'; import { DataSource, DataSourceData, InfiniteTable, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; lastName: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; salary: number; }; const data: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', type: 'number', defaultWidth: 100, }, salary: { defaultFilterable: true, field: 'salary', type: 'number', }, firstName: { field: 'firstName', }, stack: { field: 'stack' }, currency: { field: 'currency' }, }; export default () => { return ( <> data={data} primaryKey="id" defaultRowDisabledState={{ enabledRows: true, disabledRows: [1, 3, 4, 5], }} > debugId="initialRowDisabledState-example" columnDefaultWidth={120} columnMinWidth={50} columns={columns} keyboardNavigation="row" /> ); }; ``` ## Using disabled rows while rendering When rendering a cell, you have access to the row disabled state - the [`InfiniteTableRowInfo`](https://infinite-table.com/docs/reference/type-definitions/index.md#InfiniteTableRowInfo) type has a `rowDisabled` property which is true if the row is disabled. **Example: Using the row disabled state while rendering** This example uses custom rendering for the `firstName` column to render an emoji for disabled rows. ```tsx import * as React from 'react'; import { DataSource, DataSourceApi, DataSourceData, InfiniteTable, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; lastName: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; salary: number; }; const data: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', type: 'number', defaultWidth: 100, }, salary: { defaultFilterable: true, field: 'salary', type: 'number', }, firstName: { field: 'firstName', renderValue: ({ rowInfo, value }) => { return `${value} ${rowInfo.rowDisabled ? '🚫' : ''}`; }, }, stack: { field: 'stack' }, currency: { field: 'currency' }, }; export default () => { const [dataSourceApi, setDataSourceApi] = React.useState>(); return ( <> onReady={setDataSourceApi} data={data} primaryKey="id" defaultRowDisabledState={{ enabledRows: [1, 2, 3, 5], disabledRows: true, }} > debugId="custom-rendering-for-disabled-rows-example" columnDefaultWidth={120} columnMinWidth={50} columns={columns} keyboardNavigation="row" /> ); }; ``` ## Using the API to enable/disable rows You can use the `DataSourceApi` to enable or disable rows programmatically. [`setRowEnabled`](https://infinite-table.com/docs/reference/datasource-api/index.md#setRowEnabled) ```tsx dataSourceApi.setRowEnabled(rowId, enabled); ``` [`setRowEnabledAt`](https://infinite-table.com/docs/reference/datasource-api/index.md#setRowEnabledAt) ```tsx dataSourceApi.setRowEnabledAt(rowIndex, enabled); ``` **Example: Using the API to enable/disable rows** Use the context menu on each row to toggle the disabled state of the respective row. ```tsx import * as React from 'react'; import { DataSource, DataSourceApi, DataSourceData, InfiniteTable, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; lastName: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; salary: number; }; const data: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', type: 'number', defaultWidth: 100, }, salary: { defaultFilterable: true, field: 'salary', type: 'number', }, firstName: { field: 'firstName', renderValue: ({ rowInfo, value }) => { return `${value} ${rowInfo.rowDisabled ? '🚫' : ''}`; }, }, stack: { field: 'stack' }, currency: { field: 'currency' }, }; export default () => { const [dataSourceApi, setDataSourceApi] = React.useState>(); return ( <> onReady={setDataSourceApi} data={data} primaryKey="id" defaultRowDisabledState={{ enabledRows: [1, 2, 3, 5], disabledRows: true, }} > debugId="using-api-to-disable-rows-example" getCellContextMenuItems={({ rowInfo }, { dataSourceApi }) => { return { columns: [{ name: 'label' }], items: [ { label: 'Disable row', key: 'disable-row', disabled: rowInfo.rowDisabled, onAction: ({ hideMenu }) => { dataSourceApi.setRowEnabledAt(rowInfo.indexInAll, false); hideMenu(); }, }, { label: 'Enable row', key: 'enable-row', disabled: !rowInfo.rowDisabled, onAction: ({ hideMenu }) => { dataSourceApi.setRowEnabled(rowInfo.id, true); hideMenu(); }, }, { label: 'Toggle row disable/enable', key: 'toggle-row-disable-enable', onAction: ({ hideMenu }) => { dataSourceApi.setRowEnabled( rowInfo.id, rowInfo.rowDisabled, ); hideMenu(); }, }, ], }; }} columnDefaultWidth={120} columnMinWidth={50} columns={columns} keyboardNavigation="row" /> ); }; ``` --- # Styling Rows Canonical page: https://infinite-table.com/docs/learn/rows/styling-rows Rows can be styled by using the `rowStyle` and the `rowClassName` props - the [`rowStyle`](https://infinite-table.com/docs/reference/infinite-table-props.md#rowStyle) prop can be a style `object` or a `function` that returns a style `object` or `undefined` - the [`rowClassName`](https://infinite-table.com/docs/reference/infinite-table-props.md#rowClassName) prop can be a `string` (the name of a CSS class) or a `function` that returns a `string` or `undefined` ```tsx title="Defining-a-rowStyle-function" const rowStyle: InfiniteTablePropRowStyle = ({ data, rowInfo, }: { data: Employee | null; rowInfo: InfiniteTableRowInfo; }) => { const salary = data ? data.salary : 0; if (salary > 150_000) { return { background: 'tomato' }; } if (rowInfo.indexInAll % 10 === 0) { return { background: 'lightblue', color: 'black' }; } }; ``` The [`rowClassName`](https://infinite-table.com/docs/reference/infinite-table-props.md#rowClassName) function prop has the same signature as the [`rowStyle`](https://infinite-table.com/docs/reference/infinite-table-props.md#rowStyle) function prop. ## Row styling example **Example** ```ts files=["$DOCS/reference/rowStyle-example.page.tsx","$DOCS/reference/rowStyle-example-columns.ts"] ``` In the [`rowStyle`](https://infinite-table.com/docs/reference/infinite-table-props.md#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. --- # Using Rows at Runtime Canonical page: https://infinite-table.com/docs/learn/rows/using-row-info At runtime, the [`columns.render`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.render) function and a [lot](https://infinite-table.com/docs/reference/infinite-table-props.md#rowStyle) [of](https://infinite-table.com/docs/reference/infinite-table-props.md#rowClassName) [other](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.style) functions use the [rowInfo](https://infinite-table.com/docs/reference/type-definitions/index.md#InfiniteTableRowInfo) object to access the current row and use it to decide how to render the current cell or row. The `rowInfo` object has a few variations, depending on the presence or absence of grouping. See [type definition here](https://infinite-table.com/docs/reference/type-definitions/index.md#InfiniteTableRowInfo). All those variations are discriminated in the `TypeScript` typings, so you can easily use the different types of `rowInfo` objects. ## Ungrouped Scenario - normal `rowInfo` When there is no [grouping](https://infinite-table.com/docs/reference/datasource-props/index.md#groupBy), the `rowInfo` object has the following properties: - `data` - type: `DATA_TYPE` - `dataSourceHasGrouping` - type: `false` - `isGroupRow` - type: `false` - `id` - type: `any`. The id of the row, as defined by the [`idProperty`](https://infinite-table.com/docs/reference/datasource-props/index.md#idProperty) prop. - `selfLoaded` - type: `boolean`. Useful in lazy-loading scenarios, when there is batching present. If you're not in such a scenario, the value will be `false`. You can use this to show a loading indicator for the row. - `indexInAll` - type `number`. The index of the row in the full dataset. Called like this because for grouping scenarios, there's also an `indexInGroup` ### Discriminator ```ts rowInfo.dataSourceHasGrouping === false; ``` ## Grouped scenario - normal `rowInfo` When there is [grouping](https://infinite-table.com/docs/reference/datasource-props/index.md#groupBy) defined, and the row is not a group row, the `rowInfo` object has the following properties: - `data` - type: `DATA_TYPE` - `dataSourceHasGrouping` - type: `true` - `isGroupRow` - type: `false` - `indexInAll` - like the above - `indexInGroup` - type: `number`. The index of the row in its parent group. - `groupKeys` - type: `any[]`, but usually it's actually `string[]`. For normal rows, the group keys will have all the keys starting from the topmost parent down to the last group row in the hierarchy (the direct parent of the current row). ```txt Example: People grouped by country and city > Italy - country - groupKeys: ['Italy'] > Rome - city - groupKeys: ['Italy', 'Rome'] - Marco - person - groupKeys: ['Italy', 'Rome'] - Luca - person - groupKeys: ['Italy', 'Rome'] - Giuseppe - person - groupKeys: ['Italy', 'Rome'] ``` - `groupBy` - type `(keyof T)[]`. Has the same structure as groupKeys, but it will contain the fields used to group the rows. - `rootGroupBy` - type `(keyof T)[]`. The groupBy value of the DataSource component, mapped to the `groupBy.field` - `parents` - a list of `rowInfo` objects that are the parents of the current row. - `indexInParentGroups[]` - type: `number[]`. See below for an example ``` > Italy - country - indexInParentGroups: [0] > Rome - city - indexInParentGroups: [0,0] - Marco - person - indexInParentGroups: [0,0,0] - Luca - person - indexInParentGroups: [0,0,1] - Giuseppe - person - indexInParentGroups: [0,0,2] > USA - country - indexInParentGroups: [1] > LA - city - indexInParentGroups: [1,0] - Bob - person - indexInParentGroups: [1,0,2] ``` - `groupCount` - type: `number`. The count of leaf rows that the current group (in this case, the parent group) contains - `groupNesting` - type `number`. The nesting of the parent group. - `collapsed` - type `boolean`. - `selfLoaded` - type: `boolean`. Useful in lazy-loading scenarios, when there is batching present. If you're not in such a scenario, the value will be `false`. ### Discriminator ```ts rowInfo.dataSourceHasGrouping === true && rowInfo.isGroupRow === false; ``` ## Grouped scenario - group `rowInfo` When there is [grouping](https://infinite-table.com/docs/reference/datasource-props/index.md#groupBy) defined, and the row is a group row, the `rowInfo` object has the following properties: - `data` - type: `Partial | null`. The `data` object that might be available is the result of the [aggregation reducers](https://infinite-table.com/docs/reference/datasource-props/index.md#aggregationReducers). If none are specified, `data` will be `null` - `dataSourceHasGrouping` - type: `true` - `isGroupRow` - type: `true` - `error` - type: `string?`. If there was an error while loading the group (when the group row is expanded), this will contain the error message. If the group row was loaded with the `cache: true` flag sent in the server response, the error will remain on the `rowInfo` object even when you collapse the group row, otherwise, if `cache: true` was not present, the `error` property will be removed on collapse. - `indexInAll` - like the above - `indexInGroup` - type: `number`. The index of the row in the its parent group. - `deepRowInfoArray` - an array of `rowInfo` objects. This array contains all the (uncollapsed, so visible) row infos under this group, at any level of nesting, in the order in which they are visible in the table. - `reducerResults` - type `Record`. The result of the [aggregation reducers](https://infinite-table.com/docs/reference/datasource-props/index.md#aggregationReducers) for each field in the [`aggregationReducers`](https://infinite-table.com/docs/reference/datasource-props/index.md#aggregationReducers) prop. - `groupCount` - type: `number`. The count of leaf rows that the current group (in this case, the parent group) contains - `groupData` - type: `DATA_TYPE[]`. The array of the data of all leaf nodes (normal nodes) that are inside this group. ```txt Example: People grouped by country and city > Italy - country - groupKeys: ['Italy'] > Rome - city - groupKeys: ['Italy', 'Rome'] - Marco - person - groupKeys: ['Italy', 'Rome'] - Luca - person - groupKeys: ['Italy', 'Rome'] - Giuseppe - person - groupKeys: ['Italy', 'Rome'] ``` - `collapsedChildrenCount` - type: `number`. The count of all leaf nodes (normal rows) inside the group that are not being visible due to collapsing (either the current row is collapsed or any of its children) - `directChildrenCount` - type: `number`. The count of the direct children of the current group. Direct children can be either normal rows or groups. - `directChildrenLoadedCount` - type: `number`. Like `directChildrenCount`, but only counts the rows that are loaded (when batched lazy loading is configured). - `childrenAvailable` - type: `boolean`. For lazy/batched grouping, this is true if the group has been expanded at least once. NOTE: if this is true, it doesn't mean that all the children have been loaded, it only means that at least some children have been loaded and are available. Use `directChildrenCount` and `directChildrenLoadedCount` to know if all the children have been loaded or not. - `childrenLoading` - type: `boolean`. Boolean flag that will be true while lazy loading direct children of the current row group. Use `directChildrenLoadedCount` and `directChildrenCount` to know if all the children have been loaded or not. - `childrenSelectedCount` the number of all leaf rows in the current group that are selected. - `groupKeys` - type: `any[]`, but usually it's actually `string[]`. For group rows, the group keys will have all the keys starting from the topmost parent down to the current group row (key for current group row is included). - `groupBy` - type `(keyof T)[]`. Has the same structure as groupKeys, but it will contain the fields used to group the rows. - `rootGroupBy` - type `(keyof T)[]`. The groupBy value of the DataSource component, mapped to the `groupBy.field` - `groupCount` - type: `number`. The count of leaf rows that the current group (in this case, the parent group) contains - `groupNesting` - type `number`. The nesting of the parent group. - `parents` - a list of `rowInfo` objects that are the parents of the current row. - `indexInParentGroups[]` - type: `number[]`. See below for an example ``` > Italy - country - indexInParentGroups: [0] > Rome - city - indexInParentGroups: [0,0] - Marco - person - indexInParentGroups: [0,0,0] - Luca - person - indexInParentGroups: [0,0,1] - Giuseppe - person - indexInParentGroups: [0,0,2] > USA - country - indexInParentGroups: [1] > LA - city - indexInParentGroups: [1,0] - Bob - person - indexInParentGroups: [1,0,2] ``` - `collapsed` - type `boolean`. - `selfLoaded` - type: `boolean`. Useful in lazy-loading scenarios, when there is batching present. If you're not in such a scenario, the value will be `false`. ### Discriminator ```ts rowInfo.dataSourceHasGrouping === true && rowInfo.isGroupRow === true; ``` --- # Cell Selection > InfiniteTable DataGrid component supports single and multiple cell selection. Canonical page: https://infinite-table.com/docs/learn/selection/cell-selection To use multi-cell selection, you need to configure the `` component with `selectionMode="multi-cell"` - see [`selectionMode`](https://infinite-table.com/docs/reference/datasource-props/index.md#selectionMode) for details. For selecting rows, see the [Row Selection](https://infinite-table.com/docs/learn/selection/row-selection.md) page. ```tsx title="Configuring the selection mode" // can be "single-row", "multi-row", "multi-cell" or false ``` **Example: Multiple cell selection example** Click cells in the grid to add to the selection. Use `Shift+Click` to select a range of cells and `Cmd/Ctrl+Click` to add single cells to the selection. ```ts import { InfiniteTable, DataSource, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers1k') .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', defaultWidth: 60 }, firstName: { field: 'firstName' }, preferredLanguage: { field: 'preferredLanguage' }, stack: { field: 'stack' }, country: { field: 'country' }, age: { field: 'age', type: 'number' }, salary: { field: 'salary', type: 'number' }, currency: { field: 'currency', type: 'number' }, }; export default function App() { return ( primaryKey="id" data={dataSource} selectionMode="multi-cell" > debugId="cell-selection-default-example" columns={columns} columnDefaultWidth={100} /> ); } ``` ## Using default selection You can specify a default value for cell selection by using the [`defaultCellSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultCellSelection) prop. ```tsx title="Using default selection" const defaultCellSelection = { defaultSelection: false, selectedCells: [ [3, "stack"], // rowId + colId [5, "stack"], // rowId + colId [0, "firstName"], // rowId + colId ] } ``` Cell selection uses `[rowId, colId]` cell descriptors to identify cells to be marked as selected or deselected - read more in the [Cell selection format](#cell-selection-format). **Example: Multiple cell selection with a default selection value** By default some cells are already selected in the grid below, by using the [`defaultCellSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultCellSelection) prop on the `` component. ```ts import { InfiniteTable, DataSource, InfiniteTablePropColumns, DataSourcePropCellSelection_MultiCell, } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers1k') .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', defaultWidth: 60 }, firstName: { field: 'firstName' }, preferredLanguage: { field: 'preferredLanguage' }, stack: { field: 'stack' }, country: { field: 'country' }, age: { field: 'age', type: 'number' }, salary: { field: 'salary', type: 'number' }, currency: { field: 'currency', type: 'number' }, }; export default function App() { const defaultCellSelection: DataSourcePropCellSelection_MultiCell = { defaultSelection: false, selectedCells: [ [3, 'stack'], // rowId + colId [4, 'stack'], [5, 'stack'], [0, 'firstName'], ], }; return ( primaryKey="id" data={dataSource} defaultCellSelection={defaultCellSelection} selectionMode="multi-cell" > debugId="cell-selection-default-selection-example" columns={columns} columnDefaultWidth={100} /> ); } ``` Whe you're using cell selection with or without any default value (via the [`defaultCellSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultCellSelection)), you're using an uncontrolled prop. This means that the selection state is managed by the `` component and not by you. If you want to control the selection state yourself, you can use the controlled [`cellSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#cellSelection) prop instead - see [Using controlled selection](#using-controlled-selection) for details. ## Cell selection format The [`cellSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#cellSelection) prop is an object with the following shape: - `defaultSelection` - `boolean` - whether or not cells are selected by default. - either: - `selectedCells`: `[rowId, colId][]` - an array of cells that should be selected (this is combined with `defaultSelection: false`) - or - `deselectedCells`: `[rowId, colId][]` - an array of cells that should be deselected (this is combined with `defaultSelection: true`) When `defaultSelection` is `true`, you will only need to specify the `deselectedCells` prop. And when `defaultSelection` is `false`, you will only need to specify the `selectedCells` prop. In this way, you can either specify which cells should be selected or which cells should be deselected - and have a default that matches the most common case. The `selectedCells`/`deselectedCells` are arrays of `[rowId, colId]` tuples. The `rowId` is the `id` of the row ([the primary key](https://infinite-table.com/docs/reference/datasource-props/index.md#primaryKey)), and the `colId` is the `id` of the column (the identifier of the column in the [`columns`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns) prop). The following scenarios are all possible: ```tsx title="Just a few specified cells are selected" const defaultCellSelection = { defaultSelection: false, selectedCells: [ ['id2', 'stack'], ['id2', 'stack'], ['id0', 'firstName'], ], }; ``` ```tsx title="Everything is selected, except a few cells" const defaultCellSelection = { defaultSelection: true, deselectedCells: [ ['row2', 'stack'], ['row3', 'stack'], ['row5', 'firstName'], ], }; ``` ### Using wildcards for selection It's also possible to use wildcards for selecting cells. This is useful if you want to select all cells in a column, or all cells in a row. ```tsx title="Selecting all cells in a column" const defaultCellSelection = { defaultSelection: false, selectedCells: [ ['*', 'stack'], ['row2', 'firstName'], ], }; ``` ```tsx title="Selecting all cells in a row" const defaultCellSelection = { defaultSelection: false, selectedCells: [ ['row1', '*'], ['row2', 'firstName'], ], }; ``` ```tsx title="Selecting everything except a column" const defaultCellSelection = { defaultSelection: true, deselectedCells: [['*', 'stack']], }; ``` ## Using controlled selection When using the controlled [`cellSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#cellSelection) you have to update the value of the property yourself, by listening to the [`onCellSelectionChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onCellSelectionChange) event. **Example: Using controlled cell selection** This example shows how to use the [`onCellSelectionChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onCellSelectionChange) callback prop to listen to changes to the controlled [`cellSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#cellSelection) prop on the `` component. ```ts import { InfiniteTable, DataSource, InfiniteTablePropColumns, DataSourcePropCellSelection_MultiCell, } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers1k') .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', defaultWidth: 60 }, firstName: { field: 'firstName' }, preferredLanguage: { field: 'preferredLanguage' }, stack: { field: 'stack' }, country: { field: 'country' }, age: { field: 'age', type: 'number' }, salary: { field: 'salary', type: 'number' }, currency: { field: 'currency', type: 'number' }, }; export default function App() { const [cellSelection, setCellSelection] = React.useState({ defaultSelection: false, selectedCells: [ [3, 'stack'], [0, 'firstName'], ], }); return (

Current selection:

{JSON.stringify(cellSelection, null, 2)}

primaryKey="id" data={dataSource} cellSelection={cellSelection} onCellSelectionChange={setCellSelection} selectionMode="multi-cell" > debugId="controlled-cell-selection-example" columns={columns} columnDefaultWidth={100} />

); } ``` ## Using the Cell Selection API The `` component also exposes a [Cell Selection API](https://infinite-table.com/docs/reference/cell-selection-api/index.md), which you can use to select and deselect cells programmatically. **Example: Using the CellSelectionAPI to select a column** ```ts import { InfiniteTable, DataSource, InfiniteTablePropColumns, DataSourcePropCellSelection_MultiCell, InfiniteTableApi, } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers1k') .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', defaultWidth: 60 }, firstName: { field: 'firstName' }, preferredLanguage: { field: 'preferredLanguage' }, stack: { field: 'stack' }, country: { field: 'country' }, age: { field: 'age', type: 'number' }, salary: { field: 'salary', type: 'number' }, currency: { field: 'currency', type: 'number' }, }; export default function App() { const [cellSelection, setCellSelection] = React.useState({ defaultSelection: false, selectedCells: [ [3, 'stack'], [0, 'firstName'], ], }); const [api, setApi] = React.useState | null>(); return (

Current selection:

{JSON.stringify(cellSelection, null, 2)}

primaryKey="id" data={dataSource} cellSelection={cellSelection} onCellSelectionChange={setCellSelection} selectionMode="multi-cell" > debugId="controlled-cell-selection-with-api-example" columns={columns} columnDefaultWidth={100} onReady={({ api }) => { setApi(api); }} />

); } ``` --- # Row Selection > InfiniteTable DataGrid component supports single and multiple row selection, including checkbox column selection and lazy rows selection Canonical page: https://infinite-table.com/docs/learn/selection/row-selection `InfiniteTable` offers support for both single and multiple row selection. For selecting cells, see the [Cell Selection](https://infinite-table.com/docs/learn/selection/cell-selection.md) page. ```tsx title="Configure the selection mode on the DataSource component" // can be "single-row", "multi-row", "multi-cell" or false ``` Multiple row selection allows people to select rows just like they would in their MacOS Finder app, by clicking desired rows and using the cmd/shift keys as modifiers. The DataGrid also offers support for **checkbox selection**, which is another easy way of interacting with grid rows, especially when grouped or nested data is used. Row selection (both single and multiple) is driven by the [`rowSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#rowSelection) prop, which will contain **primary keys of the selected rows**. The value or values you specify for row selection are primary keys of the rows in the DataGrid. Row selection is defined on the `DataSource` component, so that's where you specify your [`rowSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#rowSelection) prop (or the uncontrolled version of it, namely [`defaultRowSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultRowSelection) and also the callback prop of [`onRowSelectionChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onRowSelectionChange)). You can explicitly specify the [`selectionMode`](https://infinite-table.com/docs/reference/datasource-props/index.md#selectionMode) as `"single-row"` or `"multi-row"` (or `false`) but it will generally be derived from the value of your [`rowSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#rowSelection)/[`defaultRowSelection`](https://infinite-table.com/docs/reference/infinite-table-props.md#defaultRowSelection) prop. # Single Row Selection This is the most basic row selection - in this case the [`rowSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#rowSelection) prop (or the uncontrolled variant [`defaultRowSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultRowSelection)) will be the primary key of the selected row (a string or a number or `null` for no selection). ```ts {4} primaryKey="id" data={[...]} defaultRowSelection={4} > ``` **Example: Uncontrolled single row selection** Single row selection example - click a row to see selection change. You can also use your keyboard - press the spacebar to select/deselect a row. ```ts import { InfiniteTable, DataSource } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; const columns: InfiniteTablePropColumns = { country: { field: 'country', }, firstName: { field: 'firstName', }, stack: { field: 'stack', }, age: { field: 'age' }, id: { field: 'id' }, salary: { field: 'salary', type: 'number', }, canDesign: { field: 'canDesign' }, }; export default function App() { return ( data={dataSource} defaultRowSelection={3} primaryKey="id" > debugId="default-single-row-selection-example" columns={columns} columnDefaultWidth={150} /> ); } const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers100') .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; }; ``` Row selection is changed when the user clicks a row. Clicking a row selects it and clicking it again keeps the row selected. For deselecting the row with the mouse use `cmd`/`ctrl` + click. ## Keybord support You can also use your keyboard to select a row, as by default, [`keyboardSelection`](https://infinite-table.com/docs/reference/infinite-table-props.md#keyboardSelection) is `true`. Using your keyboard, navigate to the desired row and then press the spacebar to select it. Pressing the spacebar again on the selected row will deselect it. Both `cell` and `row` [`keyboardNavigation`](https://infinite-table.com/docs/reference/infinite-table-props.md#keyboardNavigation) are available and you can use either of them to perform row selection. ## Controlled single row selection Row selection can be used as a [controlled](https://infinite-table.com/docs/reference/datasource-props/index.md#rowSelection) or [uncontrolled](https://infinite-table.com/docs/reference/infinite-table-props.md#defaultRowSelection) property. For the controlled version, make sure you also define your [`onRowSelectionChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onRowSelectionChange) callback prop to update the selection. **Example: Controlled single row selection** This example uses [`onRowSelectionChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onRowSelectionChange) callback prop to update the controlled [`rowSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#rowSelection) ```ts import { InfiniteTable, DataSource } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; import { useState } from 'react'; const columns: InfiniteTablePropColumns = { country: { field: 'country', }, firstName: { field: 'firstName', }, stack: { field: 'stack', }, age: { field: 'age' }, id: { field: 'id' }, salary: { field: 'salary', type: 'number', }, canDesign: { field: 'canDesign' }, }; export default function App() { const [rowSelection, setRowSelection] = useState(3); return ( <>

Current row selection:

 {JSON.stringify(rowSelection)}.

data={dataSource} rowSelection={rowSelection} onRowSelectionChange={setRowSelection} primaryKey="id" > debugId="controlled-single-row-selection-example" columns={columns} columnDefaultWidth={150} /> ); } const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers100') .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; }; ``` # Multi Row Selection You can configure multiple selection for rows so users can interact with it through clicking around or via a checkbox selection column. ## Using your mouse and keyboard to select rows If you're using checkboxes for selection, users will be selecting rows via click or click + `cmd`/`ctrl` and `shift` keys, just like they are used to in their native Finder/Explorer applications. ### Mouse interactions For selecting with the mouse, the following gestures are supported (we tried to exactly replicate the logic/behaviour from MacOS Finder app, so most people should find it really intuitive): - clicking a row (with no modifier keys) will select that row, while clearing any existing selection - click + `cmd`/`ctrl` modifier key will toggle the selection for the clicked row while keeping any other existing selection. So if the row was not selected, it's being added to the current selection, while if the row was already selected, it's being removed from the selection - click + `shift` modifier key will perform a multi selection, starting from the last selection click where the `shift` key was not used. **Example: Multi row selection** Use your mouse to select multiple rows. Expect click and click + `cmd`/`ctrl`/`shift` modifier keys to behave just like they are in the MacOS Finder app. ```ts import { InfiniteTable, DataSource } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; const columns: InfiniteTablePropColumns = { country: { field: 'country', }, firstName: { field: 'firstName', }, stack: { field: 'stack', }, age: { field: 'age' }, id: { field: 'id' }, salary: { field: 'salary', type: 'number', }, canDesign: { field: 'canDesign' }, }; export default function App() { return ( data={dataSource} selectionMode="multi-row" primaryKey="id" > debugId="default-selection-mode-multi-row-example" columns={columns} columnDefaultWidth={150} /> ); } const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers100') .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; }; ``` ### Keyboard interactions By default [`keyboardSelection`](https://infinite-table.com/docs/reference/infinite-table-props.md#keyboardSelection) is enabled, so you can use the **spacebar** key to select multiple rows. Using the spacebar key is equivalent to doing a mouse click, so expect the combination of **spacebar** + `cmd`/`ctrl`/`shift` modifier keys to behave just like clicking + the same modifier keys. **Example: Multi row selection with keyboard support** Use spacebar + optional `cmd`/`ctrl`/`shift` modifier keys just like you would do clicking + the same modifier keys. ```ts import { InfiniteTable, DataSource } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; import { useState } from 'react'; const columns: InfiniteTablePropColumns = { country: { field: 'country', }, firstName: { field: 'firstName', }, stack: { field: 'stack', }, age: { field: 'age' }, id: { field: 'id' }, salary: { field: 'salary', type: 'number', }, canDesign: { field: 'canDesign' }, }; export default function App() { const [keyboardSelection, setKeyboardSelection] = useState(true); return ( <>

Keyboard selection is now{' '} {keyboardSelection ? 'enabled' : 'disabled'}.

data={dataSource} selectionMode="multi-row" primaryKey="id" > debugId="default-selection-mode-multi-row-keyboard-toggle-example" keyboardSelection={keyboardSelection} columns={columns} columnDefaultWidth={150} /> ); } const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers100') .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; }; ``` For selecting all the rows in the table, you can use `cmd`/`ctrl` + `A` keyboard shortcut. ## Using a selection checkbox Selection multiple rows is made easier when there is a checkbox column and even-more-so when there is grouping. Configuring checkbox selection is as easy as specifying [renderSelectionCheckBox](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderSelectionCheckBox) on any of the columns in the grid. [renderSelectionCheckBox](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderSelectionCheckBox) can either be the boolean `true` or a render function that allows the customization of the selection checkbox. ```ts {8} const columns: InfiniteTablePropColumns = { id: { field: 'id', defaultWidth: 80, }, country: { // show the selection checkbox for this column renderSelectionCheckBox: true, field: 'country', }, firstName: { field: 'firstName', }, }; ``` Any column can show a selection checkbox if [column.renderSelectionCheckBox](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderSelectionCheckBox) is set to `true`. There is nothing prevening you from providing multiple checkbox columns. **Example: Multi row selection with checkbox support** Use the selection checkboxes to select rows. You can also use the spacebar key (+ optional shift modifier) to modify the selection ```ts import { InfiniteTable, DataSource } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; const columns: InfiniteTablePropColumns = { id: { field: 'id', renderSelectionCheckBox: true, defaultWidth: 80, }, country: { field: 'country', }, firstName: { field: 'firstName', }, stack: { field: 'stack', }, age: { field: 'age', defaultWidth: 80, type: 'number' }, salary: { field: 'salary', type: 'number', }, canDesign: { field: 'canDesign' }, }; export default function App() { return ( data={dataSource} selectionMode="multi-row" primaryKey="id" > debugId="default-checkbox-selection-multi-row-example" columns={columns} columnDefaultWidth={150} /> ); } const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers100') .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; }; ``` ### Mouse interactions The mouse interactions are the obvious ones you would expect from checkbox selection. Clicking a checkbox will toggle the selection for the correspondign row. Also, clicking the header checkbox will select/deselect all the rows in the table. The selection checkbox in the column header can be in an indeterminate state (when just some of the rows are selected), and when clicking it, it will become checked and select all rows. You can use [renderHeaderSelectionCheckBox](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderHeaderSelectionCheckBox) for a column to customize the checkbox in the column header. If no header selection checkbox is specified, [renderSelectionCheckBox](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderSelectionCheckBox) will be used for the column header as well, just like it's used for grid rows. ### Keyboard interactions When multi-row selection is configured to use checkboxes, you can still use your keyboard to select rows. Navigate to the desired row (you can have [keyboard navigation](https://infinite-table.com/docs/reference/infinite-table-props.md#keyboardNavigation) active for either cells or rows) and press the spacebar. If the row is not selected it will select it, otherwise it will deselect it. The only supported modifier key when selecting a row by pressing **spacebar** is the `shift` key - it allows users to extend the selection over multiple rows, which is handy. ## Specify a `rowSelection` value When multiple row selection is used, the [`rowSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#rowSelection) prop should be an object that can have the following shape: ```ts const rowSelection = { selectedRows: [3, 6, 100, 23], // those specific rows are selected defaultSelection: false, // while all other rows are deselected by default }; // or const rowSelection = { deselectedRows: [3, 6, 100, 23], // those specific rows are deselected defaultSelection: true, // all other rows are selected }; // or, for grouped data - this example assumes groupBy=continent,country,city // for using this form of multi-row selection when you have grouping, // you have to specify DataSource.useGroupKeysForMultiRowSelection = true const rowSelection = { selectedRows: [ 45, // row with id 45 is selected, no matter the group it is nested in ['Europe', 'France'], // all rows in Europe/France are selected ['Asia'], // all rows in Asia are selected ], deselectedRows: [ ['Europe', 'France', 'Paris'], // all rows in Paris are deselected ], defaultSelection: false, // all other rows are selected }; ``` As shown above, the `rowSelection.selectedRows` and `rowSelection.deselectedRows` arrays can either contain: - primary keys of rows (which are usually strings or numbers) - any non-array value inside `rowSelection.selectedRows`/`rowSelection.deselectedRows` is considered an id/primaryKey value for a leaf row in the grouped dataset. - arrays of group keys (can be combined with primary keys as well) - those arrays describe the path of the specified selected group. Please note that `rowSelection.selectedRows` can contain certain paths while `rowSelection.deselectedRows` can contain child paths of those paths ... or any other imaginable combination. For this kind of [`rowSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#rowSelection), you need to enable [`useGroupKeysForMultiRowSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#useGroupKeysForMultiRowSelection). Row Selection only uses primary keys by default, even when you have grouped data. For grouping however, you might want to use selection with group keys - for doing that, specify [DataSource.useGroupKeysForMultiRowSelection=true](https://infinite-table.com/docs/reference/datasource-props/index.md#useGroupKeysForMultiRowSelection). Note that if you use selection with group keys, the selection will not be relevant/consistent when the [`groupBy`](https://infinite-table.com/docs/reference/datasource-props/index.md#groupBy) changes. When you have both grouping and [lazy loading](https://infinite-table.com/docs/reference/datasource-props/index.md#lazyLoad), [`useGroupKeysForMultiRowSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#useGroupKeysForMultiRowSelection) must be enabled - read more about it in the note below. When [`lazyLoad`](https://infinite-table.com/docs/reference/datasource-props/index.md#lazyLoad) is being used - this means not all available groups/rows have actually been loaded yet in the dataset - we need a way to allow you to specify that those possibly unloaded rows/groups are selected or not. In this case, the `rowSelection.selectedRows`/`rowSelection.deselectedRows` arrays should not have row primary keys as strings/numbers, but rather rows/groups specified by their full path (so [`useGroupKeysForMultiRowSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#useGroupKeysForMultiRowSelection) should be set to `true`). ```ts {6} // this example assumes groupBy=continent,country,city const rowSelection = { selectedRows: [ // row with id 45 is selected - we need this because in the lazyLoad scenario, // not all parents might have been made available yet ['Europe','Italy', 'Rome', 45], ['Europe','France'], // all rows in Europe/France are selected ['Asia'] // all rows in Asia are selected ] deselectedRows: [ ['Europe','Italy','Rome'] // all rows in Rome are deselected // but note that row with id 45 is selected, so Rome will be // rendered with an indeterminate selection state ], defaultSelection: false // all other rows are selected } ``` In the example above, we know that there are 3 groups (`continent`, `country`, `city`), so any item in the array that has a 4th element is a fully specified leaf node. While lazy loading, we need this fully specified path for specific nodes, so we know which group rows to render with indeterminate selection. ### Controlled selection with checkbox column When using the controlled [`rowSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#rowSelection), make sure to specify the [`onRowSelectionChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onRowSelectionChange) callback prop to update the selection accordingly as a result of user interaction. **Example: Multi row checkbox selection with grouping** This example shows how you can use multiple row selection with a predefined controlled value. Go ahead and select some groups/rows and see the selection value adjust. The example also shows how you can use the `InfiniteTableApi` to retrieve the actual ids of the selected rows. ```ts import { InfiniteTable, DataSource } from '@infinite-table/infinite-react'; import type { InfiniteTableProps, InfiniteTablePropColumns, DataSourceProps, DataSourcePropRowSelection_MultiRow, } from '@infinite-table/infinite-react'; import * as React from 'react'; import { useState } from 'react'; const columns: InfiniteTablePropColumns = { country: { field: 'country', }, firstName: { field: 'firstName', defaultHiddenWhenGroupedBy: '*', }, stack: { field: 'stack', renderGroupValue: ({ value }) => `Stack: ${value || ''}`, }, age: { field: 'age' }, id: { field: 'id' }, preferredLanguage: { field: 'preferredLanguage', renderGroupValue: ({ value }) => `Lang: ${value || ''}`, }, canDesign: { field: 'canDesign', renderGroupValue: ({ value }) => `Can design: ${value || ''}`, }, }; const defaultGroupBy: DataSourceProps['groupBy'] = [ { field: 'canDesign', }, { field: 'stack', }, { field: 'preferredLanguage', }, ]; const groupColumn: InfiniteTableProps['groupColumn'] = { field: 'firstName', renderSelectionCheckBox: true, defaultWidth: 300, }; const domProps = { style: { flex: 1, minHeight: 500, }, }; export default function App() { const [rowSelection, setRowSelection] = useState({ selectedRows: [0, 8, 10], defaultSelection: false, }); return (

Current row selection:


           {JSON.stringify(rowSelection)}.

data={dataSource} groupBy={defaultGroupBy} rowSelection={rowSelection} onRowSelectionChange={setRowSelection} primaryKey="id" > debugId="controlled-multi-row-selection-example" columns={columns} domProps={domProps} groupColumn={groupColumn} columnDefaultWidth={150} />

); } const dataSource = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers100') .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; }; ``` ## Multi Selection with Lazy Load and Grouping Probably the most complex use-case for multi selection (with checkbox) is the combination of grouping and lazy-loading. In this scenario, not all groups and/or rows are loaded at a given point in time, but we need to be able to know how to render each checkbox for each group - either checked, unchecked or indeterminate, all this depending on whether all children, at any nesting levels are selected or not. In order to make this possible, the [`rowSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#rowSelection) value will only contain arrays (and not individual primary keys) in the `selectedRows` and `deselectedRows` arrays and the DataSource will be configured with [`useGroupKeysForMultiRowSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#useGroupKeysForMultiRowSelection). **Example: Multi row checkbox selection with lazy data and grouping** The `DataSet` has lazy loading and grouping. The selection uses group keys (see [`useGroupKeysForMultiRowSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#useGroupKeysForMultiRowSelection)), so it can specify as selected even rows/groups that have not been loaded yet. Note in the example below that some of the group rows are partly selected, even if the leaf rows which are specified as selected in the [`rowSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#rowSelection) are not yet loaded. ```ts import { InfiniteTable, DataSource } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns, InfiniteTablePropGroupColumn, DataSourceData, DataSourcePropRowSelection_MultiRow, DataSourcePropGroupBy, } from '@infinite-table/infinite-react'; import * as React from 'react'; import { useState } from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = ({ pivotBy, aggregationReducers, groupBy, groupKeys = [], }) => { const args = [ pivotBy ? 'pivotBy=' + JSON.stringify(pivotBy.map((p) => ({ field: p.field }))) : null, `groupKeys=${JSON.stringify(groupKeys)}`, groupBy ? 'groupBy=' + JSON.stringify(groupBy.map((p) => ({ field: p.field }))) : null, aggregationReducers ? 'reducers=' + JSON.stringify( Object.keys(aggregationReducers).map((key) => ({ field: aggregationReducers[key].field, id: key, name: aggregationReducers[key].reducer, })), ) : null, ] .filter(Boolean) .join('&'); return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers100-sql?` + args) .then((r) => r.json()) .then((data: Developer[]) => data) .then((data) => { return new Promise((resolve) => { setTimeout(() => { resolve(data); }, 100); }); }); }; const columns: InfiniteTablePropColumns = { id: { field: 'id' }, firstName: { field: 'firstName', }, preferredLanguage: { field: 'preferredLanguage', }, stack: { field: 'stack', }, }; const domProps = { style: { height: '80vh', }, }; const groupBy: DataSourcePropGroupBy = [ { field: 'stack' }, { field: 'preferredLanguage', }, { field: 'canDesign', }, ]; const groupColumn: InfiniteTablePropGroupColumn = { field: 'firstName', defaultWidth: 250, }; export default function GroupByExample() { const [rowSelection] = useState({ defaultSelection: false, selectedRows: [ ['backend', 'Java'], ['backend', 'JavaScript'], ['backend', 'CSharp', 'no', 37], ['backend', 'PHP', 'no', 66], ['frontend'], ], }); return ( primaryKey="id" data={dataSource} groupBy={groupBy} lazyLoad selectionMode="multi-row" defaultRowSelection={rowSelection} useGroupKeysForMultiRowSelection > debugId="lazy-multi-row-selection-example" domProps={domProps} columns={columns} keyboardNavigation="row" groupRenderStrategy="single-column" groupColumn={groupColumn} columnDefaultWidth={200} /> ); } ``` --- # Multiple Sorting > Docs and examples on applying multiple sorting to the DataSource for Infinite Table DataGrid Canonical page: https://infinite-table.com/docs/learn/sorting/multiple-sorting By default, if you don't specify otherwise, the DataGrid is configured with single sorting. For multiple sorting, you need to specify the sorting information as an array: ```tsx primaryKey="id" data={data} // we want an array here defaultSortInfo={[]} > columns={columns} /> ``` An empty array means no sorting. However, it does specify that sorting is configured as multiple sorting, so it's useful to set it to `[]` **Example: Configuring multiple sorting with uncontrolled behavior** Try clicking the `age` column and then the `firstName` column. If the multi-sort behavior is `replace`, clicking the second column will remove the sort from the first column. In order for the sorting to be additive, even if the behavior is `replace`, use the `Ctrl`/`Cmd` key while clicking the column header. If the multi-sort behavior is `append`, clicking the second column will add it to the sort. ```ts import { InfiniteTable, DataSource, InfiniteTablePropMultiSortBehavior, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; country: string; city: string; currency: string; email: string; preferredLanguage: string; hobby: string; salary: number; age: number; }; const columns: InfiniteTablePropColumns = { firstName: { field: 'firstName', header: 'First Name' }, age: { field: 'age', header: 'Age' }, salary: { field: 'salary', header: 'Salary', type: 'number', }, country: { field: 'country', header: 'Country' }, preferredLanguage: { field: 'preferredLanguage' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; export default function LocalUncontrolledSingleSortingExample() { const [multiSortBehavior, setMultiSortBehavior] = React.useState< 'append' | 'replace' >('replace'); return ( <>

Select the multi-sort behavior

primaryKey="id" data={dataSource} defaultSortInfo={[]} > debugId="local-multi-sorting-example-defaults-with-local-data" columns={columns} columnDefaultWidth={120} multiSortBehavior={multiSortBehavior} /> ); } const dataSource: Developer[] = [ { id: 0, firstName: 'Nya', country: 'India', city: 'Unnao', age: 24, currency: 'JPY', preferredLanguage: 'TypeScript', salary: 60000, hobby: 'sports', email: 'Nya44@gmail.com', }, { id: 1, firstName: 'Axel', country: 'Mexico', city: 'Cuitlahuac', age: 46, currency: 'USD', preferredLanguage: 'TypeScript', salary: 100000, hobby: 'sports', email: 'Axel93@hotmail.com', }, { id: 2, firstName: 'Gonzalo', country: 'United Arab Emirates', city: 'Fujairah', age: 24, currency: 'JPY', preferredLanguage: 'Go', salary: 120000, hobby: 'photography', email: 'Gonzalo_McGlynn34@gmail.com', }, { id: 3, firstName: 'Sherwood', country: 'Mexico', city: 'Tlacolula de Matamoros', age: 24, currency: 'CHF', preferredLanguage: 'Rust', salary: 99000, hobby: 'cooking', email: 'Sherwood_McLaughlin65@hotmail.com', }, { id: 4, firstName: 'Alexandre', country: 'France', city: 'Persan', age: 24, currency: 'EUR', preferredLanguage: 'Go', salary: 97000, hobby: 'reading', email: 'Alexandre_Harber@hotmail.com', }, { id: 5, firstName: 'Mariane', country: 'United States', city: 'Hays', age: 23, currency: 'EUR', preferredLanguage: 'TypeScript', salary: 58000, hobby: 'cooking', email: 'Mariane0@hotmail.com', }, { id: 6, firstName: 'Rosalind', country: 'Mexico', city: 'Nuevo Casas Grandes', age: 23, currency: 'AUD', preferredLanguage: 'JavaScript', salary: 198000, hobby: 'dancing', email: 'Rosalind69@gmail.com', }, { id: 7, firstName: 'Lolita', country: 'Sweden', city: 'Delsbo', age: 22, currency: 'JPY', preferredLanguage: 'TypeScript', salary: 200000, hobby: 'cooking', email: 'Lolita.Hayes@hotmail.com', }, { id: 8, firstName: 'Tre', country: 'Germany', city: 'Bad Camberg', age: 23, currency: 'GBP', preferredLanguage: 'TypeScript', salary: 200000, hobby: 'sports', email: 'Tre28@gmail.com', }, { id: 9, firstName: 'Lurline', country: 'Canada', city: 'Raymore', age: 23, currency: 'EUR', preferredLanguage: 'Rust', salary: 58000, hobby: 'sports', email: 'Lurline_Deckow@gmail.com', }, ]; ``` ## User interaction and multi sort behavior When `InfiniteTable` is configured with multiple sorting there are two supported behaviors: - `append` - when this behavior is used, clicking a column header adds that column to the alredy existing sort. If the column is already sorted, the sort direction is reversed. In order to remove a column from the sort, the user needs to click the column header in order to toggle sorting from ascending to descending and then to no sorting. - `replace` - the default behavior - a user clicking a column header removes any existing sorting and sets that column as sorted. In order to add a new column to the sort, the user needs to hold the `Ctrl/Cmd` key while clicking the column header. The behavior of multiple sorting is configured via the [`multiSortBehavior`](https://infinite-table.com/docs/reference/infinite-table-props.md#multiSortBehavior) - the default value for this prop is `"replace"`. ❗️❗️❗️ The [`multiSortBehavior`](https://infinite-table.com/docs/reference/infinite-table-props.md#multiSortBehavior) prop is defined on the `InfiniteTable` component, not on the `DataSource` component - as it's the `InfiniteTable` that handles user interaction, even though the `DataSource` does the actual sorting. ### Multi sort behavior - `append` #### Scenario 1 - user clicks a column header to sort by that column - an ascending sort is added, and the column header will contain the sort index - `1` - if user clicks the same column, the sort direction is reversed - sort index is preserved as `1`, but descending order is set. - user clicks the same column again - the column is removed from the sort. #### Scenario 2 - user clicks a column header to sort by that column - an ascending sort is added, and the column header will contain the sort index - `1` - user clicks another column - the new column is added to the sort, with ascending order and sort index `2`. The initial clicked column is still the sorted, and that sort is applied first. For equal values on column `1`, the sort by column `2` is applied. - user clicks column `2` again - the sort direction is reversed for the second column. So now the sort order is `1` ascending, `2` descending. - user clicks column `2` again - the column is removed from the sort. The sorting now only contains the first column, in ascending order. ### Multi sort behavior - `replace` This is the [default behavior](https://infinite-table.com/docs/reference/infinite-table-props.md#multiSortBehavior) for multiple sorting. In the `replace` behavior, clicking a column header will remove any existing sorting and set that specific column as sorted. In order to add a new column to the sort, the user needs to hold the `Ctrl`/`Cmd` key while clicking a column header. Holding the `Ctrl`/`Cmd` key while clicking a column header results in the same behavior as the `append`. ## Controlled and uncontrolled sorting As noted above, for multiple sorting, you need to specify an array of objects - see [`DataSourceSingleSortInfo`](https://infinite-table.com/docs/reference/type-definitions/index.md#DataSourceSingleSortInfo) for more on the shape of those objects: ```ts // sort by age in descending order, then by `firstName` in ascending order sortInfo = [ { field: 'age', type: 'number', dir: -1 }, { field: 'firstName', dir: 1 }, ]; // no sorting sortInfo = []; ``` The simplest way to use multiple sorting is via the uncontrolled [`defaultSortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultSortInfo) prop. Specify an empty array as the default value, and multiple sorting will be enabled. This allows sorting by multiple fields (to which columns are bound) - you can specify however many you want - so when sorting two objects in the `DataSource`, the first `sortInfo` is used to compare the two, and then, on equal values, the next `sortInfo` is used and so on. If you want to change the sorting from code, after the component is mounted, you need to use the controlled [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) prop. In this case, make sure you update the [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) prop as a result of user interaction, by using the [`onSortInfoChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onSortInfoChange) callback. **Example: Local + uncontrolled multi-sorting example** This table allows sorting multiple columns - initially the `country` column is sorted in descending order and the `salary` column is sorted in ascending order. `Ctrl`/`Cmd` + click the `salary` column to toggle the column sort to descending. `Ctrl`/`Cmd` clicking it a second time will remove it from the sort altogether. ```ts import { InfiniteTable, DataSource, DataSourceData, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers100-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { firstName: { field: 'firstName' }, country: { field: 'country' }, salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, id: { field: 'id' }, canDesign: { field: 'canDesign' }, preferredLanguage: { field: 'preferredLanguage' }, stack: { field: 'stack' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; const domProps = { style: { height: '90vh' } }; const shouldReloadData = { sortInfo: false, }; export default function LocalUncontrolledMultiSortingExampleWithRemoteData() { return ( <> primaryKey="id" data={dataSource} defaultSortInfo={[ { field: 'country', dir: -1 }, { field: 'salary', dir: 1 }, ]} shouldReloadData={shouldReloadData} > debugId="local-uncontrolled-multi-sorting-example-with-remote-data" domProps={domProps} columns={columns} columnDefaultWidth={120} /> ); } ``` **Example: Remote + uncontrolled multi-sorting example** ```ts import { InfiniteTable, DataSource, DataSourceData, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = ({ sortInfo }) => { if (sortInfo && !Array.isArray(sortInfo)) { sortInfo = [sortInfo]; } const args = [ sortInfo ? 'sortInfo=' + JSON.stringify( sortInfo.map((s) => ({ field: s.field, dir: s.dir, })), ) : null, ] .filter(Boolean) .join('&'); return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers100-sql?` + args) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, country: { field: 'country' }, preferredLanguage: { field: 'preferredLanguage' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; const shouldReloadData = { sortInfo: true, }; export default function RemoteUncontrolledMultiSortingExample() { return ( <> primaryKey="id" data={dataSource} defaultSortInfo={[ { field: 'salary', dir: -1, }, ]} shouldReloadData={shouldReloadData} > debugId="remote-uncontrolled-multi-sorting-example" columns={columns} columnDefaultWidth={120} /> ); } ``` If you use uncontrolled sorting via [`defaultSortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultSortInfo) there's no way to switch between single and multiple sorting after the component is mounted. If you have this use-case, you need to use the controlled [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) prop. ## Remote Sorting Sorting remotely makes a lot of sense when using a function as your [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) source. Whenever the sort information is changed, the function will be called with all the information needed to retrieve the data from the remote endpoint. For remote sorting, make sure you specify [shouldReloadData.sortInfo=true](https://infinite-table.com/docs/reference/datasource-props/index.md#shouldReloadData.sortInfo) - if you don't, the data will also be sorted locally in the browser (which most of the times will be harmless, but it means wasted CPU cycles). **Example: Remote + controlled multi-sorting example** ```ts import { InfiniteTable, DataSource, DataSourceData, DataSourcePropSortInfo, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = ({ sortInfo }) => { if (sortInfo && !Array.isArray(sortInfo)) { sortInfo = [sortInfo]; } const args = [ sortInfo ? 'sortInfo=' + JSON.stringify( sortInfo.map((s) => ({ field: s.field, dir: s.dir, })), ) : null, ] .filter(Boolean) .join('&'); return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers100-sql?` + args) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage' }, salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, country: { field: 'country' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; export default function RemoteControlledMultiSortingExample() { const [sortInfo, setSortInfo] = React.useState< DataSourcePropSortInfo >([ { field: 'salary', dir: -1, }, ]); const shouldReloadData = { sortInfo: true, }; return ( <> primaryKey="id" data={dataSource} sortInfo={sortInfo} shouldReloadData={shouldReloadData} onSortInfoChange={setSortInfo} > debugId="remote-controlled-multi-sorting-example" columns={columns} columnDefaultWidth={220} /> ); } ``` In the example above, remote and controlled sorting are combined - because `shouldReloadData.sortInfo=true` is specified, the `` will call the `data` function whenever sorting changes, and will pass in the `dataParams` object that contains the sort information. --- # Sorting > Docs and examples on sorting the DataSource for Infinite Table DataGrid Canonical page: https://infinite-table.com/docs/learn/sorting/overview `InfiniteTable` comes with multiple sorting behaviours, which are described below. Both [single sorting](https://infinite-table.com/docs/learn/sorting/single-sorting.md) and [multiple sorting](https://infinite-table.com/docs/learn/sorting/multiple-sorting.md) are supported via the [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) and [`defaultSortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultSortInfo) props. ### Single Sorting For [single sorting](https://infinite-table.com/docs/learn/sorting/single-sorting.md), [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) (or the uncontrolled [`defaultSortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultSortInfo)) should an object like ```ts // sort by `firstName`, in ascending order sortInfo = { field: 'firstName', dir: 1 }; ``` or you can use ```ts // no sorting sortInfo = null; ``` for explicit no sorting. When you use controlled sorting via [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo), make sure you also listen to [`onSortInfoChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onSortInfoChange) for changes, to get notifications when sorting is changed by the user. Also, for controlled sorting, it's your responsibility to sort the data - read bellow in the [controlled and uncontrolled section](#controlled-and-uncontrolled-sorting). The sort information object has the following shape (see [`DataSourceSingleSortInfo`](https://infinite-table.com/docs/reference/type-definitions/index.md#DataSourceSingleSortInfo) for details): - `dir` - `1 | -1` - the direction of the sorting - `field?` - `keyof DATA_TYPE` - the field to sort by - optional. - `id?` - `string` - if you don't sort by a field, you can specify an id of the column this sorting is bound to. Note that columns have a [valueGetter](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.valueGetter), which will be used when doing local sorting and the column is not bound to an exact field. - `type?` - the sort type - one of the keys in [`sortTypes`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortTypes) - eg `"string"`, `"number"`, `"date"` - will be used for local sorting, to provide the proper comparison function. **Example: Local + uncontrolled single-sorting example** This example shows initial sorting by `salary` in ascending order. Click the header of the `salary` column to sort in descending order and then click it again to unsort. ```ts import { InfiniteTable, DataSource, DataSourceSingleSortInfo, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; 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; }; const columns: InfiniteTablePropColumns = { firstName: { field: 'firstName' }, age: { field: 'age' }, country: { field: 'country' }, preferredLanguage: { field: 'preferredLanguage' }, salary: { field: 'salary', type: 'number', }, canDesign: { field: 'canDesign' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; const defaultSortInfo: DataSourceSingleSortInfo = { field: 'age', dir: 1, }; export default function LocalUncontrolledSingleSortingExample() { return ( <> primaryKey="id" data={dataSource} defaultSortInfo={defaultSortInfo} > debugId="local-uncontrolled-single-sorting-example-with-local-data" columns={columns} columnDefaultWidth={120} /> ); } const dataSource: Developer[] = [ { id: 0, firstName: 'Nya', lastName: 'Klein', country: 'India', city: 'Unnao', age: 24, currency: 'JPY', preferredLanguage: 'TypeScript', stack: 'backend', canDesign: 'yes', salary: 60000, hobby: 'sports', email: 'Nya44@gmail.com', }, { id: 1, firstName: 'Axel', lastName: 'Runolfsson', country: 'Mexico', city: 'Cuitlahuac', age: 46, currency: 'USD', preferredLanguage: 'TypeScript', stack: 'backend', canDesign: 'no', salary: 100000, hobby: 'sports', email: 'Axel93@hotmail.com', }, { id: 2, firstName: 'Gonzalo', lastName: 'McGlynn', country: 'United Arab Emirates', city: 'Fujairah', age: 54, currency: 'JPY', preferredLanguage: 'Go', stack: 'frontend', canDesign: 'yes', salary: 120000, hobby: 'photography', email: 'Gonzalo_McGlynn34@gmail.com', }, { id: 3, firstName: 'Sherwood', lastName: 'McLaughlin', country: 'Mexico', city: 'Tlacolula de Matamoros', age: 43, currency: 'CHF', preferredLanguage: 'Rust', stack: 'backend', canDesign: 'no', salary: 99000, hobby: 'cooking', email: 'Sherwood_McLaughlin65@hotmail.com', }, { id: 4, firstName: 'Alexandre', lastName: 'Harber', country: 'France', city: 'Persan', age: 23, currency: 'EUR', preferredLanguage: 'Go', stack: 'backend', canDesign: 'yes', salary: 97000, hobby: 'reading', email: 'Alexandre_Harber@hotmail.com', }, { id: 5, firstName: 'Mariane', lastName: 'Schroeder', country: 'United States', city: 'Hays', age: 34, currency: 'EUR', preferredLanguage: 'TypeScript', stack: 'backend', canDesign: 'no', salary: 58000, hobby: 'cooking', email: 'Mariane0@hotmail.com', }, { id: 6, firstName: 'Rosalind', lastName: 'Mills', country: 'Mexico', city: 'Nuevo Casas Grandes', age: 33, currency: 'AUD', preferredLanguage: 'JavaScript', stack: 'frontend', canDesign: 'no', salary: 198000, hobby: 'dancing', email: 'Rosalind69@gmail.com', }, { id: 7, firstName: 'Lolita', lastName: 'Hayes', country: 'Sweden', city: 'Delsbo', age: 22, currency: 'JPY', preferredLanguage: 'TypeScript', stack: 'full-stack', canDesign: 'yes', salary: 200000, hobby: 'cooking', email: 'Lolita.Hayes@hotmail.com', }, { id: 8, firstName: 'Tre', lastName: 'Boyle', country: 'Germany', city: 'Bad Camberg', age: 11, currency: 'GBP', preferredLanguage: 'TypeScript', stack: 'backend', canDesign: 'yes', salary: 200000, hobby: 'sports', email: 'Tre28@gmail.com', }, { id: 9, firstName: 'Lurline', lastName: 'Deckow', country: 'Canada', city: 'Raymore', age: 31, currency: 'EUR', preferredLanguage: 'Rust', stack: 'frontend', canDesign: 'yes', salary: 58000, hobby: 'sports', email: 'Lurline_Deckow@gmail.com', }, ]; ``` By default, columns in the InfiniteTable DataGrid are sortable. If you want to disable column sorting for all columns, use [columnDefaultSortable=false](https://infinite-table.com/docs/reference/infinite-table-props.md#columnDefaultSortable) and then you can turn it back on per-column, by setting [column.defaultSortable=true](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.sortable). ### Multiple Sorting If you want to use [multiple sorting](https://infinite-table.com/docs/learn/sorting/multiple-sorting.md), specify an array of objects like ```ts // sort by age in descending order, then by `firstName` in ascending order sortInfo = [ { field: 'age', type: 'number', dir: -1 }, { field: 'firstName', dir: 1 }, ]; // no sorting sortInfo = []; ``` This allows sorting by multiple fields (to which columns are bound) - you can specify however many you want - so when sorting two objects in the `DataSource`, the first `sortInfo` is used to compare the two, and then, on equal values, the next `sortInfo` is used and so on. **Example: Local + uncontrolled multi-sorting example** This table allows sorting multiple columns - initially the `country` column is sorted in descending order and the `salary` column is sorted in ascending order. Click the `salary` column to toggle the column sort to descending. Clicking it a second time will remove it from the sort altogether. ```ts import { InfiniteTable, DataSource, DataSourceData, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers100-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { firstName: { field: 'firstName' }, country: { field: 'country' }, salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, id: { field: 'id' }, canDesign: { field: 'canDesign' }, preferredLanguage: { field: 'preferredLanguage' }, stack: { field: 'stack' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; const domProps = { style: { height: '90vh' } }; const shouldReloadData = { sortInfo: false, }; export default function LocalUncontrolledMultiSortingExampleWithRemoteData() { return ( <> primaryKey="id" data={dataSource} defaultSortInfo={[ { field: 'country', dir: -1 }, { field: 'salary', dir: 1 }, ]} shouldReloadData={shouldReloadData} > debugId="local-uncontrolled-multi-sorting-example-with-remote-data" domProps={domProps} columns={columns} columnDefaultWidth={120} /> ); } ``` **Example: Remote + uncontrolled multi-sorting example** ```ts import { InfiniteTable, DataSource, DataSourceData, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = ({ sortInfo }) => { if (sortInfo && !Array.isArray(sortInfo)) { sortInfo = [sortInfo]; } const args = [ sortInfo ? 'sortInfo=' + JSON.stringify( sortInfo.map((s) => ({ field: s.field, dir: s.dir, })), ) : null, ] .filter(Boolean) .join('&'); return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers100-sql?` + args) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, country: { field: 'country' }, preferredLanguage: { field: 'preferredLanguage' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; const shouldReloadData = { sortInfo: true, }; export default function RemoteUncontrolledMultiSortingExample() { return ( <> primaryKey="id" data={dataSource} defaultSortInfo={[ { field: 'salary', dir: -1, }, ]} shouldReloadData={shouldReloadData} > debugId="remote-uncontrolled-multi-sorting-example" columns={columns} columnDefaultWidth={120} /> ); } ``` If you use uncontrolled sorting via [`defaultSortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultSortInfo) there's no way to switch between single and multiple sorting after the component is mounted. If you have this use-case, you need to use the controlled [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) prop. ## Understanding local and remote sorting Sorting can be done both locally in the browser and remotely on the server. When you want sorting to be performed remotely on the server, a change on the [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) should trigger a reload of the datasource. In order to achieve this, you need to specify [shouldReloadData.sortInfo=true](https://infinite-table.com/docs/reference/datasource-props/index.md#shouldReloadData.sortInfo). Possible values for [`shouldReloadData.sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#shouldReloadData.sortInfo) are `false` (sorting will be performed locally and won't trigger a reload of the [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) source) and `true` (sorting will be performed remotely and will trigger a reload of the data). This allows you fine-grained control on how sorting is done, either in the client or on the server. ### Uncontrolled sorting If you use uncontrolled sorting (namely you don't care about updating the [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) yourself as a result of user interaction - via [`onSortInfoChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onSortInfoChange)) - then by default, the [`shouldReloadData.sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#shouldReloadData.sortInfo) is `false` unless you specify otherwise. You can initially render the component with no sort state or you can specify a default sorting state, via the uncontrolled prop [`defaultSortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultSortInfo). ```tsx // initially render the component with ascending sorting on `firstName` field // also, note this is an array, so multiple sorting will be enabled const defaultSortInfo = [{ field: 'firstName', dir: 1 }]; primaryKey="id" data={data} defaultSortInfo={defaultSortInfo} > ; ``` If your data is remote and you want the sorting to happen on the backend, you can still use uncontrolled sorting, but you need to specify [shouldReloadData.sortInfo=true](https://infinite-table.com/docs/reference/datasource-props/index.md#shouldReloadData.sortInfo). Using remote sort mode will trigger a call to the [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) function whenever sorting changes, so you can re-fetch the data from the backend, according to the new `sortInfo`. Whe `local` uncontrolled sorting is used, the `` sorts the data internally, based on the existing sorting information. To start with a specific `sortInfo`, use the [`defaultSortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultSortInfo) prop. As the user interacts with the table, [`onSortInfoChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onSortInfoChange) is being called with updated sort info and the `` continues to sort the data accordingly. The [`defaultSortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultSortInfo) prop is an uncontrolled prop, so it's all managed inside the `` component and you can't change it from the outside. If you need to control it from outside the component, use the [controlled sortInfo](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) prop - read the next section for more details ### Controlled Sorting When you use the controlled [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) prop, by default the [`shouldReloadData.sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#shouldReloadData.sortInfo) is set to `true`, unless you specify otherwise. Also, be aware that when the user interacts with the DataGrid when controlled sorting is configured, the [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) prop will not update automatically - you need to listen to [`onSortInfoChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onSortInfoChange) and update the [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) yourself. Just like with uncontrolled sorting, updating the controlled [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) when `shouldReloadData.sortInfo` is `true`, will trigger a call to the [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) function, so new sorted data can be re-fetched. When the controlled [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) is combined with [shouldReloadData.sortInfo=false](https://infinite-table.com/docs/reference/datasource-props/index.md#shouldReloadData.sortInfo), the `` will sort the data internally, on any changes of the sorting information. But remember it's your responsibility to update the [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) prop when the user interacts with the DataGrid. Both controlled [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) and uncontrolled [`defaultSortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultSortInfo) work in combination with [`onSortInfoChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onSortInfoChange) - use it to be notified when sorting changes, so you can react and update your app accordingly if needed. ### Local Sorting When you use uncontrolled sorting locally, the `` will sort the data internally, based on the [`defaultSortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultSortInfo) prop. Local sorting is available for any configured [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) source - be it an array or a function that returns a promise. You can use [`onDataParamsChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onDataParamsChange), which is called whenever any of the sorting, filtering, grouping or pivoting information changes. **Example: Local uncontrolled sorting + local data** ```ts import { InfiniteTable, DataSource, DataSourceData, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers100-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage' }, salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, country: { field: 'country' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; const shouldReloadData = { sortInfo: false, }; export default function LocalUncontrolledSingleSortingExampleWithRemoteData() { return ( <> primaryKey="id" data={dataSource} defaultSortInfo={{ field: 'salary', dir: -1 }} shouldReloadData={shouldReloadData} > debugId="local-uncontrolled-single-sorting-example-with-remote-data" columns={columns} columnDefaultWidth={220} /> ); } ``` **Example: Local uncontrolled sorting + remote data** ```ts import { InfiniteTable, DataSource, DataSourceData, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers100-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage' }, salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, country: { field: 'country' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; const shouldReloadData = { sortInfo: false, }; export default function LocalUncontrolledSingleSortingExampleWithRemoteData() { return ( <> primaryKey="id" data={dataSource} defaultSortInfo={{ field: 'salary', dir: -1 }} shouldReloadData={shouldReloadData} > debugId="local-uncontrolled-single-sorting-example-with-remote-data" columns={columns} columnDefaultWidth={220} /> ); } ``` ### Remote Sorting Sorting remotely makes a lot of sense when using a function as your [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) source. Whenever the sort information is changed, the function will be called with all the information needed to retrieve the data from the remote endpoint. For remote sorting, make sure you specify [shouldReloadData.sortInfo=true](https://infinite-table.com/docs/reference/datasource-props/index.md#shouldReloadData.sortInfo) - if you don't, the data will also be sorted locally in the browser (which most of the times will be harmless, but it means wasted CPU cycles). **Example: Remote + controlled multi-sorting example** ```ts import { InfiniteTable, DataSource, DataSourceData, DataSourcePropSortInfo, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = ({ sortInfo }) => { if (sortInfo && !Array.isArray(sortInfo)) { sortInfo = [sortInfo]; } const args = [ sortInfo ? 'sortInfo=' + JSON.stringify( sortInfo.map((s) => ({ field: s.field, dir: s.dir, })), ) : null, ] .filter(Boolean) .join('&'); return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers100-sql?` + args) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage' }, salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, country: { field: 'country' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; export default function RemoteControlledMultiSortingExample() { const [sortInfo, setSortInfo] = React.useState< DataSourcePropSortInfo >([ { field: 'salary', dir: -1, }, ]); const shouldReloadData = { sortInfo: true, }; return ( <> primaryKey="id" data={dataSource} sortInfo={sortInfo} shouldReloadData={shouldReloadData} onSortInfoChange={setSortInfo} > debugId="remote-controlled-multi-sorting-example" columns={columns} columnDefaultWidth={220} /> ); } ``` In the example above, remote and controlled sorting are combined - because `shouldReloadData.sortInfo=true` is specified, the `` will call the `data` function whenever sorting changes, and will pass in the `dataParams` object that contains the sort information. ## Custom Sort Functions with `sortTypes` By default, all columns are sorted as strings, even if they contain numeric values. To make numeric columns sort as numbers, you need to specify [a `dataType` for the column](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.dataType), or, [a column `sortType`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.sortType). There are 3 `dataType` values that can be used: - `"string"` - `"number"` - `"date"` Each dataType has its own sorting function and its own filtering operators & functions. Sorting works in combination with the [`sortTypes`](https://infinite-table.com/docs/reference/infinite-table-props.md#sortTypes) property, which is an object with keys being sort types and values being functions that compare two values of the same type. ```ts const sortTypes = { string: (a, b) => a.localeCompare(b), number: (a, b) => a - b, date: (a, b) => a - b, }; ``` Those are the three sort types supported by default. The functions specified in the [`sortTypes`](https://infinite-table.com/docs/reference/infinite-table-props.md#sortTypes) object need to always sort data in ascending order. A column can choose to use a specific [`columns.sortType`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.sortType), in which case, for local sorting, the corresponding sort function will be used, or, it can simply specify a [dataType](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.dataType) and the `sortType` with the same name will be used (when no explicit [sortType](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.sortType) is defined). To conclude, the [dataType](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.dataType) of a column will be used as the [sortType](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.sortType) and [filterType](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.filterType), when those are not explicitly specified. **Example: Custom sort by color - magenta will come first** ```ts import { InfiniteTable, DataSource, InfiniteTableColumn, } from '@infinite-table/infinite-react'; import * as React from 'react'; export type CarSale = { id: number; make: string; model: string; year: number; sales: number; color: string; }; const carsales: CarSale[] = [ { make: 'Volkswagen', model: 'GTI', year: 2009, sales: 6, color: 'red', id: 0, }, { make: 'Honda', model: 'Element 2WD', year: 2009, sales: 739, color: 'red', id: 1, }, { make: 'Acura', model: 'RDX 4WD', year: 2008, sales: 2, color: 'magenta', id: 2, }, { make: 'Honda', model: 'Fit', year: 2009, sales: 211, color: 'blue', id: 3, }, { make: 'Mazda', model: '6', year: 2009, sales: 31, color: 'blue', id: 4, }, { make: 'Acura', model: 'TSX', year: 2009, sales: 14, color: 'yellow', id: 5, }, { make: 'Acura', model: 'TSX', year: 2010, sales: 14, color: 'red', id: 6, }, { make: 'Audi', model: 'A3', year: 2009, sales: 2, color: 'magenta', id: 7, }, ]; const columns: Record> = { color: { field: 'color', sortType: 'color' }, make: { field: 'make' }, model: { field: 'model' }, sales: { field: 'sales', sortType: 'number', }, year: { field: 'year', sortType: 'number', }, }; const newSortTypes = { color: (one: string, two: string) => { if (one === 'magenta') { // magenta comes first return -1; } if (two === 'magenta') { // magenta comes first return 1; } return one.localeCompare(two); }, }; export default function DataTestPage() { return ( <> data={carsales} primaryKey="id" defaultSortInfo={{ field: 'color', dir: 1, type: 'color', }} sortTypes={newSortTypes} > debugId="sortTypes-example" columns={columns} /> ); } ``` In this example, for the `"color"` column, we specified [column.sortType="color"](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.sortType) - we could have passed that as `column.dataType` instead, but if the grid had filtering, it wouldn't know what filters to use for "color" - so we used [column.sortType](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.sortType) to only change how the data is sorted. When you provide a [`defaultSortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultSortInfo) prop and the sorting information uses a custom [sortType](https://infinite-table.com/docs/reference/datasource-props/index.md#sortTypes), make sure you specify that as the `type` property of the sorting info object. ```tsx defaultSortInfo={{ field: 'color', dir: 1, // note this custom sort type type: 'color', }} ``` You will need to have a property for that type in your [`sortTypes`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortTypes) object as well. ```tsx sortTypes={{ color: (a, b) => //... }} ``` ## Replacing the sort function While there are many ways to customise sorting, including the [`sortTypes`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortTypes) mentioned above, you might want to completely replace the sorting function used by the `` component. You can do this by configuring the [`sortFunction`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortFunction) prop. ```tsx const sortFunction = (sortInfo, dataArray) => { // sort the dataArray according to the sortInfo // and return the sorted array // return sortedDataArray; }; sortFunction={sortFunction} />; ``` The function specified in the [`sortFunction`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortFunction) prop is called with the [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) as the first argument and the data array as the second. It should return a sorted array, as per the [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) it was called with. When [`sortFunction`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortFunction) is specified, [`shouldReloadData.sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#shouldReloadData.sortInfo) will be forced to `false`, as the sorting is done in the browser. **Example: Using a custom sortFunction** ```ts import { InfiniteTable, DataSource, DataSourceSingleSortInfo, multisort, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; 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; }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage' }, salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, country: { field: 'country' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; const defaultSortInfo: DataSourceSingleSortInfo = { field: 'stack', dir: 1, }; const sortFunction = ( sortInfo: DataSourceSingleSortInfo[], arr: Developer[], ) => { // you call the default sorting const result = multisort(sortInfo, arr); // and also apply your custom sorting // result.sort((a, b) => { // }) return result; }; export default function LocalUncontrolledSingleSortingExample() { return ( <> primaryKey="id" data={dataSource} defaultSortInfo={defaultSortInfo} sortFunction={sortFunction} > debugId="local-sortFunction-single-sorting-example-with-local-data-example" columns={columns} columnDefaultWidth={220} /> ); } const dataSource: Developer[] = [ { id: 0, firstName: 'Nya', lastName: 'Klein', country: 'India', city: 'Unnao', age: 24, currency: 'JPY', preferredLanguage: 'TypeScript', stack: 'backend', canDesign: 'yes', salary: 60000, hobby: 'sports', email: 'Nya44@gmail.com', }, { id: 1, firstName: 'Axel', lastName: 'Runolfsson', country: 'Mexico', city: 'Cuitlahuac', age: 46, currency: 'USD', preferredLanguage: 'TypeScript', stack: 'backend', canDesign: 'no', salary: 100000, hobby: 'sports', email: 'Axel93@hotmail.com', }, { id: 2, firstName: 'Gonzalo', lastName: 'McGlynn', country: 'United Arab Emirates', city: 'Fujairah', age: 54, currency: 'JPY', preferredLanguage: 'Go', stack: 'frontend', canDesign: 'yes', salary: 120000, hobby: 'photography', email: 'Gonzalo_McGlynn34@gmail.com', }, { id: 3, firstName: 'Sherwood', lastName: 'McLaughlin', country: 'Mexico', city: 'Tlacolula de Matamoros', age: 43, currency: 'CHF', preferredLanguage: 'Rust', stack: 'backend', canDesign: 'no', salary: 99000, hobby: 'cooking', email: 'Sherwood_McLaughlin65@hotmail.com', }, { id: 4, firstName: 'Alexandre', lastName: 'Harber', country: 'France', city: 'Persan', age: 23, currency: 'EUR', preferredLanguage: 'Go', stack: 'backend', canDesign: 'yes', salary: 97000, hobby: 'reading', email: 'Alexandre_Harber@hotmail.com', }, { id: 5, firstName: 'Mariane', lastName: 'Schroeder', country: 'United States', city: 'Hays', age: 34, currency: 'EUR', preferredLanguage: 'TypeScript', stack: 'backend', canDesign: 'no', salary: 58000, hobby: 'cooking', email: 'Mariane0@hotmail.com', }, { id: 6, firstName: 'Rosalind', lastName: 'Mills', country: 'Mexico', city: 'Nuevo Casas Grandes', age: 33, currency: 'AUD', preferredLanguage: 'JavaScript', stack: 'frontend', canDesign: 'no', salary: 198000, hobby: 'dancing', email: 'Rosalind69@gmail.com', }, { id: 7, firstName: 'Lolita', lastName: 'Hayes', country: 'Sweden', city: 'Delsbo', age: 22, currency: 'JPY', preferredLanguage: 'TypeScript', stack: 'full-stack', canDesign: 'yes', salary: 200000, hobby: 'cooking', email: 'Lolita.Hayes@hotmail.com', }, { id: 8, firstName: 'Tre', lastName: 'Boyle', country: 'Germany', city: 'Bad Camberg', age: 11, currency: 'GBP', preferredLanguage: 'TypeScript', stack: 'backend', canDesign: 'yes', salary: 200000, hobby: 'sports', email: 'Tre28@gmail.com', }, { id: 9, firstName: 'Lurline', lastName: 'Deckow', country: 'Canada', city: 'Raymore', age: 31, currency: 'EUR', preferredLanguage: 'Rust', stack: 'frontend', canDesign: 'yes', salary: 58000, hobby: 'sports', email: 'Lurline_Deckow@gmail.com', }, ]; ``` --- # Single Sorting > Docs and examples on single-column sorting for Infinite Table DataGrid Canonical page: https://infinite-table.com/docs/learn/sorting/single-sorting By default, the Infinite Table is sortable - clicking a column will sort the grid by that column. Clicking again will reverse the sort and a third click on the column removes the sort altogether. At any point, clicking another column header removes any existing column sort and performs a new sort by the clicked column. This is called single sorting - only one column can be sorted at a time. Technically, it's the `` that's being sorted, not the `` component. **Example: Default behavior is single sorting.** By default, clicking a column header sorts the column. ```ts import { InfiniteTable, DataSource } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; country: string; city: string; currency: string; email: string; preferredLanguage: string; hobby: string; salary: number; age: number; }; const columns: InfiniteTablePropColumns = { firstName: { field: 'firstName', header: 'First Name' }, age: { field: 'age', header: 'Age' }, salary: { field: 'salary', header: 'Salary', type: 'number', }, country: { field: 'country', header: 'Country' }, preferredLanguage: { field: 'preferredLanguage' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; export default function LocalUncontrolledSingleSortingExample() { return ( <> primaryKey="id" data={dataSource}> debugId="local-single-sorting-example-defaults-with-local-data" columns={columns} columnDefaultWidth={120} /> ); } const dataSource: Developer[] = [ { id: 0, firstName: 'Nya', country: 'India', city: 'Unnao', age: 24, currency: 'JPY', preferredLanguage: 'TypeScript', salary: 60000, hobby: 'sports', email: 'Nya44@gmail.com', }, { id: 1, firstName: 'Axel', country: 'Mexico', city: 'Cuitlahuac', age: 46, currency: 'USD', preferredLanguage: 'TypeScript', salary: 100000, hobby: 'sports', email: 'Axel93@hotmail.com', }, { id: 2, firstName: 'Gonzalo', country: 'United Arab Emirates', city: 'Fujairah', age: 54, currency: 'JPY', preferredLanguage: 'Go', salary: 120000, hobby: 'photography', email: 'Gonzalo_McGlynn34@gmail.com', }, { id: 3, firstName: 'Sherwood', country: 'Mexico', city: 'Tlacolula de Matamoros', age: 43, currency: 'CHF', preferredLanguage: 'Rust', salary: 99000, hobby: 'cooking', email: 'Sherwood_McLaughlin65@hotmail.com', }, { id: 4, firstName: 'Alexandre', country: 'France', city: 'Persan', age: 23, currency: 'EUR', preferredLanguage: 'Go', salary: 97000, hobby: 'reading', email: 'Alexandre_Harber@hotmail.com', }, { id: 5, firstName: 'Mariane', country: 'United States', city: 'Hays', age: 34, currency: 'EUR', preferredLanguage: 'TypeScript', salary: 58000, hobby: 'cooking', email: 'Mariane0@hotmail.com', }, { id: 6, firstName: 'Rosalind', country: 'Mexico', city: 'Nuevo Casas Grandes', age: 33, currency: 'AUD', preferredLanguage: 'JavaScript', salary: 198000, hobby: 'dancing', email: 'Rosalind69@gmail.com', }, { id: 7, firstName: 'Lolita', country: 'Sweden', city: 'Delsbo', age: 22, currency: 'JPY', preferredLanguage: 'TypeScript', salary: 200000, hobby: 'cooking', email: 'Lolita.Hayes@hotmail.com', }, { id: 8, firstName: 'Tre', country: 'Germany', city: 'Bad Camberg', age: 11, currency: 'GBP', preferredLanguage: 'TypeScript', salary: 200000, hobby: 'sports', email: 'Tre28@gmail.com', }, { id: 9, firstName: 'Lurline', country: 'Canada', city: 'Raymore', age: 31, currency: 'EUR', preferredLanguage: 'Rust', salary: 58000, hobby: 'sports', email: 'Lurline_Deckow@gmail.com', }, ]; ``` ## Apply a default sort order You can specify a default sort order by using the [`defaultSortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultSortInfo) prop - specify an object like ```ts // sort by `firstName`, in ascending order defaultSortInfo = { field: 'firstName', dir: 1 }; ``` [`defaultSortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultSortInfo) is an uncontrolled property, so updating the sorting by clicking a column header does not require you to respond to user actions via the [`onSortInfoChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onSortInfoChange). Uncontrolled sorting is managed internally by the `` component, so you don't need to worry about it. For controlled sorting, make sure you use the [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) prop and the [`onSortInfoChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onSortInfoChange) callback. **Example: Local + uncontrolled single-sorting example** The `age` column is sorted in ascending order. ```ts import { InfiniteTable, DataSource, DataSourceSingleSortInfo, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; 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; }; const columns: InfiniteTablePropColumns = { firstName: { field: 'firstName' }, age: { field: 'age' }, country: { field: 'country' }, preferredLanguage: { field: 'preferredLanguage' }, salary: { field: 'salary', type: 'number', }, canDesign: { field: 'canDesign' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; const defaultSortInfo: DataSourceSingleSortInfo = { field: 'age', dir: 1, }; export default function LocalUncontrolledSingleSortingExample() { return ( <> primaryKey="id" data={dataSource} defaultSortInfo={defaultSortInfo} > debugId="local-uncontrolled-single-sorting-example-with-local-data" columns={columns} columnDefaultWidth={120} /> ); } const dataSource: Developer[] = [ { id: 0, firstName: 'Nya', lastName: 'Klein', country: 'India', city: 'Unnao', age: 24, currency: 'JPY', preferredLanguage: 'TypeScript', stack: 'backend', canDesign: 'yes', salary: 60000, hobby: 'sports', email: 'Nya44@gmail.com', }, { id: 1, firstName: 'Axel', lastName: 'Runolfsson', country: 'Mexico', city: 'Cuitlahuac', age: 46, currency: 'USD', preferredLanguage: 'TypeScript', stack: 'backend', canDesign: 'no', salary: 100000, hobby: 'sports', email: 'Axel93@hotmail.com', }, { id: 2, firstName: 'Gonzalo', lastName: 'McGlynn', country: 'United Arab Emirates', city: 'Fujairah', age: 54, currency: 'JPY', preferredLanguage: 'Go', stack: 'frontend', canDesign: 'yes', salary: 120000, hobby: 'photography', email: 'Gonzalo_McGlynn34@gmail.com', }, { id: 3, firstName: 'Sherwood', lastName: 'McLaughlin', country: 'Mexico', city: 'Tlacolula de Matamoros', age: 43, currency: 'CHF', preferredLanguage: 'Rust', stack: 'backend', canDesign: 'no', salary: 99000, hobby: 'cooking', email: 'Sherwood_McLaughlin65@hotmail.com', }, { id: 4, firstName: 'Alexandre', lastName: 'Harber', country: 'France', city: 'Persan', age: 23, currency: 'EUR', preferredLanguage: 'Go', stack: 'backend', canDesign: 'yes', salary: 97000, hobby: 'reading', email: 'Alexandre_Harber@hotmail.com', }, { id: 5, firstName: 'Mariane', lastName: 'Schroeder', country: 'United States', city: 'Hays', age: 34, currency: 'EUR', preferredLanguage: 'TypeScript', stack: 'backend', canDesign: 'no', salary: 58000, hobby: 'cooking', email: 'Mariane0@hotmail.com', }, { id: 6, firstName: 'Rosalind', lastName: 'Mills', country: 'Mexico', city: 'Nuevo Casas Grandes', age: 33, currency: 'AUD', preferredLanguage: 'JavaScript', stack: 'frontend', canDesign: 'no', salary: 198000, hobby: 'dancing', email: 'Rosalind69@gmail.com', }, { id: 7, firstName: 'Lolita', lastName: 'Hayes', country: 'Sweden', city: 'Delsbo', age: 22, currency: 'JPY', preferredLanguage: 'TypeScript', stack: 'full-stack', canDesign: 'yes', salary: 200000, hobby: 'cooking', email: 'Lolita.Hayes@hotmail.com', }, { id: 8, firstName: 'Tre', lastName: 'Boyle', country: 'Germany', city: 'Bad Camberg', age: 11, currency: 'GBP', preferredLanguage: 'TypeScript', stack: 'backend', canDesign: 'yes', salary: 200000, hobby: 'sports', email: 'Tre28@gmail.com', }, { id: 9, firstName: 'Lurline', lastName: 'Deckow', country: 'Canada', city: 'Raymore', age: 31, currency: 'EUR', preferredLanguage: 'Rust', stack: 'frontend', canDesign: 'yes', salary: 58000, hobby: 'sports', email: 'Lurline_Deckow@gmail.com', }, ]; ``` ## Controlled sorting For controlled, single sorting, use the [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) as an object like this: ```ts // sort by `firstName`, in ascending order sortInfo = { field: 'firstName', dir: 1 }; ``` or you can specify `null` for explicit no sorting ```ts // no sorting sortInfo = null; ``` When you use controlled sorting via [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo), make sure you also listen to [`onSortInfoChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onSortInfoChange) for changes, to get notifications when sorting is changed by the user. Also, for controlled sorting, it's your responsibility to sort the data - read bellow in the [controlled and uncontrolled section](#controlled-and-uncontrolled-sorting). ## Describing the sort order To describe the sorting order, you have to use an object that has the following shape: - `dir` - `1 | -1` - the direction of the sorting - `field?` - `keyof DATA_TYPE` - the field to sort by - optional. - `id?` - `string` - if you don't sort by a field, you can specify an id of the column this sorting is bound to. Note that columns have a [valueGetter](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.valueGetter), which will be used when doing local sorting and the column is not bound to an exact field. - `type?` - the sort type - one of the keys in [`sortTypes`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortTypes) - eg `"string"`, `"number"`, `"date"` - will be used for local sorting, to provide the proper comparison function. ### Multiple Sorting If you want to use multiple sorting, specify an array of objects like ```ts // sort by age in descending order, then by `firstName` in ascending order sortInfo = [ { field: 'age', type: 'number', dir: -1 }, { field: 'firstName', dir: 1 }, ]; // no sorting sortInfo = []; ``` This allows sorting by multiple fields (to which columns are bound) - you can specify however many you want - so when sorting two objects in the `DataSource`, the first `sortInfo` is used to compare the two, and then, on equal values, the next `sortInfo` is used and so on. **Example: Local + uncontrolled multi-sorting example** This table allows sorting multiple columns - initially the `country` column is sorted in descending order and the `salary` column is sorted in ascending order. Click the `salary` column to toggle the column sort to descending. Clicking it a second time will remove it from the sort altogether. ```ts import { InfiniteTable, DataSource, DataSourceData, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers100-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { firstName: { field: 'firstName' }, country: { field: 'country' }, salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, id: { field: 'id' }, canDesign: { field: 'canDesign' }, preferredLanguage: { field: 'preferredLanguage' }, stack: { field: 'stack' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; const domProps = { style: { height: '90vh' } }; const shouldReloadData = { sortInfo: false, }; export default function LocalUncontrolledMultiSortingExampleWithRemoteData() { return ( <> primaryKey="id" data={dataSource} defaultSortInfo={[ { field: 'country', dir: -1 }, { field: 'salary', dir: 1 }, ]} shouldReloadData={shouldReloadData} > debugId="local-uncontrolled-multi-sorting-example-with-remote-data" domProps={domProps} columns={columns} columnDefaultWidth={120} /> ); } ``` **Example: Remote + uncontrolled multi-sorting example** ```ts import { InfiniteTable, DataSource, DataSourceData, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = ({ sortInfo }) => { if (sortInfo && !Array.isArray(sortInfo)) { sortInfo = [sortInfo]; } const args = [ sortInfo ? 'sortInfo=' + JSON.stringify( sortInfo.map((s) => ({ field: s.field, dir: s.dir, })), ) : null, ] .filter(Boolean) .join('&'); return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers100-sql?` + args) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, country: { field: 'country' }, preferredLanguage: { field: 'preferredLanguage' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; const shouldReloadData = { sortInfo: true, }; export default function RemoteUncontrolledMultiSortingExample() { return ( <> primaryKey="id" data={dataSource} defaultSortInfo={[ { field: 'salary', dir: -1, }, ]} shouldReloadData={shouldReloadData} > debugId="remote-uncontrolled-multi-sorting-example" columns={columns} columnDefaultWidth={120} /> ); } ``` If you use uncontrolled sorting via [`defaultSortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultSortInfo) there's no way to switch between single and multiple sorting after the component is mounted. If you have this use-case, you need to use the controlled [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) prop. ## Understanding sort mode Sorting can be done both locally in the browser and remotely on the server. For configuring where sorting is performed you need to specify the [shouldReloadData.sortInfo](https://infinite-table.com/docs/reference/datasource-props/index.md#shouldReloadData.sortInfo). Possible values for [`shouldReloadData.sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#shouldReloadData.sortInfo) are `false` (for local sorting) and `true` (for remote sorting). This allows you fine-grained control on how sorting is done, either in the client or on the server. ### Uncontrolled sorting If you use uncontrolled sorting (namely you don't care about updating the [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) yourself as a result of user interaction - via [`onSortInfoChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onSortInfoChange)) - then by default, the [`shouldReloadData.sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#shouldReloadData.sortInfo) is `false` (so local sorting) unless you specify otherwise. You can initially render the component with no sort state or you can specify a default sorting state, via the uncontrolled prop [`defaultSortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultSortInfo). ```tsx // initially render the component with ascending sorting on `firstName` field // also, note this is an array, so multiple sorting will be enabled const defaultSortInfo = [{ field: 'firstName', dir: 1 }]; primaryKey="id" data={data} defaultSortInfo={defaultSortInfo} > ; ``` If your data is remote and you want the sorting to happen on the backend, you can still use uncontrolled sorting, but you need to specify [shouldReloadData.sortInfo=true](https://infinite-table.com/docs/reference/datasource-props/index.md#shouldReloadData.sortInfo). Using remote sort mode will trigger a call to the [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) function whenever sorting changes, so you can re-fetch the data from the backend, according to the new `sortInfo`. Whe `local` uncontrolled sorting is used, the `` sorts the data internally, based on the existing sorting information. To start with a specific `sortInfo`, use the [`defaultSortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultSortInfo) prop. As the user interacts with the table, [`onSortInfoChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onSortInfoChange) is being called with updated sort info and the `` continues to sort the data accordingly. The [`defaultSortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultSortInfo) prop is an uncontrolled prop, so it's all managed inside the `` component and you can't change it from the outside. If you need to control it from outside the component, use the [controlled sortInfo](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) prop - read the next section for more details ### Controlled Sorting When you use the controlled [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) prop, by default the [`shouldReloadData.sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#shouldReloadData.sortInfo) is `true` (remote sorting), unless you specify otherwise. Also, be aware that when the user interacts with the DataGrid when controlled sorting is configured, the [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) prop will not update automatically - you need to listen to [`onSortInfoChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onSortInfoChange) and update the [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) yourself. Just like with uncontrolled sorting, updating the controlled [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) when `shouldReloadData.sortInfo=true`, will trigger a call to the [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) function, so new sorted data can be re-fetched. When the controlled [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) is combined with [shouldReloadData.sortInfo=false](https://infinite-table.com/docs/reference/datasource-props/index.md#shouldReloadData.sortInfo), the `` will sort the data internally, on any changes of the sorting information. But remember it's your responsibility to update the [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) prop when the user interacts with the DataGrid. Both controlled [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) and uncontrolled [`defaultSortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultSortInfo) work in combination with [`onSortInfoChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onSortInfoChange) - use it to be notified when sorting changes, so you can react and update your app accordingly if needed. ### Local Sorting When you use uncontrolled sorting locally, the `` will sort the data internally, based on the [`defaultSortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultSortInfo) prop. Local sorting is available for any configured [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) source - be it an array or a function that returns a promise. You can use [`onDataParamsChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onDataParamsChange), which is called whenever any of the sorting, filtering, grouping or pivoting information changes. **Example: Local uncontrolled sorting + local data** ```ts import { InfiniteTable, DataSource, DataSourceData, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers100-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage' }, salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, country: { field: 'country' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; const shouldReloadData = { sortInfo: false, }; export default function LocalUncontrolledSingleSortingExampleWithRemoteData() { return ( <> primaryKey="id" data={dataSource} defaultSortInfo={{ field: 'salary', dir: -1 }} shouldReloadData={shouldReloadData} > debugId="local-uncontrolled-single-sorting-example-with-remote-data" columns={columns} columnDefaultWidth={220} /> ); } ``` **Example: Local uncontrolled sorting + remote data** ```ts import { InfiniteTable, DataSource, DataSourceData, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers100-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage' }, salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, country: { field: 'country' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; const shouldReloadData = { sortInfo: false, }; export default function LocalUncontrolledSingleSortingExampleWithRemoteData() { return ( <> primaryKey="id" data={dataSource} defaultSortInfo={{ field: 'salary', dir: -1 }} shouldReloadData={shouldReloadData} > debugId="local-uncontrolled-single-sorting-example-with-remote-data" columns={columns} columnDefaultWidth={220} /> ); } ``` ### Remote Sorting Sorting remotely makes a lot of sense when using a function as your [`data`](https://infinite-table.com/docs/reference/datasource-props/index.md#data) source. Whenever the sort information is changed, the function will be called with all the information needed to retrieve the data from the remote endpoint. For remote sorting, make sure you specify [shouldReloadData.sortInfo=true](https://infinite-table.com/docs/reference/datasource-props/index.md#shouldReloadData.sortInfo) - if you don't, the data will also be sorted locally in the browser (which most of the times will be harmless, but it means wasted CPU cycles). **Example: Remote + controlled multi-sorting example** ```ts import { InfiniteTable, DataSource, DataSourceData, DataSourcePropSortInfo, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource: DataSourceData = ({ sortInfo }) => { if (sortInfo && !Array.isArray(sortInfo)) { sortInfo = [sortInfo]; } const args = [ sortInfo ? 'sortInfo=' + JSON.stringify( sortInfo.map((s) => ({ field: s.field, dir: s.dir, })), ) : null, ] .filter(Boolean) .join('&'); return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers100-sql?` + args) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage' }, salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, country: { field: 'country' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; export default function RemoteControlledMultiSortingExample() { const [sortInfo, setSortInfo] = React.useState< DataSourcePropSortInfo >([ { field: 'salary', dir: -1, }, ]); const shouldReloadData = { sortInfo: true, }; return ( <> primaryKey="id" data={dataSource} sortInfo={sortInfo} shouldReloadData={shouldReloadData} onSortInfoChange={setSortInfo} > debugId="remote-controlled-multi-sorting-example" columns={columns} columnDefaultWidth={220} /> ); } ``` In the example above, remote and controlled sorting are combined - because `shouldReloadData.sortInfo=true` is specified, the `` will call the `data` function whenever sorting changes, and will pass in the `dataParams` object that contains the sort information. ## Custom Sort Functions with `sortTypes` By default, all columns are sorted as strings, even if they contain numeric values. To make numeric columns sort as numbers, you need to specify [a `dataType` for the column](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.dataType), or, [a column `sortType`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.sortType). There are two `dataType` values that can be used: - `"string"` - `"number"` Each dataType has its own sorting function and its own filtering operators & functions. Sorting works in combination with the [`sortTypes`](https://infinite-table.com/docs/reference/infinite-table-props.md#sortTypes) property, which is an object with keys being sort types and values being functions that compare two values of the same type. ```ts const sortTypes = { string: (a, b) => a.localeCompare(b), number: (a, b) => a - b, }; ``` Those are the two sort types supported by default. The functions specified in the [`sortTypes`](https://infinite-table.com/docs/reference/infinite-table-props.md#sortTypes) object need to always sort data in ascending order. A column can choose to use a specific [`columns.sortType`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.sortType), in which case, for local sorting, the corresponding sort function will be used, or, it can simply specify a [dataType](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.dataType) and the `sortType` with the same name will be used (when no explicit [sortType](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.sortType) is defined). To conclude, the [dataType](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.dataType) of a column will be used as the [sortType](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.sortType) and [filterType](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.filterType), when those are not explicitly specified. **Example: Custom sort by color - magenta will come first** ```ts import { InfiniteTable, DataSource, InfiniteTableColumn, } from '@infinite-table/infinite-react'; import * as React from 'react'; export type CarSale = { id: number; make: string; model: string; year: number; sales: number; color: string; }; const carsales: CarSale[] = [ { make: 'Volkswagen', model: 'GTI', year: 2009, sales: 6, color: 'red', id: 0, }, { make: 'Honda', model: 'Element 2WD', year: 2009, sales: 739, color: 'red', id: 1, }, { make: 'Acura', model: 'RDX 4WD', year: 2008, sales: 2, color: 'magenta', id: 2, }, { make: 'Honda', model: 'Fit', year: 2009, sales: 211, color: 'blue', id: 3, }, { make: 'Mazda', model: '6', year: 2009, sales: 31, color: 'blue', id: 4, }, { make: 'Acura', model: 'TSX', year: 2009, sales: 14, color: 'yellow', id: 5, }, { make: 'Acura', model: 'TSX', year: 2010, sales: 14, color: 'red', id: 6, }, { make: 'Audi', model: 'A3', year: 2009, sales: 2, color: 'magenta', id: 7, }, ]; const columns: Record> = { color: { field: 'color', sortType: 'color' }, make: { field: 'make' }, model: { field: 'model' }, sales: { field: 'sales', sortType: 'number', }, year: { field: 'year', sortType: 'number', }, }; const newSortTypes = { color: (one: string, two: string) => { if (one === 'magenta') { // magenta comes first return -1; } if (two === 'magenta') { // magenta comes first return 1; } return one.localeCompare(two); }, }; export default function DataTestPage() { return ( <> data={carsales} primaryKey="id" defaultSortInfo={{ field: 'color', dir: 1, type: 'color', }} sortTypes={newSortTypes} > debugId="sortTypes-example" columns={columns} /> ); } ``` In this example, for the `"color"` column, we specified [column.sortType="color"](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.sortType) - we could have passed that as `column.dataType` instead, but if the grid had filtering, it wouldn't know what filters to use for "color" - so we used [column.sortType](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.sortType) to only change how the data is sorted. When you provide a [`defaultSortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultSortInfo) prop and the sorting information uses a custom [sortType](https://infinite-table.com/docs/reference/datasource-props/index.md#sortTypes), make sure you specify that as the `type` property of the sorting info object. ```tsx defaultSortInfo={{ field: 'color', dir: 1, // note this custom sort type type: 'color', }} ``` You will need to have a property for that type in your [`sortTypes`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortTypes) object as well. ```tsx sortTypes={{ color: (a, b) => //... }} ``` ## Replacing the sort function While there are many ways to customise sorting, including the [`sortTypes`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortTypes) mentioned above, you might want to completely replace the sorting function used by the `` component. You can do this by configuring the [`sortFunction`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortFunction) prop. ```tsx const sortFunction = (sortInfo, dataArray) => { // sort the dataArray according to the sortInfo // and return the sorted array // return sortedDataArray; }; sortFunction={sortFunction} />; ``` The function specified in the [`sortFunction`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortFunction) prop is called with the [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) as the first argument and the data array as the second. It should return a sorted array, as per the [`sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo) it was called with. When [`sortFunction`](https://infinite-table.com/docs/reference/datasource-props/index.md#sortFunction) is specified, [`shouldReloadData.sortInfo`](https://infinite-table.com/docs/reference/datasource-props/index.md#shouldReloadData.sortInfo) will be forced to `false`, as the sorting is done in the browser. **Example: Using a custom sortFunction** ```ts import { InfiniteTable, DataSource, DataSourceSingleSortInfo, multisort, } from '@infinite-table/infinite-react'; import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react'; import * as React from 'react'; 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; }; const columns: InfiniteTablePropColumns = { preferredLanguage: { field: 'preferredLanguage' }, salary: { field: 'salary', type: 'number', }, age: { field: 'age' }, canDesign: { field: 'canDesign' }, country: { field: 'country' }, firstName: { field: 'firstName' }, stack: { field: 'stack' }, id: { field: 'id' }, hobby: { field: 'hobby' }, city: { field: 'city' }, currency: { field: 'currency' }, }; const defaultSortInfo: DataSourceSingleSortInfo = { field: 'stack', dir: 1, }; const sortFunction = ( sortInfo: DataSourceSingleSortInfo[], arr: Developer[], ) => { // you call the default sorting const result = multisort(sortInfo, arr); // and also apply your custom sorting // result.sort((a, b) => { // }) return result; }; export default function LocalUncontrolledSingleSortingExample() { return ( <> primaryKey="id" data={dataSource} defaultSortInfo={defaultSortInfo} sortFunction={sortFunction} > debugId="local-sortFunction-single-sorting-example-with-local-data-example" columns={columns} columnDefaultWidth={220} /> ); } const dataSource: Developer[] = [ { id: 0, firstName: 'Nya', lastName: 'Klein', country: 'India', city: 'Unnao', age: 24, currency: 'JPY', preferredLanguage: 'TypeScript', stack: 'backend', canDesign: 'yes', salary: 60000, hobby: 'sports', email: 'Nya44@gmail.com', }, { id: 1, firstName: 'Axel', lastName: 'Runolfsson', country: 'Mexico', city: 'Cuitlahuac', age: 46, currency: 'USD', preferredLanguage: 'TypeScript', stack: 'backend', canDesign: 'no', salary: 100000, hobby: 'sports', email: 'Axel93@hotmail.com', }, { id: 2, firstName: 'Gonzalo', lastName: 'McGlynn', country: 'United Arab Emirates', city: 'Fujairah', age: 54, currency: 'JPY', preferredLanguage: 'Go', stack: 'frontend', canDesign: 'yes', salary: 120000, hobby: 'photography', email: 'Gonzalo_McGlynn34@gmail.com', }, { id: 3, firstName: 'Sherwood', lastName: 'McLaughlin', country: 'Mexico', city: 'Tlacolula de Matamoros', age: 43, currency: 'CHF', preferredLanguage: 'Rust', stack: 'backend', canDesign: 'no', salary: 99000, hobby: 'cooking', email: 'Sherwood_McLaughlin65@hotmail.com', }, { id: 4, firstName: 'Alexandre', lastName: 'Harber', country: 'France', city: 'Persan', age: 23, currency: 'EUR', preferredLanguage: 'Go', stack: 'backend', canDesign: 'yes', salary: 97000, hobby: 'reading', email: 'Alexandre_Harber@hotmail.com', }, { id: 5, firstName: 'Mariane', lastName: 'Schroeder', country: 'United States', city: 'Hays', age: 34, currency: 'EUR', preferredLanguage: 'TypeScript', stack: 'backend', canDesign: 'no', salary: 58000, hobby: 'cooking', email: 'Mariane0@hotmail.com', }, { id: 6, firstName: 'Rosalind', lastName: 'Mills', country: 'Mexico', city: 'Nuevo Casas Grandes', age: 33, currency: 'AUD', preferredLanguage: 'JavaScript', stack: 'frontend', canDesign: 'no', salary: 198000, hobby: 'dancing', email: 'Rosalind69@gmail.com', }, { id: 7, firstName: 'Lolita', lastName: 'Hayes', country: 'Sweden', city: 'Delsbo', age: 22, currency: 'JPY', preferredLanguage: 'TypeScript', stack: 'full-stack', canDesign: 'yes', salary: 200000, hobby: 'cooking', email: 'Lolita.Hayes@hotmail.com', }, { id: 8, firstName: 'Tre', lastName: 'Boyle', country: 'Germany', city: 'Bad Camberg', age: 11, currency: 'GBP', preferredLanguage: 'TypeScript', stack: 'backend', canDesign: 'yes', salary: 200000, hobby: 'sports', email: 'Tre28@gmail.com', }, { id: 9, firstName: 'Lurline', lastName: 'Deckow', country: 'Canada', city: 'Raymore', age: 31, currency: 'EUR', preferredLanguage: 'Rust', stack: 'frontend', canDesign: 'yes', salary: 58000, hobby: 'sports', email: 'Lurline_Deckow@gmail.com', }, ]; ``` --- # Theming > Read our docs on the available themes and how you can customize the look and feel of InfiniteTable for React. Canonical page: https://infinite-table.com/docs/learn/theming/ `` ships with a CSS file that you need to import in your codebase to make the component look as intended. ```ts import '@infinite-table/infinite-react/index.css'; ``` This root CSS file includes the `"default"` theme. The other available themes are - `shadcn` - `minimalist` - `ocean` - `balsam` and if you want to use any of them, you have to import their respective CSS file explicitly: ```ts import '@infinite-table/infinite-react/theme/shadcn.css' import '@infinite-table/infinite-react/theme/balsam.css' import '@infinite-table/infinite-react/theme/minimalist.css' import '@infinite-table/infinite-react/theme/ocean.css' ``` Each theme CSS file includes both the **`light`** and the **`dark`** modes. Version `6.2.0` is the first version where the root CSS file (`@infinite-table/infinite-react/index.css`) doesn't include all the themes. Previous to this version, simply importing the root CSS file gave you access to all available themes. Splitting each theme into a dedicated CSS file helps reduce the bundle size for our users, as most people will only use one theme for `` in their apps. ## Applying a theme The following themes are currently available: - `default` - applied by default, no special configuration needed. It's included in the root CSS you need to import from `@infinite-table/infinite-react/index.css` - `balsam` - `minimalist` - `ocean` - `shadcn` - for this theme to correctly show up, make sure the shadcn CSS vars are available on page - see [shadcn theming](https://ui.shadcn.com/docs/theming) for details To apply a theme (except the default one), you have to set the className `"infinite-theme-name--THEME_NAME"` to any parent element of the `` component (or even on the component itself). You will want to apply the theme name and theme mode classNames to the same element, so you'll end up with a className like `"infinite-theme-name--minimalist infinite-theme-mode--dark"`. ```tsx title="Applying the minimalist theme with dark mode explicitly" ``` Example configured with `minimalist` theme and `dark` mode by default. ```tsx live title="Theme switching demo - defaults to minimalist theme in dark mode" size="md" viewMode="preview" files="theme-switching-minimalist-theme-default-example.page.tsx,columns.ts" ``` ## Theme mode - light or dark At runtime, the `light` or `dark` mode is applied based on the user OS settings for the [preferred color scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). To explicitly apply the light mode, apply the className `"infinite-theme-mode--light"` to any parent element of the `` component. To explicitly apply the dark mode, apply the className `"infinite-theme-mode--dark"` to any parent element of the `` component. ```tsx title="Explicitly applying light mode via container className"

``` If instead you specify a `infinite-theme-mode--dark` CSS className, the dark mode will be applied ```tsx title="Explicitly applying dark theme via container className"

``` Example configured with `default` theme and `light` mode by default. ```tsx live title="Theme switching demo - defaults to light theme" size="md" viewMode="preview" files="theme-switching-example.page.tsx,columns.ts" ``` If you don't explicitly have a `infinite-theme-mode--light` or `infinite-theme-mode--dark` ancestor, `InfiniteTable` will use the browser/OS preference (via `@media (prefers-color-scheme: ...)`) to apply the dark or light theme. ## Available themes ### Default theme The `default` theme is applied when you don't specify any explicit theme by default. ### Minimalist theme The `minimalist` theme is inspired from minimalistic designs and is a good choice if you want to keep the UI simple and clean. --- # CSS Variables > Reference list of CSS variables that can be used to style the Infinite Table for React Canonical page: https://infinite-table.com/docs/learn/theming/css-variables Below you can find the complete list of CSS variables that can be used to style the component. {/* START VARS */} ### Accent color Brand-specific accent color. This probably needs override to match your app. ```css --infinite-accent-color ``` ### Success color ```css --infinite-success-color ``` ### Error color ```css --infinite-error-color ``` ### Color The text color inside the component ```css --infinite-color ``` ### Space 0 ```css --infinite-space-0 ``` ### Space 1 ```css --infinite-space-1 ``` ### Space 2 ```css --infinite-space-2 ``` ### Space 3 ```css --infinite-space-3 ``` ### Space 4 ```css --infinite-space-4 ``` ### Space 5 ```css --infinite-space-5 ``` ### Space 6 ```css --infinite-space-6 ``` ### Space 7 ```css --infinite-space-7 ``` ### Space 8 ```css --infinite-space-8 ``` ### Space 9 ```css --infinite-space-9 ``` ### Space 10 ```css --infinite-space-10 ``` ### Font size 0 ```css --infinite-font-size-0 ``` ### Font size 1 ```css --infinite-font-size-1 ``` ### Font size 2 ```css --infinite-font-size-2 ``` ### Font size 3 ```css --infinite-font-size-3 ``` ### Font size 4 ```css --infinite-font-size-4 ``` ### Font size 5 ```css --infinite-font-size-5 ``` ### Font size 6 ```css --infinite-font-size-6 ``` ### Font size 7 ```css --infinite-font-size-7 ``` ### Font family ```css --infinite-font-family ``` ### Min height ```css --infinite-min-height ``` ### Border radius ```css --infinite-border-radius ``` ### Focus outline ```css --infinite-focus-outline ``` ### Background The background color for the whole component. Overriden in the `dark` theme. ```css --infinite-background ``` ### Icon size ```css --infinite-icon-size ``` ### Grouping toolbar color ```css --infinite-grouping-toolbar-color ``` ### Grouping toolbar background ```css --infinite-grouping-toolbar-background ``` ### Grouping toolbar reject background ```css --infinite-grouping-toolbar-reject-background ``` ### Grouping toolbar active background ```css --infinite-grouping-toolbar-active-background ``` ### Grouping toolbar active background alpha ```css --infinite-grouping-toolbar-active-background-alpha ``` ### Grouping toolbar padding ```css --infinite-grouping-toolbar-padding ``` ### Grouping toolbar border ```css --infinite-grouping-toolbar-border ``` ### Grouping toolbar reject border ```css --infinite-grouping-toolbar-reject-border ``` ### Grouping toolbar gap ```css --infinite-grouping-toolbar-gap ``` ### Grouping toolbar item border ```css --infinite-grouping-toolbar-item-border ``` ### Grouping toolbar item border radius ```css --infinite-grouping-toolbar-item-border-radius ``` ### Grouping toolbar item active border ```css --infinite-grouping-toolbar-item-active-border ``` ### Grouping toolbar item background ```css --infinite-grouping-toolbar-item-background ``` ### Grouping toolbar item active background ```css --infinite-grouping-toolbar-item-active-background ``` ### Grouping toolbar item active background alpha ```css --infinite-grouping-toolbar-item-active-background-alpha ``` ### Load mask padding The padding used for the content inside the LoadMask. ```css --infinite-load-mask-padding ``` ### Load mask color ```css --infinite-load-mask-color ``` ### Load mask text background ```css --infinite-load-mask-text-background ``` ### Load mask overlay background ```css --infinite-load-mask-overlay-background ``` ### Load mask overlay opacity ```css --infinite-load-mask-overlay-opacity ``` ### Load mask border radius ```css --infinite-load-mask-border-radius ``` ### Header background Background color for the header. Defaults to [`--infinie-header-cell-background`](#header-cell-background). Overriden in the `dark` theme. ```css --infinite-header-background ``` ### Header color The text color inside the header. Overriden in the `dark` theme. ```css --infinite-header-color ``` ### Column header height The height of the column header. ```css --infinite-column-header-height ``` ### Header cell background Background for header cells. Overriden in the `dark` theme. ```css --infinite-header-cell-background ``` ### Header cell hover background ```css --infinite-header-cell-hover-background ``` ### Header cell border ```css --infinite-header-cell-border ``` ### Header cell padding ```css --infinite-header-cell-padding ``` ### Header cell padding x ```css --infinite-header-cell-padding-x ``` ### Header cell padding y ```css --infinite-header-cell-padding-y ``` ### Header cell icon size ```css --infinite-header-cell-icon-size ``` ### Header cell menu icon line width ```css --infinite-header-cell-menu-icon-line-width ``` ### Header cell sort icon margin ```css --infinite-header-cell-sort-icon-margin ``` ### Header cell border right ```css --infinite-header-cell-border-right ``` ### Resize handle active area width The width of the area you can hover over in order to grab the column resize handle. Defaults to `20px`. The purpose of this active area is to make it easier to grab the resize handle. ```css --infinite-resize-handle-active-area-width ``` ### Resize handle width The width of the colored column resize handle that is displayed on hover and on drag. Defaults to `2px` ```css --infinite-resize-handle-width ``` ### Resize handle hover background The color of the column resize handle - the resize handle is the visible indicator that you see when hovering over the right-edge of a resizable column. Also visible on drag while doing a column resize. ```css --infinite-resize-handle-hover-background ``` ### Resize handle constrained hover background The color of the column resize handle when it has reached a min/max constraint. ```css --infinite-resize-handle-constrained-hover-background ``` ### Filter operator padding x ```css --infinite-filter-operator-padding-x ``` ### Filter editor padding x ```css --infinite-filter-editor-padding-x ``` ### Filter editor margin x ```css --infinite-filter-editor-margin-x ``` ### Filter operator padding y ```css --infinite-filter-operator-padding-y ``` ### Filter editor padding y ```css --infinite-filter-editor-padding-y ``` ### Filter editor margin y ```css --infinite-filter-editor-margin-y ``` ### Filter editor background ```css --infinite-filter-editor-background ``` ### Filter editor border ```css --infinite-filter-editor-border ``` ### Filter editor focus border color ```css --infinite-filter-editor-focus-border-color ``` ### Filter editor border radius ```css --infinite-filter-editor-border-radius ``` ### Filter editor color ```css --infinite-filter-editor-color ``` ### Active cell indicator inset ```css --infinite-active-cell-indicator-inset ``` ### Flashing duration ```css --infinite-flashing-duration ``` ### Flashing animation name ```css --infinite-flashing-animation-name ``` ### Flashing overlay z index ```css --infinite-flashing-overlay-z-index ``` ### Flashing background ```css --infinite-flashing-background ``` ### Flashing up background ```css --infinite-flashing-up-background ``` ### Flashing down background ```css --infinite-flashing-down-background ``` ### Cell padding ```css --infinite-cell-padding ``` ### Cell border width ```css --infinite-cell-border-width ``` ### Cell border color ```css --infinite-cell-border-color ``` ### Cell border Specifies the border for cells. Overriden in the `dark` theme - eg: `1px solid #2a323d` ```css --infinite-cell-border ``` ### Cell border left ```css --infinite-cell-border-left ``` ### Cell border right ```css --infinite-cell-border-right ``` ### Cell border top ```css --infinite-cell-border-top ``` ### Cell border invisible ```css --infinite-cell-border-invisible ``` ### Cell border radius ```css --infinite-cell-border-radius ``` ### Column reorder effect duration ```css --infinite-column-reorder-effect-duration ``` ### Pinned cell border ```css --infinite-pinned-cell-border ``` ### Horizontal layout column reorder disabled page opacity ```css --infinite-horizontal-layout-column-reorder-disabled-page-opacity ``` ### Cell color Text color inside rows. Defaults to `currentColor` Overriden in `dark` theme. ```css --infinite-cell-color ``` ### Selected cell background The background for selected cells, when cell selection is enabled. If not specified, it will default to `var(--infinite-active-cell-background)`. ```css --infinite-selected-cell-background ``` ### Selected cell background default ```css --infinite-selected-cell-background-default ``` ### Selected cell background alpha The opacity of the background color for the selected cell. If not specified, it will default to the value for `var(--infinite-active-cell-background-alpha)` ```css --infinite-selected-cell-background-alpha ``` ### Selected cell background alpha table unfocused The opacity of the background color for the selected cell, when the table is unfocused. If not specified, it will default to `var(--infinite-active-cell-background-alpha--table-unfocused)`. ```css --infinite-selected-cell-background-alpha--table-unfocused ``` ### Selected cell border color The color for border of the selected cell (when cell selection is enabled). Defaults to `var(--infinite-active-cell-border-color)`. ```css --infinite-selected-cell-border-color ``` ### Selected cell border width The width of the border for the selected cell. Defaults to `var(--infinite-active-cell-border-width)`. ```css --infinite-selected-cell-border-width ``` ### Selected cell border style The style of the border for the selected cell (eg: 'solid', 'dashed', 'dotted') - defaults to 'dashed'. Defaults to `var(--infinite-active-cell-border-style)`. ```css --infinite-selected-cell-border-style ``` ### Selected cell border Specifies the border for the selected cell. Defaults to `var(--infinite-selected-cell-border-width) var(--infinite-selected-cell-border-style) var(--infinite-selected-cell-border-color)`. ```css --infinite-selected-cell-border ``` ### Active cell background alpha The opacity of the background color for the active cell (when cell keyboard navigation is enabled). Eg: 0.25 If `activeBackground` is not explicitly defined (this is the default), the background color of the active cell is the same as the border color (`activeBorderColor`), but with this modified opacity. If `activeBorderColor` is also not defined, the accent color will be used. This is applied when the component has focus. ```css --infinite-active-cell-background-alpha ``` ### Active cell background alpha table unfocused Same as the above, but applied when the component does not have focus. ```css --infinite-active-cell-background-alpha--table-unfocused ``` ### Active cell background The background color of the active cell. If not specified, it will default to `activeBorderColor` with the opacity of `activeBackgroundAlpha`. If `activeBorderColor` is not specified, it will default to the accent color, with the same opacity as mentioned. However, specify this to explicitly override the default. ```css --infinite-active-cell-background ``` ### Active cell background default ```css --infinite-active-cell-background-default ``` ### Active cell border color The color for border of the active cell (when cell keyboard navigation is enabled). ```css --infinite-active-cell-border-color ``` ### Active cell border width The width of the border for the active cell. ```css --infinite-active-cell-border-width ``` ### Active cell border style The style of the border for the active cell (eg: 'solid', 'dashed', 'dotted') - defaults to 'dashed'. ```css --infinite-active-cell-border-style ``` ### Active cell border Specifies the border for the active cell. Defaults to `var(--infinite-active-cell-border-width) var(--infinite-active-cell-border-style) var(--infinite-active-cell-border-color)`. ```css --infinite-active-cell-border ``` ### Selection checkbox margin inline ```css --infinite-selection-checkbox-margin-inline ``` ### Expand collapse icon color ```css --infinite-expand-collapse-icon-color ``` ### Menu background ```css --infinite-menu-background ``` ### Menu color ```css --infinite-menu-color ``` ### Menu separator color ```css --infinite-menu-separator-color ``` ### Menu padding ```css --infinite-menu-padding ``` ### Menu cell padding vertical ```css --infinite-menu-cell-padding-vertical ``` ### Menu cell padding horizontal ```css --infinite-menu-cell-padding-horizontal ``` ### Menu cell margin vertical ```css --infinite-menu-cell-margin-vertical ``` ### Menu item disabled background ```css --infinite-menu-item-disabled-background ``` ### Menu item active background ```css --infinite-menu-item-active-background ``` ### Menu item active opacity ```css --infinite-menu-item-active-opacity ``` ### Menu item pressed opacity ```css --infinite-menu-item-pressed-opacity ``` ### Menu item pressed background ```css --infinite-menu-item-pressed-background ``` ### Menu item disabled opacity ```css --infinite-menu-item-disabled-opacity ``` ### Menu border radius ```css --infinite-menu-border-radius ``` ### Menu shadow color ```css --infinite-menu-shadow-color ``` ### Rowdetail background ```css --infinite-rowdetail-background ``` ### Rowdetail padding ```css --infinite-rowdetail-padding ``` ### Rowdetail grid height ```css --infinite-rowdetail-grid-height ``` ### Row background Background color for rows. Defaults to [`--infinite-background`](#background). Overriden in `dark` theme. ```css --infinite-row-background ``` ### Row odd background Background color for odd rows. Even rows will use [`--infinite-row-background`](#row-background). Overriden in `dark` theme. ```css --infinite-row-odd-background ``` ### Row disabled background ```css --infinite-row-disabled-background ``` ### Row odd disabled background Background color for disabled rows. For setting the background of disabled even rows, use [`--infinite-row-disabled-background`](#row-disabled-background). ```css --infinite-row-odd-disabled-background ``` ### Row selected background ```css --infinite-row-selected-background ``` ### Row disabled opacity Opacity for disabled rows. Defaults to 0.5 ```css --infinite-row-disabled-opacity ``` ### Active row background The background color of the active row. Defaults to the value of `var(--infinite-active-cell-background)`. However, specify this to explicitly override the default. ```css --infinite-active-row-background ``` ### Active row border color The border color for the active row. Defaults to the value of `var(--infinite-active-cell-border-color)`. ```css --infinite-active-row-border-color ``` ### Active row border width The width of the border for the active row. Defaults to the value of `var(--infinite-active-cell-border-width)`. ```css --infinite-active-row-border-width ``` ### Active row border style The style of the border for the active row (eg: 'solid', 'dashed', 'dotted') - defaults to the value of `var(--infinite-active-cell-border-style)`, which is `dashed` by default. ```css --infinite-active-row-border-style ``` ### Active row border Specifies the border for the active row. Defaults to `var(--infinite-active-row-border-width) var(--infinite-active-row-border-style) var(--infinite-active-row-border-color)`. ```css --infinite-active-row-border ``` ### Active row background alpha The opacity of the background color for the active row (when row keyboard navigation is enabled). When you explicitly specify `--infinite-active-row-background`, this variable will not be used. Instead, this variable is used when the active row background uses the color of the active cell (border). This is applied when the component has focus. Defaults to the value of `var(--infinite-active-cell-background-alpha)`. ```css --infinite-active-row-background-alpha ``` ### Active row background alpha table unfocused Same as the above, but applied when the component does not have focus. When you explicitly specify `--infinite-active-row-background`, this variable will not be used. Instead, this variable is used when the active row background uses the color of the active cell (border). Defaults to the value of `var(--infinite-active-cell-background-alpha--table-unfocused)`. ```css --infinite-active-row-background-alpha--table-unfocused ``` ### Row hover background Background color for rows, on hover. Overriden in the `dark` theme. ```css --infinite-row-hover-background ``` ### Row selected hover background ```css --infinite-row-selected-hover-background ``` ### Row selected disabled background ```css --infinite-row-selected-disabled-background ``` ### Group row background ```css --infinite-group-row-background ``` ### Group row column nesting ```css --infinite-group-row-column-nesting ``` ### Row pointer events while scrolling ```css --infinite-row-pointer-events-while-scrolling ``` {/* END VARS */} --- # Using Tree Data > Learn how to use the Tree DataGrid to display tree data Canonical page: https://infinite-table.com/docs/learn/tree-grid/overview Starting with version `6.0.0`, Infinite Table has support for displaying tree data. To show tree data, you have to use: - the `` instead of `` component - the `` instead of `` component. Under the hood, those specialized components have better typing support for tree data, which will make it easier to work with them. To specify which column will have the expand/collapse icon, set the [`columns.renderTreeIcon`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderTreeIcon) prop to `true` for that column. **Example: Basic TreeGrid example** ```tsx import { InfiniteTableColumn, TreeDataSource, TreeGrid, } from '@infinite-table/infinite-react'; type FileSystemNode = { id: string; name: string; type: 'folder' | 'file'; extension?: string; mimeType?: string; sizeInKB: number; children?: FileSystemNode[]; }; const columns: Record> = { name: { field: 'name', renderTreeIcon: true, header: 'Name' }, type: { field: 'type', header: 'Type' }, extension: { field: 'extension', header: 'Extension' }, mimeType: { field: 'mimeType', header: 'Mime Type' }, size: { field: 'sizeInKB', type: 'number', header: 'Size (KB)' }, }; export default function App() { return ( ); } const dataSource = () => { const nodes: FileSystemNode[] = [ { id: '1', name: 'Documents', sizeInKB: 1200, type: 'folder', children: [ { id: '10', name: 'Private', sizeInKB: 100, type: 'folder', children: [ { id: '100', name: 'Report.docx', sizeInKB: 210, type: 'file', extension: 'docx', mimeType: 'application/msword', }, { id: '101', name: 'Vacation.docx', sizeInKB: 120, type: 'file', extension: 'docx', mimeType: 'application/msword', }, { id: '102', name: 'CV.pdf', sizeInKB: 108, type: 'file', extension: 'pdf', mimeType: 'application/pdf', }, ], }, ], }, { id: '2', name: 'Desktop', sizeInKB: 1000, type: 'folder', children: [ { id: '20', name: 'unknown.txt', sizeInKB: 100, type: 'file', extension: 'txt', mimeType: 'text/plain', }, ], }, { id: '3', name: 'Media', sizeInKB: 1000, type: 'folder', children: [ { id: '30', name: 'Music - empty', sizeInKB: 0, type: 'folder', children: [], }, { id: '31', name: 'Videos', sizeInKB: 5400, type: 'folder', children: [ { id: '310', name: 'Vacation.mp4', sizeInKB: 108, type: 'file', extension: 'mp4', mimeType: 'video/mp4', }, ], }, ], }, ]; return Promise.resolve(nodes); }; ``` Throughout the docs for the TreeGrid, we will use an example data source that illustrates file system data, as that will be familiar to most people. ## Terminology When referring to rows in the TreeGrid, we'll prefer to use the term `"node"` instead of "row". So whenever you see `"node"` in the docs, you should know that it refers to a TreeGrid configuration of Infinite Table. Also in the context of the TreeGrid, we'll use the term `"node path"` instead of row id. The `"node path"` is the array with the ids of all the parent nodes leading down to the current node. The node path includes the id of the current node. ```tsx {2} title="Node path vs row id" const data = [ { id: '1', name: 'Documents', // path: ['1'] children: [ { id: '10', name: 'Private', // path: ['1', '10'] children: [ { id: '100', name: 'Report.docx' }, // path: ['1', '10', '100'] { id: '101', name: 'Vacation.docx' },// path: ['1', '10', '101'] ], }, ] }, { id: '2', name: 'Downloads', // path: ['2'] children: [ { id: '20', name: 'cat.jpg', // path: ['2', '20'] }, ], }, ]; ``` It's important to understand node paths, as that will be the primary way you'll interact with the TreeGrid/TreeDataSource. For the initial version of the TreeGrid, it's safer if your node ids are unique globally, but as we refine the TreeGrid, it will be safe to use ids unique only within a node children (so unique relative to siblings). ### Parent vs leaf nodes Nodes with an array for their `nodesKey` property (defaults to `"children"`) are considered parent nodes. All other nodes are leaf nodes. When using the [`InfiniteTableRowInfo`](https://infinite-table.com/docs/reference/type-definitions/index.md#InfiniteTableRowInfo) type, you can check for `isTreeNode` to determine if you're in a tree scenario. Also use the `isParentNode` property to check if a node is a parent node or not. ## Data format for the TreeDataSource When using the `` component, the data you specify in your `[`dataSource`](https://infinite-table.com/docs/reference/datasource-props/index.md#dataSource)` should resolve to a nested array - with the `nodesKey` containing the child items for each tree node. ```tsx {2} title="Using the nodesKey prop to specify where the node children are" ``` With the `nodesKey` set to `"children"`, the `` will look for the `children` property on each item in the data array, and use that to determine the child nodes for each tree node. Nodes without a `"children"` property are assumed to be leaf nodes. ```tsx {2} title="Nested data structure for the TreeDataSource component" const dataSource = [ { id: '1', name: 'Documents', children: [ { id: '10', name: 'Private', children: [ { id: '100', name: 'Report.docx', }, { id: '101', name: 'Vacation.docx', }, ], }, ], }, { id: '2', name: 'Downloads', children: [] // will be a parent node, with no children }, ]; ``` ## Tree collapse and expand state The `` component allows you to fully configure & control the collapse and expand state of the tree nodes, via the [`treeExpandState`](https://infinite-table.com/docs/reference/datasource-props/index.md#treeExpandState)/[`defaultTreeExpandState`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultTreeExpandState) props. By default, if no expand state is specified, the tree will be rendered as fully expanded. However, you can choose to specify the expand state with a default value and then with specific values for node paths (or node ids) **Example: Using controlled tree expand state** ```ts import { InfiniteTableColumn, TreeDataSource, TreeExpandStateValue, TreeGrid, } from '@infinite-table/infinite-react'; import { useState } from 'react'; type FileSystemNode = { id: string; name: string; type: 'folder' | 'file'; extension?: string; mimeType?: string; sizeInKB: number; children?: FileSystemNode[]; }; const columns: Record> = { name: { field: 'name', header: 'Name', renderTreeIcon: true }, type: { field: 'type', header: 'Type' }, extension: { field: 'extension', header: 'Extension' }, mimeType: { field: 'mimeType', header: 'Mime Type' }, size: { field: 'sizeInKB', type: 'number', header: 'Size (KB)' }, }; export default function App() { const [treeExpandState, setTreeExpandState] = useState({ defaultExpanded: true, collapsedPaths: [['1', '10'], ['3']], }); return ( <>

Current tree expand state:

{JSON.stringify(treeExpandState, null, 2)}

); } const dataSource = () => { const nodes: FileSystemNode[] = [ { id: '1', name: 'Documents', sizeInKB: 1200, type: 'folder', children: [ { id: '10', name: 'Private', sizeInKB: 100, type: 'folder', children: [ { id: '100', name: 'Report.docx', sizeInKB: 210, type: 'file', extension: 'docx', mimeType: 'application/msword', }, { id: '101', name: 'Vacation.docx', sizeInKB: 120, type: 'file', extension: 'docx', mimeType: 'application/msword', }, { id: '102', name: 'CV.pdf', sizeInKB: 108, type: 'file', extension: 'pdf', mimeType: 'application/pdf', }, ], }, ], }, { id: '2', name: 'Desktop', sizeInKB: 1000, type: 'folder', children: [ { id: '20', name: 'unknown.txt', sizeInKB: 100, type: 'file', extension: 'txt', mimeType: 'text/plain', }, ], }, { id: '3', name: 'Media', sizeInKB: 1000, type: 'folder', children: [ { id: '30', name: 'Music - empty', sizeInKB: 0, type: 'folder', children: [], }, { id: '31', name: 'Videos', sizeInKB: 5400, type: 'folder', children: [ { id: '310', name: 'Vacation.mp4', sizeInKB: 108, type: 'file', extension: 'mp4', mimeType: 'video/mp4', }, { id: '311', name: 'WinterVacation.mp4', sizeInKB: 245, type: 'file', extension: 'mp4', mimeType: 'video/mp4', }, { id: '312', name: 'SummerVacation.mp4', sizeInKB: 1259, type: 'file', extension: 'mp4', mimeType: 'video/mp4', }, ], }, ], }, ]; return Promise.resolve(nodes); }; ``` --- # Managing the tree column and expand/collapse icon > Learn how to render the tree expand/collapse icon and manage the tree column Canonical page: https://infinite-table.com/docs/learn/tree-grid/tree-column When rendering a tree, you have to use the `` component instead of ``. The `` component is simply an `` component with some props removed - those don't make sense for tree scenarios. By default no tree column is rendered. To specify the tree column, you have to to set the [`columns.renderTreeIcon`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.renderTreeIcon) prop to `true` for your column of choice. ```tsx {3} title="Specifying the tree column" const columns: Record> = { name: { renderTreeIcon: true, field: 'name', header: 'Name' }, type: { field: 'type', header: 'Type' }, size: { field: 'sizeInKB', type: 'number', header: 'Size (KB)' }, }; ``` This is very similar to how you specify the [selection column for multi-select configurations](https://infinite-table.com/docs/learn/selection/row-selection.md#using-a-selection-checkbox). **Example: Specifying the tree column** ```tsx import { InfiniteTableColumn, TreeDataSource, TreeGrid, } from '@infinite-table/infinite-react'; import { useMemo, useState } from 'react'; type FileSystemNode = { id: string; name: string; type: 'folder' | 'file'; extension?: string; mimeType?: string; sizeInKB: number; children?: FileSystemNode[]; }; const allColumns: Record ); } ``` --- # DataSource API Canonical page: https://infinite-table.com/docs/reference/datasource-api/ When rendering the `DataSource` component, you can get access to the API by getting it from the [`onReady`](https://infinite-table.com/docs/reference/datasource-props/index.md#onReady) callback prop. ```tsx {3} onReady={(api: DataSourceApi) => { // api is accessible here // you may want to store a reference to it in a ref or somewhere in your app state }} /> ``` You can also get it from the `InfiniteTable` [`onReady`](https://infinite-table.com/docs/reference/infinite-table-props.md#onReady) callback prop: ```tsx {4} columns={[...]} onReady={( {api, dataSourceApi}: { api: InfiniteTableApi, dataSourceApi: DataSourceApi }) => { // both api and dataSourceApi are accessible here }} /> ``` For API on row/group selection, see the [Selection API page](https://infinite-table.com/docs/reference/selection-api). ### isRowDisabledAt (`(rowIndex: number) => boolean`) > Returns `true` if the row at the specified index is disabled, `false` otherwise. See the [`rowDisabledState`](https://infinite-table.com/docs/reference/datasource-props/index.md#rowDisabledState) prop for more information. For checking if a row is disabled by its primary key, see the [`isRowDisabled`](https://infinite-table.com/docs/reference/datasource-api/index.md#isRowDisabled) method. For changing the enable/disable state for the row, see the [`setRowEnabledAt`](https://infinite-table.com/docs/reference/datasource-api/index.md#setRowEnabledAt). **Example: Changing the enable/disable state for a row** ```ts import * as React from 'react'; import { DataSource, DataSourceData, InfiniteTable, InfiniteTablePropColumns, RowDisabledStateObject, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; lastName: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; salary: number; }; const data: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', type: 'number', defaultWidth: 100, }, salary: { defaultFilterable: true, field: 'salary', type: 'number', }, firstName: { field: 'firstName', }, stack: { field: 'stack' }, currency: { field: 'currency' }, }; export default () => { const [rowDisabledState, setRowDisabledState] = React.useState< RowDisabledStateObject >({ enabledRows: true, disabledRows: [1, 3, 4, 5], }); return ( <> data={data} primaryKey="id" rowDisabledState={rowDisabledState} onRowDisabledStateChange={(rowState) => { setRowDisabledState(rowState.getState()); }} > debugId="rowDisabledState-example" getCellContextMenuItems={({ rowInfo }, { dataSourceApi }) => { const rowDisabled = dataSourceApi.isRowDisabledAt( rowInfo.indexInAll, ); return { columns: [{ name: 'label' }], items: [ { label: 'Disable row', disabled: rowDisabled, key: 'disable-row', onAction: ({ hideMenu }) => { dataSourceApi.setRowEnabledAt(rowInfo.indexInAll, false); hideMenu(); }, }, { label: 'Enable row', disabled: !rowDisabled, key: 'enable-row', onAction: ({ hideMenu }) => { dataSourceApi.setRowEnabled(rowInfo.id, true); hideMenu(); }, }, { label: 'Toggle row enable/disable', key: 'toggle-row', onAction: ({ hideMenu }) => { dataSourceApi.setRowEnabled( rowInfo.id, dataSourceApi.isRowDisabled(rowInfo.id), ); hideMenu(); }, }, ], }; }} keyboardNavigation="row" columnDefaultWidth={120} columnMinWidth={50} columns={columns} /> ); }; ``` ### isRowDisabled (`(primaryKey: any) => boolean`) > Returns `true` if the row with the specified primary key is disabled, `false` otherwise. See the [`rowDisabledState`](https://infinite-table.com/docs/reference/datasource-props/index.md#rowDisabledState) prop for more information. For checking if a row is disabled by its index, see the [`isRowDisabledAt`](https://infinite-table.com/docs/reference/datasource-api/index.md#isRowDisabledAt) method. For changing the enable/disable state for the row, see the [`setRowEnabled`](https://infinite-table.com/docs/reference/datasource-api/index.md#setRowEnabled). **Example: Changing the enable/disable state for a row** ```ts import * as React from 'react'; import { DataSource, DataSourceData, InfiniteTable, InfiniteTablePropColumns, RowDisabledStateObject, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; lastName: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; salary: number; }; const data: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', type: 'number', defaultWidth: 100, }, salary: { defaultFilterable: true, field: 'salary', type: 'number', }, firstName: { field: 'firstName', }, stack: { field: 'stack' }, currency: { field: 'currency' }, }; export default () => { const [rowDisabledState, setRowDisabledState] = React.useState< RowDisabledStateObject >({ enabledRows: true, disabledRows: [1, 3, 4, 5], }); return ( <> data={data} primaryKey="id" rowDisabledState={rowDisabledState} onRowDisabledStateChange={(rowState) => { setRowDisabledState(rowState.getState()); }} > debugId="rowDisabledState-example" getCellContextMenuItems={({ rowInfo }, { dataSourceApi }) => { const rowDisabled = dataSourceApi.isRowDisabledAt( rowInfo.indexInAll, ); return { columns: [{ name: 'label' }], items: [ { label: 'Disable row', disabled: rowDisabled, key: 'disable-row', onAction: ({ hideMenu }) => { dataSourceApi.setRowEnabledAt(rowInfo.indexInAll, false); hideMenu(); }, }, { label: 'Enable row', disabled: !rowDisabled, key: 'enable-row', onAction: ({ hideMenu }) => { dataSourceApi.setRowEnabled(rowInfo.id, true); hideMenu(); }, }, { label: 'Toggle row enable/disable', key: 'toggle-row', onAction: ({ hideMenu }) => { dataSourceApi.setRowEnabled( rowInfo.id, dataSourceApi.isRowDisabled(rowInfo.id), ); hideMenu(); }, }, ], }; }} keyboardNavigation="row" columnDefaultWidth={120} columnMinWidth={50} columns={columns} /> ); }; ``` ### setRowEnabled (`(primaryKey: any, enabled: boolean) => void`) > Sets the enable/disable state for the row with the specified primary key. See the [`rowDisabledState`](https://infinite-table.com/docs/reference/datasource-props/index.md#rowDisabledState) prop for more information. For setting the enable/disable state for a row by its index, see the [`setRowEnabledAt`](https://infinite-table.com/docs/reference/datasource-api/index.md#setRowEnabledAt) method. **Example: Changing the enable/disable state for a row** ```ts import * as React from 'react'; import { DataSource, DataSourceData, InfiniteTable, InfiniteTablePropColumns, RowDisabledStateObject, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; lastName: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; salary: number; }; const data: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', type: 'number', defaultWidth: 100, }, salary: { defaultFilterable: true, field: 'salary', type: 'number', }, firstName: { field: 'firstName', }, stack: { field: 'stack' }, currency: { field: 'currency' }, }; export default () => { const [rowDisabledState, setRowDisabledState] = React.useState< RowDisabledStateObject >({ enabledRows: true, disabledRows: [1, 3, 4, 5], }); return ( <> data={data} primaryKey="id" rowDisabledState={rowDisabledState} onRowDisabledStateChange={(rowState) => { setRowDisabledState(rowState.getState()); }} > debugId="rowDisabledState-example" getCellContextMenuItems={({ rowInfo }, { dataSourceApi }) => { const rowDisabled = dataSourceApi.isRowDisabledAt( rowInfo.indexInAll, ); return { columns: [{ name: 'label' }], items: [ { label: 'Disable row', disabled: rowDisabled, key: 'disable-row', onAction: ({ hideMenu }) => { dataSourceApi.setRowEnabledAt(rowInfo.indexInAll, false); hideMenu(); }, }, { label: 'Enable row', disabled: !rowDisabled, key: 'enable-row', onAction: ({ hideMenu }) => { dataSourceApi.setRowEnabled(rowInfo.id, true); hideMenu(); }, }, { label: 'Toggle row enable/disable', key: 'toggle-row', onAction: ({ hideMenu }) => { dataSourceApi.setRowEnabled( rowInfo.id, dataSourceApi.isRowDisabled(rowInfo.id), ); hideMenu(); }, }, ], }; }} keyboardNavigation="row" columnDefaultWidth={120} columnMinWidth={50} columns={columns} /> ); }; ``` ### treeApi (`TreeApi`) > A reference to the [Tree API](https://infinite-table.com/docs/reference/tree-api/index.md). When using the `` component, this property will be available on the `DataSourceApi` instance. ### setRowEnabledAt (`(rowIndex: number, enabled: boolean) => void`) > Sets the enable/disable state for the row at the specified index. See the [`rowDisabledState`](https://infinite-table.com/docs/reference/datasource-props/index.md#rowDisabledState) prop for more information. For setting the enable/disable state for a row by its primary key, see the [`setRowEnabled`](https://infinite-table.com/docs/reference/datasource-api/index.md#setRowEnabled) method. **Example: Changing the enable/disable state for a row** ```ts import * as React from 'react'; import { DataSource, DataSourceData, InfiniteTable, InfiniteTablePropColumns, RowDisabledStateObject, } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; lastName: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; salary: number; }; const data: DataSourceData = () => { return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers1k-sql?`) .then((r) => r.json()) .then((data: Developer[]) => data); }; const columns: InfiniteTablePropColumns = { id: { field: 'id', type: 'number', defaultWidth: 100, }, salary: { defaultFilterable: true, field: 'salary', type: 'number', }, firstName: { field: 'firstName', }, stack: { field: 'stack' }, currency: { field: 'currency' }, }; export default () => { const [rowDisabledState, setRowDisabledState] = React.useState< RowDisabledStateObject >({ enabledRows: true, disabledRows: [1, 3, 4, 5], }); return ( <> data={data} primaryKey="id" rowDisabledState={rowDisabledState} onRowDisabledStateChange={(rowState) => { setRowDisabledState(rowState.getState()); }} > debugId="rowDisabledState-example" getCellContextMenuItems={({ rowInfo }, { dataSourceApi }) => { const rowDisabled = dataSourceApi.isRowDisabledAt( rowInfo.indexInAll, ); return { columns: [{ name: 'label' }], items: [ { label: 'Disable row', disabled: rowDisabled, key: 'disable-row', onAction: ({ hideMenu }) => { dataSourceApi.setRowEnabledAt(rowInfo.indexInAll, false); hideMenu(); }, }, { label: 'Enable row', disabled: !rowDisabled, key: 'enable-row', onAction: ({ hideMenu }) => { dataSourceApi.setRowEnabled(rowInfo.id, true); hideMenu(); }, }, { label: 'Toggle row enable/disable', key: 'toggle-row', onAction: ({ hideMenu }) => { dataSourceApi.setRowEnabled( rowInfo.id, dataSourceApi.isRowDisabled(rowInfo.id), ); hideMenu(); }, }, ], }; }} keyboardNavigation="row" columnDefaultWidth={120} columnMinWidth={50} columns={columns} /> ); }; ``` ### replaceAllData (`(data: DATA_TYPE[], options?: DataSourceCRUDParam) => Promise`) > Replaces all data in the DataSource with the provided data. Clears the current data array in the `` and replaces it with the provided data. When calling this, if there are pending data mutations, they will be discarded. See related [`clearAllData`](https://infinite-table.com/docs/reference/datasource-api/index.md#clearAllData) method. ### clearAllData (`() => Promise`) > Clears all data in the DataSource. See related [`replaceAllData`](https://infinite-table.com/docs/reference/datasource-api/index.md#replaceAllData) method. ### addData (`(data: DATA_TYPE) => Promise`) > Adds the specified data at the end of the data source. The given data param should be of type `DATA_TYPE` (the TypeScript generic data type that the `DataSource` was bound to). For adding an array of data, see the [`addDataArray`](https://infinite-table.com/docs/reference/datasource-api/index.md#addDataArray) method. If the component has [sorting](https://infinite-table.com/docs/reference/datasource-props/index.md#sortInfo), the added data might not be displayed at the end of the data source. This method batches data updates and waits for a request animation frame until it persists the data to the `DataSource`. This means you can execute multiple calls to `addData` (or [`updateData`](https://infinite-table.com/docs/reference/datasource-props/index.md#updateData), [`removeData`](https://infinite-table.com/docs/reference/datasource-props/index.md#removeData), [`insertData`](https://infinite-table.com/docs/reference/datasource-props/index.md#insertData)) in the same frame and they will be batched and persisted together. The return value is a `Promise` that resolves when the data has been added. When multiple `addData` (and friends) calls are executed in the same frame, the result of those calls is a reference to the same promise. ```ts const promise1 = dataSourceApi.add({ ... }) const promise2 = dataSourceApi.add({ ... }) const promise3 = dataSourceApi.insertData({ ... }, { position: 'before', primaryKey: 4 }) // promise1, promise2 and promise3 are the same promise // as the calls are run in the same raf and batched together // promise1 === promise2 // promise1 === promise3 ``` For adding an array of data, see the [`addDataArray`](https://infinite-table.com/docs/reference/datasource-api/index.md#addDataArray) method. For inserting data at a specific position, see the [`insertData`](https://infinite-table.com/docs/reference/datasource-api/index.md#insertData) method. [`onDataMutations`](https://infinite-table.com/docs/reference/datasource-props/index.md#onDataMutations) allows you to listen to data mutations. **Example: Using DataSourceApi.addData to update the DataSource** ```ts import * as React from 'react'; import { DataSourceApi, InfiniteTable, InfiniteTablePropColumns, } from '@infinite-table/infinite-react'; import { DataSource } from '@infinite-table/infinite-react'; type Developer = { id: number; firstName: string; lastName: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; age: number; }; const data: Developer[] = [ { id: 1, firstName: 'John', lastName: 'Bob', age: 20, canDesign: 'yes', currency: 'USD', preferredLanguage: 'JavaScript', stack: 'frontend', }, { id: 2, firstName: 'Marry', lastName: 'Bob', age: 25, canDesign: 'yes', currency: 'USD', preferredLanguage: 'JavaScript', stack: 'frontend', }, { id: 3, firstName: 'Bill', lastName: 'Bobson', age: 30, canDesign: 'no', currency: 'CAD', preferredLanguage: 'TypeScript', stack: 'frontend', }, { id: 4, firstName: 'Mark', lastName: 'Twain', age: 31, canDesign: 'yes', currency: 'CAD', preferredLanguage: 'Rust', stack: 'backend', }, { id: 5, firstName: 'Matthew', lastName: 'Hilson', age: 29, canDesign: 'yes', currency: 'CAD', preferredLanguage: 'Go', stack: 'backend', }, ]; const columns: InfiniteTablePropColumns = { id: { field: 'id', }, firstName: { field: 'firstName', }, age: { field: 'age', type: 'number', }, stack: { field: 'stack', renderMenuIcon: false }, currency: { field: 'currency' }, }; let ID = data.length; const currencies = ['USD', 'CAD', 'EUR', 'GBP', 'RUB', 'UAH', 'CNY']; const getMark = (): Developer => ({ id: ++ID, firstName: 'Mark', lastName: 'Berg', // random int from 20 to 60 age: Math.floor(Math.random() * (60 - 20 + 1)) + 20, canDesign: 'no', //random currency currency: currencies[Math.floor(Math.random() * currencies.length)], preferredLanguage: 'Go', stack: 'frontend', }); export default () => { const [dataSourceApi, setDataSourceApi] = React.useState>(); return ( <> data={data} primaryKey="id" onReady={setDataSourceApi} > debugId="addData-example" columnDefaultWidth={100} columnMinWidth={50} columns={columns} /> ); }; ``` ### addDataArray (`(data: DATA_TYPE[]) => Promise`) > Adds an array of data at the end of the data source See related [`addData`](https://infinite-table.com/docs/reference/datasource-api/index.md#addData) method. For adding at the beginning of the data source, see the [`insertDataArray`](https://infinite-table.com/docs/reference/datasource-api/index.md#insertDataArray) method. [`onDataMutations`](https://infinite-table.com/docs/reference/datasource-props/index.md#onDataMutations) allows you to listen to data mutations. ### getDataByNodePath (`(nodePath: NodePath) => DATA_TYPE | null`) > Retrieves the data object for the specified node path. **Example: Retrieving data by node path** ```tsx import { DataSourceApi, InfiniteTableColumn, TreeDataSource, TreeGrid, } from '@infinite-table/infinite-react'; import { useState } from 'react'; type FileSystemNode = { id: string; name: string; type: 'folder' | 'file'; extension?: string; mimeType?: string; sizeInKB: number; children?: FileSystemNode[]; }; const columns: Record> = { name: { field: 'name', header: 'Name', renderTreeIcon: true }, type: { field: 'type', header: 'Type' }, extension: { field: 'extension', header: 'Extension' }, mimeType: { field: 'mimeType', header: 'Mime Type' }, size: { field: 'sizeInKB', type: 'number', header: 'Size (KB)' }, }; export default function App() { const [dataSourceApi, setDataSourceApi] = useState | null>(); const [activeIndex, setActiveIndex] = useState(0); return ( <>

Developers in {rowInfo.data?.name}, {rowInfo.data?.country}

Developer: {data.firstName} {data.lastName}

Developers in {rowInfo.data?.name}, {rowInfo.data?.country}

Developers in {rowInfo.data?.name}, {rowInfo.data?.country}

Your DataGrid

Your DataGrid

Your DataGrid