Top Related Projects
React components for efficiently rendering large lists and tabular data
🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.
MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
Next Generation of react-bootstrap-table
JavaScript Data Grid / Data Table with a Spreadsheet Look & Feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡
Quick Overview
React-data-grid is a powerful and customizable data grid component for React applications. It provides a spreadsheet-like grid with features such as sorting, filtering, and editing, making it ideal for displaying and manipulating large datasets in web applications.
Pros
- High performance with efficient rendering for large datasets
- Extensive customization options for cell rendering and editing
- Built-in support for common features like sorting, filtering, and row selection
- Regular updates and active community support
Cons
- Steep learning curve for advanced customizations
- Documentation can be unclear or outdated for some features
- Some users report issues with TypeScript definitions
- Limited built-in styling options, requiring additional CSS work
Code Examples
- Basic grid setup:
import ReactDataGrid from 'react-data-grid';
const columns = [
{ key: 'id', name: 'ID' },
{ key: 'title', name: 'Title' }
];
const rows = [
{ id: 1, title: 'Example 1' },
{ id: 2, title: 'Example 2' }
];
function MyGrid() {
return <ReactDataGrid columns={columns} rows={rows} />;
}
- Implementing row selection:
import ReactDataGrid from 'react-data-grid';
function MySelectableGrid() {
const [selectedRows, setSelectedRows] = useState(new Set());
return (
<ReactDataGrid
columns={columns}
rows={rows}
selectedRows={selectedRows}
onSelectedRowsChange={setSelectedRows}
/>
);
}
- Custom cell renderer:
import ReactDataGrid from 'react-data-grid';
const columns = [
{
key: 'status',
name: 'Status',
cellRenderer: ({ row }) => (
<div className={`status-${row.status.toLowerCase()}`}>
{row.status}
</div>
)
}
];
function MyCustomGrid() {
return <ReactDataGrid columns={columns} rows={rows} />;
}
Getting Started
To use react-data-grid in your project:
-
Install the package:
npm install react-data-grid
-
Import and use in your React component:
import ReactDataGrid from 'react-data-grid'; import 'react-data-grid/lib/styles.css'; const columns = [ { key: 'id', name: 'ID' }, { key: 'title', name: 'Title' } ]; const rows = [ { id: 1, title: 'Row 1' }, { id: 2, title: 'Row 2' } ]; function MyComponent() { return <ReactDataGrid columns={columns} rows={rows} />; }
Remember to import the CSS file for basic styling. You can further customize the appearance using your own CSS.
Competitor Comparisons
React components for efficiently rendering large lists and tabular data
Pros of react-virtualized
- More versatile, supporting various virtualized components beyond just grids
- Better performance for large datasets due to advanced windowing techniques
- More active community and frequent updates
Cons of react-virtualized
- Steeper learning curve due to its more complex API
- Requires more setup and configuration for basic use cases
- Less focused on data grid functionality specifically
Code Comparison
react-virtualized:
import { Grid } from 'react-virtualized';
<Grid
cellRenderer={({ columnIndex, key, rowIndex, style }) => (
<div key={key} style={style}>
{data[rowIndex][columnIndex]}
</div>
)}
columnCount={columnCount}
columnWidth={100}
height={300}
rowCount={rowCount}
rowHeight={30}
width={300}
/>
react-data-grid:
import ReactDataGrid from 'react-data-grid';
<ReactDataGrid
columns={columns}
rowGetter={i => rows[i]}
rowsCount={rows.length}
minHeight={300}
/>
The code comparison shows that react-data-grid has a simpler API for basic grid functionality, while react-virtualized requires more configuration but offers greater flexibility for various virtualized components.
🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
Pros of TanStack Table
- More flexible and framework-agnostic, supporting React, Vue, Solid, and vanilla JS
- Offers advanced features like row grouping, aggregation, and pivoting out of the box
- Highly customizable with a powerful plugin system
Cons of TanStack Table
- Steeper learning curve due to its more complex API and configuration options
- Requires more setup and boilerplate code for basic use cases
- May have a larger bundle size due to its extensive feature set
Code Comparison
React Data Grid:
import ReactDataGrid from 'react-data-grid';
const columns = [/* column definitions */];
const rows = [/* row data */];
function MyGrid() {
return <ReactDataGrid columns={columns} rows={rows} />;
}
TanStack Table:
import { useTable } from '@tanstack/react-table';
const columns = [/* column definitions */];
const data = [/* row data */];
function MyTable() {
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data });
return (/* table rendering logic */);
}
Both libraries provide powerful data grid solutions for React applications. React Data Grid offers a simpler API and faster setup for basic use cases, while TanStack Table provides more advanced features and greater flexibility across different frameworks. The choice between them depends on the specific requirements of your project and the level of customization needed.
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.
Pros of ag-grid
- More feature-rich with advanced functionalities like pivoting, grouping, and aggregation
- Better performance for handling large datasets
- Extensive documentation and community support
Cons of ag-grid
- Steeper learning curve due to its complexity
- Larger bundle size, which may impact initial load times
- Commercial license required for some advanced features
Code Comparison
ag-grid:
<AgGridReact
columnDefs={columnDefs}
rowData={rowData}
defaultColDef={defaultColDef}
onGridReady={onGridReady}
/>
react-data-grid:
<DataGrid
columns={columns}
rows={rows}
onRowsChange={handleRowsChange}
/>
Key Differences
- ag-grid offers more built-in features and customization options
- react-data-grid has a simpler API and is easier to set up for basic use cases
- ag-grid provides better performance for large datasets, while react-data-grid is lighter and more suitable for smaller datasets
- ag-grid has a commercial version with additional features, whereas react-data-grid is fully open-source
Both libraries are popular choices for implementing data grids in React applications, with ag-grid being more suitable for complex enterprise-level projects and react-data-grid being a good fit for simpler use cases or projects with smaller datasets.
MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
Pros of MUI X
- More comprehensive UI component library, offering additional components beyond data grids
- Stronger TypeScript support and integration
- Better theming and customization options, aligning with Material Design principles
Cons of MUI X
- Steeper learning curve due to its extensive API and feature set
- Larger bundle size, which may impact performance in smaller applications
- Some advanced features require a paid license
Code Comparison
MUI X:
import { DataGrid } from '@mui/x-data-grid';
const columns = [
{ field: 'id', headerName: 'ID', width: 90 },
{ field: 'firstName', headerName: 'First name', width: 150 },
];
<DataGrid rows={rows} columns={columns} />
React-data-grid:
import ReactDataGrid from 'react-data-grid';
const columns = [
{ key: 'id', name: 'ID' },
{ key: 'firstName', name: 'First Name' },
];
<ReactDataGrid columns={columns} rows={rows} />
Both libraries offer similar basic functionality for creating data grids, but MUI X provides a more extensive set of features and customization options. React-data-grid is lighter and may be easier to implement for simpler use cases, while MUI X is better suited for complex applications requiring advanced functionality and consistent design across components.
Next Generation of react-bootstrap-table
Pros of react-bootstrap-table2
- More comprehensive documentation and examples
- Better integration with Bootstrap styling
- Easier to implement complex features like cell editing and filtering
Cons of react-bootstrap-table2
- Larger bundle size due to additional features
- Steeper learning curve for advanced functionalities
- Less performant with very large datasets
Code Comparison
react-bootstrap-table2:
import BootstrapTable from 'react-bootstrap-table-next';
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } />
react-data-grid:
import ReactDataGrid from 'react-data-grid';
const columns = [
{ key: 'id', name: 'ID' },
{ key: 'name', name: 'Name' }
];
<ReactDataGrid columns={columns} rows={rows} />
Both libraries offer similar basic functionality for creating data grids, but react-bootstrap-table2 provides more built-in features and styling options out of the box. react-data-grid, on the other hand, focuses on performance and simplicity, making it more suitable for larger datasets and custom implementations. The choice between the two depends on specific project requirements, desired styling, and performance needs.
JavaScript Data Grid / Data Table with a Spreadsheet Look & Feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡
Pros of Handsontable
- More feature-rich with built-in functionalities like sorting, filtering, and validation
- Supports various data types and cell types out of the box
- Offers both open-source and commercial versions with additional features
Cons of Handsontable
- Steeper learning curve due to its extensive API and configuration options
- Larger bundle size, which may impact performance for simpler use cases
- Commercial license required for some advanced features and enterprise use
Code Comparison
Handsontable:
const hot = new Handsontable(container, {
data: data,
columns: columns,
rowHeaders: true,
colHeaders: true,
filters: true
});
React-data-grid:
<ReactDataGrid
columns={columns}
rowGetter={i => data[i]}
rowsCount={data.length}
minHeight={500}
/>
Handsontable offers more built-in features with a single configuration object, while React-data-grid provides a simpler, more React-centric approach. Handsontable's setup allows for easy inclusion of features like filters, while React-data-grid may require additional components or custom implementations for similar functionality.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
react-data-grid
Features
- React 19.0+ support
- Evergreen browsers and server-side rendering support
- Tree-shaking support and only one npm dependency to keep your bundles slim
- Great performance thanks to virtualization: columns and rows outside the viewport are not rendered
- Strictly typed with TypeScript
- Keyboard accessibility
- Light and dark mode support out of the box. The light or dark themes can be enforced using the
rdg-light
orrdg-dark
classes. - Frozen columns
- Column resizing
- Multi-column sorting
- Click on a sortable column header to toggle between its ascending/descending sort order
- Ctrl+Click / Meta+Click to sort an additional column
- Column spanning
- Column grouping
- Row selection
- Row grouping
- Summary rows
- Dynamic row heights
- No rows fallback
- Cell formatting
- Cell editing
- Cell copy / pasting
- Cell value dragging / filling
- Customizable Renderers
- Right-to-left (RTL) support. We recommend using Firefox as Chrome has a bug with frozen columns.
Links
Install
npm install react-data-grid
react-data-grid
is published as ECMAScript modules for evergreen browsers, bundlers, and server-side rendering.
Quick start
import 'react-data-grid/lib/styles.css';
import { DataGrid } from 'react-data-grid';
const columns = [
{ key: 'id', name: 'ID' },
{ key: 'title', name: 'Title' }
];
const rows = [
{ id: 0, title: 'Example' },
{ id: 1, title: 'Demo' }
];
function App() {
return <DataGrid columns={columns} rows={rows} />;
}
API
Components
<DataGrid />
DataGridProps
columns: readonly Column<R, SR>[]
See Column
.
An array describing the grid's columns.
:warning: Passing a new columns
array will trigger a re-render for the whole grid, avoid changing it as much as possible for optimal performance.
rows: readonly R[]
An array of rows, the rows data can be of any type.
topSummaryRows?: Maybe<readonly SR[]>
An optional array of summary rows, usually used to display total values for example. topSummaryRows
are pinned at the top of the rows view and the vertical scroll bar will not scroll these rows.
bottomSummaryRows?: Maybe<readonly SR[]>
An optional array of summary rows, usually used to display total values for example. bottomSummaryRows
are pinned at the bottom of the rows view and the vertical scroll bar will not scroll these rows.
rowKeyGetter?: Maybe<(row: R) => K>
A function returning a unique key/identifier per row. rowKeyGetter
is required for row selection to work.
import { DataGrid } from 'react-data-grid';
interface Row {
id: number;
name: string;
}
function rowKeyGetter(row: Row) {
return row.id;
}
function MyGrid() {
return <DataGrid columns={columns} rows={rows} rowKeyGetter={rowKeyGetter} />;
}
:bulb: While optional, setting this prop is recommended for optimal performance as the returned value is used to set the key
prop on the row elements.
onRowsChange?: Maybe<(rows: R[], data: RowsChangeData<R, SR>) => void>
A function receiving row updates.
The first parameter is a new rows array with both the updated rows and the other untouched rows.
The second parameter is an object with an indexes
array highlighting which rows have changed by their index, and the column
where the change happened.
import { useState } from 'react';
import { DataGrid } from 'react-data-grid';
function MyGrid() {
const [rows, setRows] = useState(initialRows);
return <DataGrid columns={columns} rows={rows} onRowsChange={setRows} />;
}
rowHeight?: Maybe<number | ((row: R) => number)>
Default: 35
pixels
Either a number defining the height of row in pixels, or a function returning dynamic row heights.
headerRowHeight?: Maybe<number>
Default: 35
pixels
A number defining the height of the header row.
summaryRowHeight?: Maybe<number>
Default: 35
pixels
A number defining the height of summary rows.
selectedRows?: Maybe<ReadonlySet<K>>
A set of selected row keys. rowKeyGetter
is required for row selection to work.
isRowSelectionDisabled?: Maybe<(row: NoInfer<R>) => boolean>
A function used to disable row selection on certain rows.
onSelectedRowsChange?: Maybe<(selectedRows: Set<K>) => void>
A function called when row selection is changed.
import { useState } from 'react';
import { DataGrid, SelectColumn } from 'react-data-grid';
const rows: readonly Rows[] = [...];
const columns: readonly Column<Row>[] = [
SelectColumn,
// other columns
];
function MyGrid() {
const [selectedRows, setSelectedRows] = useState((): ReadonlySet<number> => new Set());
return (
<DataGrid
rowKeyGetter={rowKeyGetter}
columns={columns}
rows={rows}
selectedRows={selectedRows}
isRowSelectionDisabled={isRowSelectionDisabled}
onSelectedRowsChange={setSelectedRows}
/>
);
}
function rowKeyGetter(row: Row) {
return row.id;
}
function isRowSelectionDisabled(row: Row) {
return !row.isActive;
}
sortColumns?: Maybe<readonly SortColumn[]>
An array of sorted columns.
onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>
A function called when sorting is changed
import { useState } from 'react';
import { DataGrid, SelectColumn } from 'react-data-grid';
const rows: readonly Rows[] = [...];
const columns: readonly Column<Row>[] = [
{
key: 'name',
name: 'Name',
sortable: true
},
// other columns
];
function MyGrid() {
const [sortColumns, setSortColumns] = useState<readonly SortColumn[]>([]);
return (
<DataGrid
columns={columns}
rows={rows}
sortColumns={sortColumns}
onSortColumnsChange={setSortColumns}
/>
);
}
Grid can be sorted on multiple columns using ctrl (command) + click
. To disable multiple column sorting, change the onSortColumnsChange
function to
onSortColumnsChange(sortColumns: SortColumn[]) {
setSortColumns(sortColumns.slice(-1));
}
defaultColumnOptions?: Maybe<DefaultColumnOptions<R, SR>>
Column options that are applied to all the columns
function MyGrid() {
return (
<DataGrid
columns={columns}
rows={rows}
defaultColumnOptions={{
minWidth: 100,
resizable: true,
sortable: true,
draggable: true
}}
/>
);
}
onFill?: Maybe<(event: FillEvent<R>) => R>
onCopy?: Maybe<(event: CopyEvent<R>) => void>
onPaste?: Maybe<(event: PasteEvent<R>) => R>
onCellClick?: Maybe<(args: CellClickArgs<R, SR>, event: CellMouseEvent) => void>
Triggered when a cell is clicked. The default behavior is to select the cell. Call preventGridDefault
to prevent the default behavior
function onCellClick(args: CellClickArgs<R, SR>, event: CellMouseEvent) {
if (args.column.key === 'id') {
event.preventGridDefault();
}
}
<DataGrid rows={rows} columns={columns} onCellClick={onCellClick} />;
This event can be used to open cell editor on single click
function onCellClick(args: CellClickArgs<R, SR>, event: CellMouseEvent) {
if (args.column.key === 'id') {
event.preventGridDefault();
args.selectCell(true);
}
}
Arguments:
args: CellClickArgs<R, SR>
args.rowIdx
:number
- row index of the currently selected cellargs.row
:R
- row object of the currently selected cellargs.column
:CalculatedColumn<TRow, TSummaryRow>
- column object of the currently selected cellargs.selectCell
:(enableEditor?: boolean) => void
- function to manually select the cell and optionally passtrue
to start editing
event
extends React.MouseEvent<HTMLDivElement>
event.preventGridDefault:
:() => void
event.isGridDefaultPrevented
:boolean
onCellDoubleClick?: Maybe<(args: CellClickArgs<R, SR>, event: CellMouseEvent) => void>
Triggered when a cell is double clicked. The default behavior is to open the editor if the cell is editable. Call preventGridDefault
to prevent the default behavior
function onCellDoubleClick(args: CellClickArgs<R, SR>, event: CellMouseEvent) {
if (args.column.key === 'id') {
event.preventGridDefault();
}
}
<DataGrid rows={rows} columns={columns} onCellDoubleClick={onCellDoubleClick} />;
onCellContextMenu?: Maybe<(args: CellClickArgs<R, SR>, event: CellMouseEvent) => void>
Triggered when a cell is right clicked. The default behavior is to select the cell. Call preventGridDefault
to prevent the default behavior
function onCellContextMenu(args: CellClickArgs<R, SR>, event: CellMouseEvent) {
if (args.column.key === 'id') {
event.preventGridDefault();
}
}
<DataGrid rows={rows} columns={columns} onCellContextMenu={onCellContextMenu} />;
onCellKeyDown?: Maybe<(args: CellKeyDownArgs<R, SR>, event: CellKeyboardEvent) => void>
A function called when keydown event is triggered on a cell. This event can be used to customize cell navigation and editing behavior.
Examples
- Prevent editing on
Enter
function onCellKeyDown(args: CellKeyDownArgs<R, SR>, event: CellKeyboardEvent) {
if (args.mode === 'SELECT' && event.key === 'Enter') {
event.preventGridDefault();
}
}
- Prevent navigation on
Tab
function onCellKeyDown(args: CellKeyDownArgs<R, SR>, event: CellKeyboardEvent) {
if (args.mode === 'SELECT' && event.key === 'Tab') {
event.preventGridDefault();
}
}
Check more examples
onSelectedCellChange?: Maybe<(args: CellSelectArgs<R, SR>) => void>;
Triggered when the selected cell is changed.
Arguments:
args.rowIdx
:number
- row indexargs.row
:R
- row object of the currently selected cellargs.column
:CalculatedColumn<TRow, TSummaryRow>
- column object of the currently selected cell
onScroll?: Maybe<(event: React.UIEvent<HTMLDivElement>) => void>
A function called when the grid is scrolled.
onColumnResize?: Maybe<(column: CalculatedColumn<R, SR>, width: number) => void>
A function called when column is resized.
enableVirtualization?: Maybe<boolean>
Default: true
This prop can be used to disable virtualization.
renderers?: Maybe<Renderers<R, SR>>
This prop can be used to override the internal renderers. The prop accepts an object of type
interface Renderers<TRow, TSummaryRow> {
renderCell?: Maybe<(key: Key, props: CellRendererProps<TRow, TSummaryRow>) => ReactNode>;
renderCheckbox?: Maybe<(props: RenderCheckboxProps) => ReactNode>;
renderRow?: Maybe<(key: Key, props: RenderRowProps<TRow, TSummaryRow>) => ReactNode>;
renderSortStatus?: Maybe<(props: RenderSortStatusProps) => ReactNode>;
noRowsFallback?: Maybe<ReactNode>;
}
For example, the default <Row />
component can be wrapped via the renderRow
prop to add contexts or tweak props
import { DataGrid, RenderRowProps, Row } from 'react-data-grid';
function myRowRenderer(key: React.Key, props: RenderRowProps<Row>) {
return (
<MyContext key={key} value={123}>
<Row {...props} />
</MyContext>
);
}
function MyGrid() {
return <DataGrid columns={columns} rows={rows} renderers={{ renderRow: myRowRenderer }} />;
}
:warning: To prevent all rows from being unmounted on re-renders, make sure to pass a static or memoized component to renderRow
.
rowClass?: Maybe<(row: R, rowIdx: number) => Maybe<string>>
A function to add a class on the row
import { DataGrid } from 'react-data-grid';
function MyGrid() {
return <DataGrid columns={columns} rows={rows} rowClass={rowClass} />;
}
function rowClass(row: Row, rowIdx: number) {
return rowIdx % 2 === 0 ? 'even' : 'odd';
}
direction?: Maybe<'ltr' | 'rtl'>
This property sets the text direction of the grid, it defaults to 'ltr'
(left-to-right). Setting direction
to 'rtl'
has the following effects:
- Columns flow from right to left
- Frozen columns are pinned on the right
- Column resize handle is shown on the left edge of the column
- Scrollbar is moved to the left
className?: string | undefined
custom classname
style?: CSSProperties | undefined
custom styles
'aria-label'?: string | undefined
The label of the grid. We recommend providing a label using aria-label
or aria-labelledby
'aria-labelledby'?: string | undefined
The id of the element containing a label for the grid. We recommend providing a label using aria-label
or aria-labelledby
'aria-description'?: string | undefined
'aria-describedby'?: string | undefined
If the grid has a caption or description, aria-describedby
can be set on the grid element with a value referring to the element containing the description.
'data-testid'?: Maybe<string>
This prop can be used to add a testid for testing. We recommend using role
and name
to find the grid element
function MyGrid() {
return <DataGrid aria-label="my-grid" columns={columns} rows={rows} />;
}
function MyGridTest() {
const grid = screen.getByRole('grid', { name: 'my-grid' });
}
<TreeDataGrid />
TreeDataGrid
is component built on top of DataGrid
to add row grouping. This implements the Treegrid pattern. At the moment TreeDataGrid
does not support onFill
and isRowSelectionDisabled
props
TreeDataGridProps
groupBy?: Maybe<readonly string[]>
rowGrouper?: Maybe<(rows: readonly R[], columnKey: string) => Record<string, readonly R[]>>
expandedGroupIds?: Maybe<ReadonlySet<unknown>>
onExpandedGroupIdsChange?: Maybe<(expandedGroupIds: Set<unknown>) => void>
<TextEditor />
Props
<Row />
See renderers
Props
See RenderRowProps
The ref
prop is supported.
<SortableHeaderCell />
Props
onSort: (ctrlClick: boolean) => void
sortDirection: SortDirection | undefined
priority: number | undefined
tabIndex: number
children: React.ReactNode
<ValueFormatter />
Props
See FormatterProps
<SelectCellFormatter />
Props
value: boolean
tabIndex: number
disabled?: boolean | undefined
onChange: (value: boolean, isShiftClick: boolean) => void
onClick?: MouseEventHandler<T> | undefined
'aria-label'?: string | undefined
'aria-labelledby'?: string | undefined
<ToggleGroupFormatter />
Props
Hooks
useHeaderRowSelection<R>(): { isIndeterminate, isRowSelected, onRowSelectionChange }
useRowSelection<R>(): { isRowSelectionDisabled, isRowSelected, onRowSelectionChange }
Other
SelectColumn: Column<any, any>
SELECT_COLUMN_KEY = 'rdg-select-column'
Types
Column
name: string | ReactElement
The name of the column. By default it will be displayed in the header cell
key: string
A unique key to distinguish each column
width?: Maybe<number | string>
Default auto
Width can be any valid css grid column value. If not specified, it will be determined automatically based on grid width and specified widths of other columns.
width: 80; // pixels
width: '25%';
width: 'max-content';
width: 'minmax(100px, max-content)';
max-content
can be used to expand the column to show all the content. Note that the grid is only able to calculate column width for visible rows.
minWidth?: Maybe<number>
Default: 50
pixels
Sets the maximum width of a column.
maxWidth?: Maybe<number>
Sets the maximum width of a column.
cellClass?: Maybe<string | ((row: TRow) => Maybe<string>)>
A function to add a class on the row
headerCellClass?: Maybe<string>
summaryCellClass?: Maybe<string | ((row: TSummaryRow) => Maybe<string>)>
renderCell?: Maybe<(props: RenderCellProps<TRow, TSummaryRow>) => ReactNode>
Render function used to render the content of cells
renderHeaderCell
Render function used to render the content of header cells
renderSummaryCell
Render function used to render the content of summary cells
DataGridHandle
RenderEditCellProps
RenderCellProps
RenderGroupCellProps
RenderRowProps
Generics
R
,TRow
: Row typeSR
,TSummaryRow
: Summary row typeK
: Row key type
Top Related Projects
React components for efficiently rendering large lists and tabular data
🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.
MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
Next Generation of react-bootstrap-table
JavaScript Data Grid / Data Table with a Spreadsheet Look & Feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot