React Data Grid

Feature-rich and customizable data grid React component
Alternatives To React Data Grid
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Awesome React Components34,918
17 days ago1cc0-1.0
Curated List of React Components & Libraries.
Sheetjs32,5004,3792,297a month ago170March 24, 2022125apache-2.0JavaScript
📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs
React Virtualized24,7302,7281,60520 days ago294December 18, 2020512mitJavaScript
React components for efficiently rendering large lists and tabular data
Table21,0131,7701,122a day ago217May 16, 202286mitTypeScript
🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
React Grid Layout17,3558773478 days ago109February 21, 2022121mitJavaScript
A draggable and resizable grid layout with responsive breakpoints, for React.
React Sortable Hoc10,3683,669813a month ago75March 19, 2021283mitJavaScript
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
Ag Grid9,81832333221 hours ago59August 23, 202251otherTypeScript
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.
Rebass7,8817442822 months ago109October 28, 201996mitJavaScript
:atom_symbol: React primitive UI components built with styled-system.
React Data Grid5,924441206a day ago1,017September 16, 2022164otherTypeScript
Feature-rich and customizable data grid React component
Tabulator5,283314315 days ago78September 07, 202271mitJavaScript
Interactive Tables and Data Grids for JavaScript
Alternatives To React Data Grid
Select To Compare


Alternative Project Comparisons
Readme

react-data-grid

npm-badge type-badge size-badge codecov-badge ci-badge

Features

Links

Install

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

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 />

Props
columns: readonly Column<R, SR>[]

See Column.

An array describing the grid's columns.

⚠️ 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[]>
bottomSummaryRows?: Maybe<readonly SR[]>

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.

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} />;
}

💡 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 | ((args: RowHeightArgs<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>>
onSelectedRowsChange?: Maybe<(selectedRows: Set<K>) => void>
sortColumns?: Maybe<readonly SortColumn[]>
onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>
defaultColumnOptions?: Maybe<DefaultColumnOptions<R, SR>>
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>
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>
onCellDoubleClick?: Maybe<(args: CellClickArgs<R, SR>, event: CellMouseEvent) => void>
onCellContextMenu?: Maybe<(args: CellClickArgs<R, SR>, event: CellMouseEvent) => void>
onCellKeyDown?: Maybe<(args: CellKeyDownArgs<R, SR>, event: CellKeyboardEvent) => void>
onScroll?: Maybe<(event: React.UIEvent<HTMLDivElement>) => void>
onColumnResize?: Maybe<(idx: number, width: number) => void>
enableVirtualization?: Maybe<boolean>
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> {
  sortStatus?: Maybe<(props: SortStatusProps) => ReactNode>;
  checkboxFormatter?: Maybe<
    (props: CheckboxFormatterProps, ref: Ref<HTMLInputElement>) => ReactNode
  >;
  rowRenderer?: Maybe<(key: Key, props: RowRendererProps<TRow, TSummaryRow>) => ReactNode>;
  noRowsFallback?: Maybe<ReactNode>;
}

For example, the default <Row /> component can be wrapped via the rowRenderer prop to add context providers or tweak props

import DataGrid, { Row, RowRendererProps } from 'react-data-grid';

function myRowRenderer(key: React.Key, props: RowRendererProps<Row>) {
  return (
    <MyContext.Provider key={key} value={123}>
      <Row {...props} />
    </MyContext.Provider>
  );
}

function MyGrid() {
  return <DataGrid columns={columns} rows={rows} renderers={{ rowRenderer: myRowRenderer }} />;
}

⚠️ To prevent all rows from being unmounted on re-renders, make sure to pass a static or memoized component to rowRenderer.

rowClass?: Maybe<(row: R) => Maybe<string>>
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<string>

<TextEditor />

Props

See EditorProps

<Row />

See renderers

Props

See RowRendererProps

The ref prop is supported.

<SortableHeaderCell />

Props
onSort: (ctrlClick: boolean) => void
sortDirection: SortDirection | undefined
priority: number | undefined
isCellSelected: boolean
children: React.ReactNode

<ValueFormatter />

Props

See FormatterProps

<SelectCellFormatter />

Props
value: boolean
isCellSelected: boolean
disabled?: boolean | undefined
onChange: (value: boolean, isShiftClick: boolean) => void
onClick?: MouseEventHandler<T> | undefined
'aria-label'?: string | undefined
'aria-labelledby'?: string | undefined

<ToggleGroupFormatter />

Props

See GroupFormatterProps

Hooks

useRowSelection<R>(): [boolean, (selectRowEvent: SelectRowEvent<R>) => void]

Other

SelectColumn: Column<any, any>

SELECT_COLUMN_KEY = 'select-row'

Types

Column

DataGridHandle

EditorProps

FormatterProps

GroupFormatterProps

RowRendererProps

Generics

  • R, TRow: Row type
  • SR, TSummaryRow: Summary row type
  • K: Row key type
Popular Grid Projects
Popular Reactjs Projects
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Typescript
Reactjs
Editor
Grid
Keyboard
Navigation
Excel
Datagrid
Grid Component