react-data-grid
- Version 7.0.0-beta.59
- Published
- 412 kB
- No dependencies
- MIT license
Install
npm i react-data-gridyarn add react-data-gridpnpm add react-data-gridOverview
Feature-rich and customizable data grid React component
Index
Variables
Functions
Interfaces
DataGridProps
- 'data-cy'
- 'data-testid'
- bottomSummaryRows
- columns
- columnWidths
- defaultColumnOptions
- direction
- enableVirtualization
- headerRowClass
- headerRowHeight
- isRowSelectionDisabled
- onCellClick
- onCellContextMenu
- onCellCopy
- onCellDoubleClick
- onCellKeyDown
- onCellMouseDown
- onCellPaste
- onColumnResize
- onColumnsReorder
- onColumnWidthsChange
- onFill
- onRowsChange
- onScroll
- onSelectedCellChange
- onSelectedRowsChange
- onSortColumnsChange
- ref
- renderers
- rowClass
- rowHeight
- rowKeyGetter
- rows
- selectedRows
- sortColumns
- summaryRowHeight
- topSummaryRows
Type Aliases
Variables
variable DataGridDefaultRenderersContext
const DataGridDefaultRenderersContext: react0.Context<Renderers<any, any>>;variable SELECT_COLUMN_KEY
const SELECT_COLUMN_KEY: string;variable SelectColumn
const SelectColumn: Column<any, any>;Functions
function Cell
Cell: <R, SR>(props: CellRendererProps<R, SR>) => React.JSX.Element;function DataGrid
DataGrid: <R, SR = unknown, K extends Key = Key>( props: DataGridProps<R, SR, K>) => react_jsx_runtime0.JSX.Element;Main API Component to render a data grid of rows and columns
Example 1
<DataGrid columns={columns} rows={rows} />
function renderCheckbox
renderCheckbox: ({ onChange, indeterminate, ...props}: RenderCheckboxProps) => react_jsx_runtime0.JSX.Element;function renderHeaderCell
renderHeaderCell: <R, SR>({ column, sortDirection, priority,}: RenderHeaderCellProps<R, SR>) => string | react_jsx_runtime0.JSX.Element;function renderSortIcon
renderSortIcon: ({ sortDirection,}: RenderSortIconProps) => react_jsx_runtime0.JSX.Element | null;function renderSortPriority
renderSortPriority: ({ priority,}: RenderSortPriorityProps) => number | undefined;function renderTextEditor
renderTextEditor: <TRow, TSummaryRow>({ row, column, onRowChange, onClose,}: RenderEditCellProps<TRow, TSummaryRow>) => react_jsx_runtime0.JSX.Element;function renderToggleGroup
renderToggleGroup: <R, SR>( props: RenderGroupCellProps<R, SR>) => react_jsx_runtime0.JSX.Element;function renderValue
renderValue: <R, SR>(props: RenderCellProps<R, SR>) => react0.ReactNode;function Row
Row: <R, SR>(props: RenderRowProps<R, SR>) => React.JSX.Element;function SelectCellFormatter
SelectCellFormatter: ({ value, tabIndex, indeterminate, disabled, onChange, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy,}: SelectCellFormatterProps) => react0.ReactNode;function ToggleGroup
ToggleGroup: <R, SR>({ groupKey, isExpanded, tabIndex, toggleGroup,}: RenderGroupCellProps<R, SR>) => react_jsx_runtime0.JSX.Element;function TreeDataGrid
TreeDataGrid: <R, SR = unknown, K extends Key = Key>({ columns: rawColumns, rows: rawRows, rowHeight: rawRowHeight, rowKeyGetter: rawRowKeyGetter, onCellKeyDown: rawOnCellKeyDown, onCellCopy: rawOnCellCopy, onCellPaste: rawOnCellPaste, onRowsChange, selectedRows: rawSelectedRows, onSelectedRowsChange: rawOnSelectedRowsChange, renderers, groupBy: rawGroupBy, rowGrouper, expandedGroupIds, onExpandedGroupIdsChange, groupIdGetter: rawGroupIdGetter, ...props}: TreeDataGridProps<R, SR, K>) => react_jsx_runtime0.JSX.Element;function useHeaderRowSelection
useHeaderRowSelection: () => { isIndeterminate: boolean; isRowSelected: boolean; onRowSelectionChange: (selectRowEvent: SelectHeaderRowEvent) => void;};function useRowSelection
useRowSelection: () => { isRowSelectionDisabled: boolean; isRowSelected: boolean; onRowSelectionChange: (selectRowEvent: SelectRowEvent<any>) => void;};Interfaces
interface CalculatedColumn
interface CalculatedColumn<TRow, TSummaryRow = unknown> extends Column<TRow, TSummaryRow> {}property draggable
readonly draggable: boolean;property frozen
readonly frozen: boolean;property idx
readonly idx: number;property level
readonly level: number;property maxWidth
readonly maxWidth: number | undefined;property minWidth
readonly minWidth: number;property parent
readonly parent: CalculatedColumnParent<TRow, TSummaryRow> | undefined;property renderCell
readonly renderCell: (props: RenderCellProps<TRow, TSummaryRow>) => ReactNode;property renderHeaderCell
readonly renderHeaderCell: ( props: RenderHeaderCellProps<TRow, TSummaryRow>) => ReactNode;property resizable
readonly resizable: boolean;property sortable
readonly sortable: boolean;property width
readonly width: number | string;interface CalculatedColumnParent
interface CalculatedColumnParent<R, SR> {}property colSpan
readonly colSpan: number;property headerCellClass
readonly headerCellClass?: Maybe<string>;property idx
readonly idx: number;property level
readonly level: number;property name
readonly name: string | ReactElement;property parent
readonly parent: CalculatedColumnParent<R, SR> | undefined;interface CellMouseArgs
interface CellMouseArgs<TRow, TSummaryRow = unknown> {}property column
column: CalculatedColumn<TRow, TSummaryRow>;property row
row: TRow;property rowIdx
rowIdx: number;property selectCell
selectCell: (enableEditor?: boolean) => void;interface CellRendererProps
interface CellRendererProps<TRow, TSummaryRow> extends BaseCellRendererProps<TRow, TSummaryRow> {}property colSpan
colSpan: number | undefined;property column
column: CalculatedColumn<TRow, TSummaryRow>;property isCellSelected
isCellSelected: boolean;property isDraggedOver
isDraggedOver: boolean;property onRowChange
onRowChange: (column: CalculatedColumn<TRow, TSummaryRow>, newRow: TRow) => void;property row
row: TRow;interface CellSelectArgs
interface CellSelectArgs<TRow, TSummaryRow = unknown> {}interface Column
interface Column<TRow, TSummaryRow = unknown> {}property cellClass
readonly cellClass?: Maybe<string | ((row: TRow) => Maybe<string>)>;Class name(s) for cells
property colSpan
readonly colSpan?: Maybe< (args: ColSpanArgs<TRow, TSummaryRow>) => Maybe<number>>;property draggable
readonly draggable?: Maybe<boolean>;Enable dragging of the column
property editable
readonly editable?: Maybe<boolean | ((row: TRow) => boolean)>;Enables cell editing. If set and no editor property specified, then a textinput will be used as the cell editor
property editorOptions
readonly editorOptions?: Maybe<{ /** * Render the cell content in addition to the edit cell content. * Enable this option when the editor is rendered outside the grid, like a modal for example. * By default, the cell content is not rendered when the edit cell is open. * @default false */ readonly displayCellContent?: Maybe<boolean>; /** * Commit changes when clicking outside the cell * @default true */ readonly commitOnOutsideClick?: Maybe<boolean>; /** * Close the editor when the row value changes externally * @default true */ readonly closeOnExternalRowChange?: Maybe<boolean>;}>;Options for cell editing
property frozen
readonly frozen?: Maybe<boolean>;Determines whether column is frozen
property headerCellClass
readonly headerCellClass?: Maybe<string>;Class name(s) for the header cell
property key
readonly key: string;A unique key to distinguish each column
property maxWidth
readonly maxWidth?: Maybe<number>;Maximum column width in pixels
property minWidth
readonly minWidth?: Maybe<number>;Minimum column width in pixels 50
property name
readonly name: string | ReactElement;The name of the column. Displayed in the header cell by default
property renderCell
readonly renderCell?: Maybe< (props: RenderCellProps<TRow, TSummaryRow>) => ReactNode>;Render function to render the content of cells
property renderEditCell
readonly renderEditCell?: Maybe< (props: RenderEditCellProps<TRow, TSummaryRow>) => ReactNode>;Render function to render the content of edit cells. When set, the column is automatically set to be editable
property renderGroupCell
readonly renderGroupCell?: Maybe< (props: RenderGroupCellProps<TRow, TSummaryRow>) => ReactNode>;Render function to render the content of group cells
property renderHeaderCell
readonly renderHeaderCell?: Maybe< (props: RenderHeaderCellProps<TRow, TSummaryRow>) => ReactNode>;Render function to render the content of the header cell
property renderSummaryCell
readonly renderSummaryCell?: Maybe< (props: RenderSummaryCellProps<TSummaryRow, TRow>) => ReactNode>;Render function to render the content of summary cells
property resizable
readonly resizable?: Maybe<boolean>;Enable resizing of the column
property sortable
readonly sortable?: Maybe<boolean>;Enable sorting of the column
property sortDescendingFirst
readonly sortDescendingFirst?: Maybe<boolean>;Sets the column sort order to be descending instead of ascending the first time the column is sorted
property summaryCellClass
readonly summaryCellClass?: Maybe< string | ((row: TSummaryRow) => Maybe<string>)>;Class name(s) for summary cells
property width
readonly width?: Maybe<number | string>;Column width. If not specified, it will be determined automatically based on grid width and specified widths of other columns 'auto'
interface ColumnGroup
interface ColumnGroup<R, SR = unknown> {}property children
readonly children: readonly ColumnOrColumnGroup<R, SR>[];property headerCellClass
readonly headerCellClass?: Maybe<string>;property name
readonly name: string | ReactElement;The name of the column group, it will be displayed in the header cell
interface ColumnWidth
interface ColumnWidth {}interface DataGridHandle
interface DataGridHandle {}property element
element: HTMLDivElement | null;property scrollToCell
scrollToCell: (position: PartialPosition) => void;property selectCell
selectCell: (position: Position, options?: SelectCellOptions) => void;interface DataGridProps
interface DataGridProps<R, SR = unknown, K extends Key = Key> extends SharedDivProps {}property 'data-cy'
'data-cy'?: Maybe<string>;property 'data-testid'
'data-testid'?: Maybe<string>;property bottomSummaryRows
bottomSummaryRows?: Maybe<readonly SR[]>;Rows pinned at the bottom of the grid for summary purposes
property columns
columns: readonly ColumnOrColumnGroup<NoInfer<R>, NoInfer<SR>>[];An array of column definitions
property columnWidths
columnWidths?: Maybe<ColumnWidths>;A map of column widths
property defaultColumnOptions
defaultColumnOptions?: Maybe<DefaultColumnOptions<NoInfer<R>, NoInfer<SR>>>;Default options applied to all columns
property direction
direction?: Maybe<Direction>;Text direction of the grid ('ltr' or 'rtl') 'ltr'
property enableVirtualization
enableVirtualization?: Maybe<boolean>;true
property headerRowClass
headerRowClass?: Maybe<string>;Custom class name for the header row
property headerRowHeight
headerRowHeight?: Maybe<number>;Height of the header row in pixels 35
property isRowSelectionDisabled
isRowSelectionDisabled?: Maybe<(row: NoInfer<R>) => boolean>;Function to determine if row selection is disabled for a specific row
property onCellClick
onCellClick?: CellMouseEventHandler<R, SR>;Callback triggered when a cell is clicked
property onCellContextMenu
onCellContextMenu?: CellMouseEventHandler<R, SR>;Callback triggered when a cell is right-clicked
property onCellCopy
onCellCopy?: Maybe< ( args: CellCopyArgs<NoInfer<R>, NoInfer<SR>>, event: CellClipboardEvent ) => void>;Callback triggered when a cell's content is copied
property onCellDoubleClick
onCellDoubleClick?: CellMouseEventHandler<R, SR>;Callback triggered when a cell is double-clicked
property onCellKeyDown
onCellKeyDown?: Maybe< ( args: CellKeyDownArgs<NoInfer<R>, NoInfer<SR>>, event: CellKeyboardEvent ) => void>;Callback triggered when a key is pressed in a cell
property onCellMouseDown
onCellMouseDown?: CellMouseEventHandler<R, SR>;Callback triggered when a pointer becomes active in a cell
property onCellPaste
onCellPaste?: Maybe< ( args: CellPasteArgs<NoInfer<R>, NoInfer<SR>>, event: CellClipboardEvent ) => NoInfer<R>>;Callback triggered when content is pasted into a cell
property onColumnResize
onColumnResize?: Maybe<(column: CalculatedColumn<R, SR>, width: number) => void>;Callback triggered when column is resized
property onColumnsReorder
onColumnsReorder?: Maybe< (sourceColumnKey: string, targetColumnKey: string) => void>;Callback triggered when columns are reordered
property onColumnWidthsChange
onColumnWidthsChange?: Maybe<(columnWidths: ColumnWidths) => void>;Callback triggered when column widths change
property onFill
onFill?: Maybe<(event: FillEvent<NoInfer<R>>) => NoInfer<R>>;property onRowsChange
onRowsChange?: Maybe< (rows: NoInfer<R>[], data: RowsChangeData<NoInfer<R>, NoInfer<SR>>) => void>;Callback triggered when rows are changed
property onScroll
onScroll?: Maybe<(event: React.UIEvent<HTMLDivElement>) => void>;Callback triggered when the grid is scrolled
property onSelectedCellChange
onSelectedCellChange?: Maybe< (args: CellSelectArgs<NoInfer<R>, NoInfer<SR>>) => void>;Function called whenever cell selection is changed
property onSelectedRowsChange
onSelectedRowsChange?: Maybe<(selectedRows: Set<NoInfer<K>>) => void>;Callback triggered when the selection changes
property onSortColumnsChange
onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>;Callback triggered when sorting changes
property ref
ref?: Maybe<React.Ref<DataGridHandle>>;property renderers
renderers?: Maybe<Renderers<NoInfer<R>, NoInfer<SR>>>;Custom renderers for cells, rows, and other components
property rowClass
rowClass?: Maybe<(row: NoInfer<R>, rowIdx: number) => Maybe<string>>;Function to apply custom class names to rows
property rowHeight
rowHeight?: Maybe<number | ((row: NoInfer<R>) => number)>;Height of each row in pixels 35
property rowKeyGetter
rowKeyGetter?: Maybe<(row: NoInfer<R>) => K>;Function to return a unique key/identifier for each row
property rows
rows: readonly R[];A function called for each rendered row that should return a plain key/value pair object
property selectedRows
selectedRows?: Maybe<ReadonlySet<K>>;A set of selected row keys
property sortColumns
sortColumns?: Maybe<readonly SortColumn[]>;An array of sorted columns
property summaryRowHeight
summaryRowHeight?: Maybe<number>;Height of each summary row in pixels 35
property topSummaryRows
topSummaryRows?: Maybe<readonly SR[]>;Rows pinned at the top of the grid for summary purposes
interface FillEvent
interface FillEvent<TRow> {}interface RenderCellProps
interface RenderCellProps<TRow, TSummaryRow = unknown> {}property column
column: CalculatedColumn<TRow, TSummaryRow>;property isCellEditable
isCellEditable: boolean;property onRowChange
onRowChange: (row: TRow) => void;property row
row: TRow;property rowIdx
rowIdx: number;property tabIndex
tabIndex: number;interface RenderCheckboxProps
interface RenderCheckboxProps extends Pick< React.ComponentProps<'input'>, 'aria-label' | 'aria-labelledby' | 'checked' | 'tabIndex' | 'disabled' > {}property indeterminate
indeterminate?: boolean | undefined;property onChange
onChange: (checked: boolean, shift: boolean) => void;interface RenderEditCellProps
interface RenderEditCellProps<TRow, TSummaryRow = unknown> {}property column
column: CalculatedColumn<TRow, TSummaryRow>;property onClose
onClose: (commitChanges?: boolean, shouldFocusCell?: boolean) => void;property onRowChange
onRowChange: (row: TRow, commitChanges?: boolean) => void;property row
row: TRow;property rowIdx
rowIdx: number;interface Renderers
interface Renderers<TRow, TSummaryRow> {}property noRowsFallback
noRowsFallback?: Maybe<ReactNode>;property renderCell
renderCell?: Maybe< (key: Key, props: CellRendererProps<TRow, TSummaryRow>) => ReactNode>;property renderCheckbox
renderCheckbox?: Maybe<(props: RenderCheckboxProps) => ReactNode>;property renderRow
renderRow?: Maybe< (key: Key, props: RenderRowProps<TRow, TSummaryRow>) => ReactNode>;property renderSortStatus
renderSortStatus?: Maybe<(props: RenderSortStatusProps) => ReactNode>;interface RenderGroupCellProps
interface RenderGroupCellProps<TRow, TSummaryRow = unknown> {}property childRows
childRows: readonly TRow[];property column
column: CalculatedColumn<TRow, TSummaryRow>;property groupKey
groupKey: unknown;property isExpanded
isExpanded: boolean;property row
row: GroupRow<TRow>;property tabIndex
tabIndex: number;property toggleGroup
toggleGroup: () => void;interface RenderHeaderCellProps
interface RenderHeaderCellProps<TRow, TSummaryRow = unknown> {}property column
column: CalculatedColumn<TRow, TSummaryRow>;property priority
priority: number | undefined;property sortDirection
sortDirection: SortDirection | undefined;property tabIndex
tabIndex: number;interface RenderRowProps
interface RenderRowProps<TRow, TSummaryRow = unknown> extends BaseRenderRowProps<TRow, TSummaryRow> {}property draggedOverCellIdx
draggedOverCellIdx: number | undefined;property lastFrozenColumnIndex
lastFrozenColumnIndex: number;property onRowChange
onRowChange: ( column: CalculatedColumn<TRow, TSummaryRow>, rowIdx: number, newRow: TRow) => void;property row
row: TRow;property rowClass
rowClass: Maybe<(row: TRow, rowIdx: number) => Maybe<string>>;property selectedCellEditor
selectedCellEditor: ReactElement<RenderEditCellProps<TRow>> | undefined;interface RenderSortIconProps
interface RenderSortIconProps {}property sortDirection
sortDirection: SortDirection | undefined;interface RenderSortPriorityProps
interface RenderSortPriorityProps {}property priority
priority: number | undefined;interface RenderSortStatusProps
interface RenderSortStatusProps extends RenderSortIconProps, RenderSortPriorityProps {}interface RenderSummaryCellProps
interface RenderSummaryCellProps<TSummaryRow, TRow = unknown> {}interface RowsChangeData
interface RowsChangeData<R, SR = unknown> {}interface SelectCellOptions
interface SelectCellOptions {}property enableEditor
enableEditor?: Maybe<boolean>;property shouldFocusCell
shouldFocusCell?: Maybe<boolean>;interface SelectHeaderRowEvent
interface SelectHeaderRowEvent {}property checked
checked: boolean;interface SelectRowEvent
interface SelectRowEvent<TRow> {}interface SortColumn
interface SortColumn {}interface TreeDataGridProps
interface TreeDataGridProps<R, SR = unknown, K extends Key = Key> extends Omit< DataGridProps<R, SR, K>, | 'columns' | 'role' | 'aria-rowcount' | 'rowHeight' | 'onFill' | 'isRowSelectionDisabled' > {}property columns
columns: readonly Column<NoInfer<R>, NoInfer<SR>>[];property expandedGroupIds
expandedGroupIds: ReadonlySet<unknown>;property groupBy
groupBy: readonly string[];property groupIdGetter
groupIdGetter?: Maybe<(groupKey: string, parentId?: string) => string>;property onExpandedGroupIdsChange
onExpandedGroupIdsChange: (expandedGroupIds: Set<unknown>) => void;property rowGrouper
rowGrouper: ( rows: readonly NoInfer<R>[], columnKey: string) => Record<string, readonly NoInfer<R>[]>;property rowHeight
rowHeight?: Maybe<number | ((args: RowHeightArgs<NoInfer<R>>) => number)>;Type Aliases
type CalculatedColumnOrColumnGroup
type CalculatedColumnOrColumnGroup<R, SR> = | CalculatedColumnParent<R, SR> | CalculatedColumn<R, SR>;type CellCopyArgs
type CellCopyArgs<TRow, TSummaryRow = unknown> = CellCopyPasteArgs< TRow, TSummaryRow>;type CellKeyboardEvent
type CellKeyboardEvent = CellEvent<React.KeyboardEvent<HTMLDivElement>>;type CellKeyDownArgs
type CellKeyDownArgs<TRow, TSummaryRow = unknown> = | SelectCellKeyDownArgs<TRow, TSummaryRow> | EditCellKeyDownArgs<TRow, TSummaryRow>;type CellMouseEvent
type CellMouseEvent = CellEvent<React.MouseEvent<HTMLDivElement>>;type CellPasteArgs
type CellPasteArgs<TRow, TSummaryRow = unknown> = CellCopyPasteArgs< TRow, TSummaryRow>;type ColSpanArgs
type ColSpanArgs<TRow, TSummaryRow> = | { type: 'HEADER'; } | { type: 'ROW'; row: TRow; } | { type: 'SUMMARY'; row: TSummaryRow; };type ColumnOrColumnGroup
type ColumnOrColumnGroup<R, SR = unknown> = Column<R, SR> | ColumnGroup<R, SR>;type ColumnWidths
type ColumnWidths = ReadonlyMap<string, ColumnWidth>;type DefaultColumnOptions
type DefaultColumnOptions<R, SR> = Pick< Column<R, SR>, | 'renderCell' | 'renderHeaderCell' | 'width' | 'minWidth' | 'maxWidth' | 'resizable' | 'sortable' | 'draggable'>;type Direction
type Direction = 'ltr' | 'rtl';type RowHeightArgs
type RowHeightArgs<TRow> = | { type: 'ROW'; row: TRow; } | { type: 'GROUP'; row: GroupRow<TRow>; };type SortDirection
type SortDirection = 'ASC' | 'DESC';Package Files (1)
Dependencies (0)
No dependencies.
Dev Dependencies (37)
- @biomejs/biome
- @eslint-react/eslint-plugin
- @eslint/markdown
- @faker-js/faker
- @ianvs/prettier-plugin-sort-imports
- @tanstack/react-router
- @tanstack/router-plugin
- @types/node
- @types/react
- @types/react-dom
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- @vitejs/plugin-react
- @vitest/browser-playwright
- @vitest/coverage-istanbul
- @vitest/eslint-plugin
- clsx
- ecij
- eslint
- eslint-plugin-jest-dom
- eslint-plugin-react
- eslint-plugin-react-hooks
- eslint-plugin-sonarjs
- eslint-plugin-testing-library
- jspdf
- jspdf-autotable
- playwright
- postcss
- prettier
- react
- react-dom
- rolldown
- rolldown-plugin-dts
- typescript
- vite
- vitest
- vitest-browser-react
Peer Dependencies (2)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-data-grid.
- Markdown[](https://www.jsdocs.io/package/react-data-grid)
- HTML<a href="https://www.jsdocs.io/package/react-data-grid"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 5508 ms. - Missing or incorrect documentation? Open an issue for this package.
