website·Indexed 32 days ago
https://infinite-table.com/docsA high-performance React DataGrid component featuring advanced column management, Excel-like inline editing, client-side and server-side filtering, and complex grouping and pivoting capabilities. Includes support for custom column rendering via hooks like useInfiniteColumnCell and useInfiniteHeaderCell, as well as flexible aggregation and pivot column customization.
The inline editing process follows this sequence of operations:
startEdit is called (API or User).column.getValueToEdit.stopEdit is called, resulting in one of three states:onEditCancelled() is triggered.onEditRejected() is triggered.onEditAccepted() is triggered.props.persistEdit is defined, it is called (async).dataSourceApi.updateData(...).onEditPersistSuccess() or onEditPersistError() is called.The useInfiniteColumnCell hook is used within columns.render, column.components.ColumnCell, or other rendering functions to retrieve information about the cell currently being rendered.
Important Implementation Details:
column.components.ColumnCell), you must extract domRef from the hook result and apply it to the root DOM element of the component.columns.render or columns.renderValue, you should NOT pass the domRef to the element.import { useInfiniteColumnCell } from '@infinite-table/infinite-react';
const CustomCellComponent = (props: React.HTMLProps<HTMLDivElement>) => {
// Extract domRef and other cell data
const { domRef, value, data } = useInfiniteColumnCell<Developer>();
return (
<div ref={domRef} {...props} style={{ ...props.style, color: 'red' }}>
{props.children}
</div>
);
};import { InfiniteTable, DataSource } from '@infinite-table/infinite-react';
// Example setup for 10k rows
<DataSource<Employee> data={dataSource} primaryKey="id">
<InfiniteTable<Employee>
debugId="many-rows-and-columns-example"
columns={columns}
columnDefaultWidth={150}
/>
</DataSource>onCellClick callback is triggered whenever a cell in the Infinite Table is clicked. It provides detailed context about the clicked cell, including its row and column indices, the column definition, and references to the Column, Table, and Data Source APIs. The second argument provided to the callback is the native browser click event.onCellClick(({ colIndex, rowIndex, column, columnApi, api, dataSourceApi }, event) => {
console.log(`Cell clicked at row ${rowIndex}, column ${colIndex}`);
// Use dataSourceApi to fetch data or api to manipulate the table
})Infinite Table and MUI X Data Grid are both React-based data grids using declarative, prop-driven APIs and JSX cell renderers. However, they differ significantly in their architectural approach to design systems and data management:
@emotion, theme provider). Infinite Table is design-system agnostic and uses CSS variables, making it compatible with Tailwind, vanilla CSS, or any other system without extra dependencies.<DataSource> (handles fetching, sorting, grouping, pivoting, and filtering) and <InfiniteTable> (handles rendering). MUI X Data Grid uses a single component (<DataGrid>, <DataGridPro>, or <DataGridPremium>) to handle both.Infinite Table and TanStack Table represent two different approaches to building data tables in React:
Key Architectural Differences:
rowInfo object provides metadata about the current row. It is used by functions like columns.render, rowStyle, and rowClassName to determine how to render cells or rows.// Discriminator for ungrouped scenario
if (rowInfo.dataSourceHasGrouping === false) {
// Access properties:
// rowInfo.data: The row data
// rowInfo.id: Row ID defined by idProperty
// rowInfo.indexInAll: Index in the full dataset
// rowInfo.selfLoaded: Boolean for lazy-loading batching indicators
}The InfiniteTableColumnCellContextType is the type used for the parameter of columns.renderValue (and related rendering functions) and is the object returned by the useInfiniteColumnCell hook. It provides comprehensive context about the cell, row, and table state during rendering.
isGroupRow (boolean): Indicates if the current row is a group row.data (DATA_TYPE | Partial<DATA_TYPE> | null): The data object for the current row. If isGroupRow is false, it is of type DATA_TYPE. For group rows, it may be a partial object containing aggregated values or null.rowInfo (InfiniteTableRowInfo): Detailed information about the current row.rawValue (string | number | other): The raw cell value computed from the column field or valueGetter function.value (Renderable): The value to render. This is the rawValue processed by the column valueFormatter if one exists.column (InfiniteTableComputedColumn): The computed column definition for the current cell.columnsMap: A map of InfiniteTableComputedColumn objects keyed by column ID.fieldsToColumn: A map of InfiniteTableComputedColumn objects keyed by the column field (excludes columns not bound to a field).align ("start" | "center" | "end"): The computed alignment for the current cell.api (InfiniteTableApi): The table API object.rowIndex (number): The index of the current row.renderBag: Context for the column rendering pipeline.toggleCurrentGroupRow (() => void): Function to toggle the current row if it is a group row.toggleCurrentTreeNode (() => void): Function to toggle the expand/collapse state of the current tree node (Tree Grid only).rootGroupBy (DataSourceGroupBy): The group-by configuration specified in the DataSource groupBy prop.groupByForColumn: Available for group columns.groupRenderStrategy is "multi-column", this is a single DataSourcePropGroupBy for each generated group column.groupRenderStrategy is "single-column", this is an array of DataSourcePropGroupBy objects, available only in the single generated group column.InfiniteTableRowInfo object is passed to styling functions in Infinite Table to provide context about the row being rendered. It includes properties for identification (id), data access (data), positioning (indexInAll, indexInGroup), and grouping state (groupBy, isGroupRow, collapsed).useMasterRowInfo hook is used inside a components.RowDetail component to retrieve information about the master row that is currently being detailed. This is essential for implementing dependent data loading (e.g., loading developers for a specific city).function RowDetail() {
const rowInfo = useMasterRowInfo<City>()!;
console.log('rendering detail for master row', rowInfo.id);
// rowInfo.data contains the full data object for the master row
return <div>Details for {rowInfo.data.name}</div>;
}Infinite Table is a React-native data grid focusing on a small, composable API surface using declarative props and JSX renderers. It includes grouping, pivoting, and tree data in its free tier.
Key alternatives include: