Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
---|---|---|---|---|---|---|---|---|---|---|
Awesome React Components | 34,918 | 17 days ago | 1 | cc0-1.0 | ||||||
Curated List of React Components & Libraries. | ||||||||||
Sheetjs | 32,500 | 4,379 | 2,297 | a month ago | 170 | March 24, 2022 | 125 | apache-2.0 | JavaScript | |
📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs | ||||||||||
React Virtualized | 24,730 | 2,728 | 1,605 | 20 days ago | 294 | December 18, 2020 | 512 | mit | JavaScript | |
React components for efficiently rendering large lists and tabular data | ||||||||||
Table | 21,013 | 1,770 | 1,122 | a day ago | 217 | May 16, 2022 | 86 | mit | TypeScript | |
🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table | ||||||||||
React Grid Layout | 17,355 | 877 | 347 | 8 days ago | 109 | February 21, 2022 | 121 | mit | JavaScript | |
A draggable and resizable grid layout with responsive breakpoints, for React. | ||||||||||
React Sortable Hoc | 10,368 | 3,669 | 813 | a month ago | 75 | March 19, 2021 | 283 | mit | JavaScript | |
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️ | ||||||||||
Ag Grid | 9,818 | 323 | 332 | 21 hours ago | 59 | August 23, 2022 | 51 | other | TypeScript | |
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript. | ||||||||||
Rebass | 7,881 | 744 | 282 | 2 months ago | 109 | October 28, 2019 | 96 | mit | JavaScript | |
:atom_symbol: React primitive UI components built with styled-system. | ||||||||||
React Data Grid | 5,924 | 441 | 206 | a day ago | 1,017 | September 16, 2022 | 164 | other | TypeScript | |
Feature-rich and customizable data grid React component | ||||||||||
Tabulator | 5,283 | 31 | 43 | 15 days ago | 78 | September 07, 2022 | 71 | mit | JavaScript | |
Interactive Tables and Data Grids for JavaScript |
rdg-light
or rdg-dark
classes.:dir
pseudo class is not supportednpm install react-data-grid
react-data-grid
is published as ECMAScript modules for evergreen browsers / bundlers, and CommonJS for server-side rendering / Jest.
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} />;
}
<DataGrid />
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:
className?: string | undefined
style?: CSSProperties | undefined
'aria-label'?: string | undefined
'aria-labelledby'?: string | undefined
'aria-describedby'?: string | undefined
'data-testid'?: Maybe<string>
<TextEditor />
See EditorProps
<Row />
See renderers
See RowRendererProps
The ref
prop is supported.
<SortableHeaderCell />
onSort: (ctrlClick: boolean) => void
sortDirection: SortDirection | undefined
priority: number | undefined
isCellSelected: boolean
children: React.ReactNode
<ValueFormatter />
See FormatterProps
<SelectCellFormatter />
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 />
useRowSelection<R>(): [boolean, (selectRowEvent: SelectRowEvent<R>) => void]
SelectColumn: Column<any, any>
SELECT_COLUMN_KEY = 'select-row'
Column
DataGridHandle
EditorProps
FormatterProps
GroupFormatterProps
RowRendererProps
R
, TRow
: Row typeSR
, TSummaryRow
: Summary row typeK
: Row key type