# react-data-grid [![npm-badge]][npm-url] [![type-badge]][npm-url] [![size-badge]][size-url] [![codecov-badge]][codecov-url] [![ci-badge]][ci-url] [npm-badge]: https://img.shields.io/npm/v/react-data-grid [npm-url]: https://www.npmjs.com/package/react-data-grid [size-badge]: https://img.shields.io/bundlephobia/minzip/react-data-grid [size-url]: https://bundlephobia.com/package/react-data-grid [type-badge]: https://img.shields.io/npm/types/react-data-grid [codecov-badge]: https://codecov.io/gh/adazzle/react-data-grid/branch/main/graph/badge.svg?token=cvrRSWiz0Q [codecov-url]: https://app.codecov.io/gh/adazzle/react-data-grid/branch/main [ci-badge]: https://github.com/adazzle/react-data-grid/workflows/CI/badge.svg [ci-url]: https://github.com/adazzle/react-data-grid/actions ## Features - [React 18.0+](package.json) support - [Evergreen browsers and server-side rendering](browserslist) support - Tree-shaking support and only [one npm dependency](package.json) 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](<(https://adazzle.github.io/react-data-grid/#/common-features)>) - Light and dark mode support out of the box. The light or dark themes can be enforced using the `rdg-light` or `rdg-dark` classes. - [Frozen columns](https://adazzle.github.io/react-data-grid/#/common-features) - [Column resizing](https://adazzle.github.io/react-data-grid/#/common-features) - [Multi-column sorting](https://adazzle.github.io/react-data-grid/#/common-features) - 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](https://adazzle.github.io/react-data-grid/#/column-spanning) - [Column grouping](https://adazzle.github.io/react-data-grid/#/column-grouping) - [Row selection](https://adazzle.github.io/react-data-grid/#/common-features) - [Row grouping](https://adazzle.github.io/react-data-grid/#/row-grouping) - [Summary rows](https://adazzle.github.io/react-data-grid/#/common-features) - [Dynamic row heights](https://adazzle.github.io/react-data-grid/#/variable-row-height) - [No rows fallback](https://adazzle.github.io/react-data-grid/#/no-rows) - [Cell formatting](https://adazzle.github.io/react-data-grid/#/common-features) - [Cell editing](https://adazzle.github.io/react-data-grid/#/common-features) - [Cell copy / pasting](https://adazzle.github.io/react-data-grid/#/all-features) - [Cell value dragging / filling](https://adazzle.github.io/react-data-grid/#/all-features) - [Customizable Renderers](https://adazzle.github.io/react-data-grid/#/customizable-renderers) - Right-to-left (RTL) support. We recommend using Firefox as Chrome has a [bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1140374) with frozen columns, and the [`:dir` pseudo class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) is not supported ## Links - [Examples website](https://adazzle.github.io/react-data-grid/) - [Source code](website) - [Old website for react-data-grid v6](https://adazzle.github.io/react-data-grid/old/) - [Changelog](CHANGELOG.md) - [Contributing](CONTRIBUTING.md) ## Install ```sh npm install react-data-grid ``` `react-data-grid` is published as ECMAScript modules for evergreen browsers / bundlers, and CommonJS for server-side rendering / Jest. ## Quick start ```jsx 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 ; } ``` ## API ### Components #### `` ##### Props ###### `columns: readonly Column[]` See [`Column`](#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` ###### `bottomSummaryRows?: Maybe` An optional array of summary rows, usually used to display total values for example. ###### `rowKeyGetter?: Maybe<(row: R) => K>` A function returning a unique key/identifier per row. `rowKeyGetter` is required for row selection to work. ```tsx import DataGrid from 'react-data-grid'; interface Row { id: number; name: string; } function rowKeyGetter(row: Row) { return row.id; } function MyGrid() { return ; } ``` :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) => 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. ```tsx import { useState } from 'react'; import DataGrid from 'react-data-grid'; function MyGrid() { const [rows, setRows] = useState(initialRows); return ; } ``` ###### `rowHeight?: Maybe number)>` **Default:** `35` pixels Either a number defining the height of row in pixels, or a function returning dynamic row heights. ###### `headerRowHeight?: Maybe` **Default:** `35` pixels A number defining the height of the header row. ###### `summaryRowHeight?: Maybe` **Default:** `35` pixels A number defining the height of summary rows. ###### `selectedRows?: Maybe>` ###### `onSelectedRowsChange?: Maybe<(selectedRows: Set) => void>` ###### `sortColumns?: Maybe` ###### `onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>` ###### `defaultColumnOptions?: Maybe>` ###### `groupBy?: Maybe` ###### `rowGrouper?: Maybe<(rows: readonly R[], columnKey: string) => Record>` ###### `expandedGroupIds?: Maybe>` ###### `onExpandedGroupIdsChange?: Maybe<(expandedGroupIds: Set) => void>` ###### `onFill?: Maybe<(event: FillEvent) => R>` ###### `onCopy?: Maybe<(event: CopyEvent) => void>` ###### `onPaste?: Maybe<(event: PasteEvent) => R>` ###### `onCellClick?: Maybe<(args: CellClickArgs, event: CellMouseEvent) => void>` ###### `onCellDoubleClick?: Maybe<(args: CellClickArgs, event: CellMouseEvent) => void>` ###### `onCellContextMenu?: Maybe<(args: CellClickArgs, event: CellMouseEvent) => void>` ###### `onCellKeyDown?: Maybe<(args: CellKeyDownArgs, event: CellKeyboardEvent) => void>` ###### `onSelectedCellChange?: Maybe<(args: CellSelectArgs) => void>;` Triggered when the selected cell is changed. Arguments: - `args.rowIdx`: `number` - row index - `args.row`: `R` - row object of the currently selected cell - `args.column`: `CalculatedColumn` - column object of the currently selected cell ###### `onScroll?: Maybe<(event: React.UIEvent) => void>` ###### `onColumnResize?: Maybe<(idx: number, width: number) => void>` ###### `enableVirtualization?: Maybe` ###### `renderers?: Maybe>` This prop can be used to override the internal renderers. The prop accepts an object of type ```tsx interface Renderers { renderCheckbox?: Maybe<(props: RenderCheckboxProps) => ReactNode>; renderRow?: Maybe<(key: Key, props: RenderRowProps) => ReactNode>; renderSortStatus?: Maybe<(props: RenderSortStatusProps) => ReactNode>; noRowsFallback?: Maybe; } ``` For example, the default `` component can be wrapped via the `renderRow` prop to add context providers or tweak props ```tsx import DataGrid, { RenderRowProps, Row } from 'react-data-grid'; function myRowRenderer(key: React.Key, props: RenderRowProps) { return ( ); } function MyGrid() { return ; } ``` :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) => Maybe>` ##### `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` ###### `style?: CSSProperties | undefined` ###### `'aria-label'?: string | undefined` ###### `'aria-labelledby'?: string | undefined` ###### `'aria-describedby'?: string | undefined` ###### `'data-testid'?: Maybe` #### `` ##### Props See [`RenderEditCellProps`](#rendereditcellprops) #### `` See [`renderers`](#renderers-mayberenderersr-sr) ##### Props See [`RenderRowProps`](#renderrowprops) The `ref` prop is supported. #### `` ##### Props ###### `onSort: (ctrlClick: boolean) => void` ###### `sortDirection: SortDirection | undefined` ###### `priority: number | undefined` ###### `tabIndex: number` ###### `children: React.ReactNode` #### `` ##### Props See [`FormatterProps`](#formatterprops) #### `` ##### Props ###### `value: boolean` ###### `tabIndex: number` ###### `disabled?: boolean | undefined` ###### `onChange: (value: boolean, isShiftClick: boolean) => void` ###### `onClick?: MouseEventHandler | undefined` ###### `'aria-label'?: string | undefined` ###### `'aria-labelledby'?: string | undefined` #### `` ##### Props See [`RenderGroupCellProps`](#rendergroupcellprops) ### Hooks #### `useRowSelection(): [boolean, (selectRowEvent: SelectRowEvent) => void]` ### Other #### `SelectColumn: Column` #### `SELECT_COLUMN_KEY = 'select-row'` ### Types #### `Column` #### `DataGridHandle` #### `RenderEditCellProps` #### `RenderCellProps` #### `RenderGroupCellProps` #### `RenderRowProps` ### Generics - `R`, `TRow`: Row type - `SR`, `TSummaryRow`: Summary row type - `K`: Row key type

	Stars	Issues	Version	Updated	Created
ag-grid	11,813	53	18.1.2	6 years ago	9 years ago
datatables.net	45	1	2.0.6	a day ago	9 years ago
handsontable	19,100	440	14.3.0	18 days ago	8 years ago
react-data-grid	6,700	173	7.0.0-beta.43	2 months ago	9 years ago
react-table	24,158	172	7.8.0	2 years ago	10 years ago

ag-grid vs datatables.net vs handsontable vs react-data-grid vs react-table

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past