Need help with react-data-grid?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

adazzle
4.9K Stars 1.9K Forks Other 2.2K Commits 69 Opened issues

Description

Feature-rich and customizable data grid React component

Services available

!
?

Need anything else?

Contributors list

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

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.

summaryRows?: Maybe

An optional array of summary rows, usually used to display total values for example.

rowKeyGetter?: Maybe 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 ; }

: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) => 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 ; }

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) => void>
sortColumns?: Maybe
onSortColumnsChange?: Maybe void>
defaultColumnOptions?: Maybe>
groupBy?: Maybe
rowGrouper?: Maybe Record>
expandedGroupIds?: Maybe>
onExpandedGroupIdsChange?: Maybe) => void>
onFill?: Maybe) => R>
onPaste?: Maybe) => R>
onRowClick?: Maybe) => void>
onRowDoubleClick?: Maybe) => void>
onScroll?: Maybe) => void>
onColumnResize?: Maybe void>
cellNavigationMode?: Maybe
enableVirtualization?: Maybe
rowRenderer?: Maybe>>

The default

 component can be wrapped via the 
rowRenderer
prop to add context providers or tweak props for example.
import DataGrid, { Row, RowRendererProps } from 'react-data-grid';

function MyRowRenderer(props: RowRendererProps) { return ( <mycontext.provider value="{123}"> </mycontext.provider> ); }

function MyGrid() { return ; }

:warning: To prevent all rows from being unmounted on re-renders, make sure to pass a static or memoized component to

rowRenderer
.
noRowsFallback?: React.ReactNode
rowClass?: Maybe Maybe>
className?: string | undefined
style?: CSSProperties | undefined
'aria-label'?: string | undefined
'aria-labelledby'?: string | undefined
'aria-describedby'?: string | undefined
'data-testid'?: Maybe

Props

See

EditorProps

See

rowRenderer

Props

See

RowRendererProps

The

ref
prop is supported.

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

Props

See

FormatterProps

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

Props

See

GroupFormatterProps

Hooks

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

Other

SelectColumn: Column

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.