react-data-grid
- Version 7.0.0-beta.43
- Published
- 802 kB
- 1 dependency
- MIT license
Install
npm i react-data-grid
yarn add react-data-grid
pnpm add react-data-grid
Overview
Feature-rich and customizable data grid React component
Index
Variables
Functions
Interfaces
DataGridProps
- 'data-testid'
- bottomSummaryRows
- columns
- defaultColumnOptions
- direction
- enableVirtualization
- headerRowHeight
- onCellClick
- onCellContextMenu
- onCellDoubleClick
- onCellKeyDown
- onColumnResize
- onColumnsReorder
- onCopy
- onFill
- onPaste
- onRowsChange
- onScroll
- onSelectedCellChange
- onSelectedRowsChange
- onSortColumnsChange
- renderers
- rowClass
- rowHeight
- rowKeyGetter
- rows
- selectedRows
- sortColumns
- summaryRowHeight
- topSummaryRows
Type Aliases
Variables
variable DataGridDefaultRenderersProvider
const DataGridDefaultRenderersProvider: Provider<Renderers<any, any>>;
variable SELECT_COLUMN_KEY
const SELECT_COLUMN_KEY: string;
variable SelectColumn
const SelectColumn: Column<any, any>;
Functions
function _default
_default: <R, SR = unknown, K extends Key = Key>(props: any) => JSX.Element;
function renderCheckbox
renderCheckbox: ({ onChange, ...props }: RenderCheckboxProps) => JSX_2.Element;
function renderHeaderCell
renderHeaderCell: <R, SR>({ column, sortDirection, priority,}: RenderHeaderCellProps<R, SR>) => string | JSX_2.Element;
function renderSortIcon
renderSortIcon: ({ sortDirection }: RenderSortIconProps) => JSX_2.Element | null;
function renderSortPriority
renderSortPriority: ({ priority,}: RenderSortPriorityProps) => number | undefined;
function renderToggleGroup
renderToggleGroup: <R, SR>(props: RenderGroupCellProps<R, SR>) => JSX_2.Element;
function renderValue
renderValue: <R, SR>(props: RenderCellProps<R, SR>) => ReactNode;
function Row
Row: <R, SR>(props: any) => JSX.Element;
function SelectCellFormatter
SelectCellFormatter: ({ value, tabIndex, disabled, onChange, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy,}: SelectCellFormatterProps) => ReactNode;
function textEditor
textEditor: <TRow, TSummaryRow>({ row, column, onRowChange, onClose,}: RenderEditCellProps<TRow, TSummaryRow>) => JSX_2.Element;
function ToggleGroup
ToggleGroup: <R, SR>({ groupKey, isExpanded, tabIndex, toggleGroup,}: RenderGroupCellProps<R, SR>) => JSX_2.Element;
function TreeDataGrid
TreeDataGrid: <R, SR = unknown, K extends Key = Key>(props: any) => JSX.Element;
function useRowSelection
useRowSelection: <R>() => [boolean, (selectRowEvent: SelectRowEvent<R>) => 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 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 CellClickArgs
interface CellClickArgs<TRow, TSummaryRow = unknown> {}
property column
column: CalculatedColumn<TRow, TSummaryRow>;
property row
row: TRow;
property selectCell
selectCell: (enableEditor?: boolean) => void;
interface CellRendererProps
interface CellRendererProps<TRow, TSummaryRow> extends Pick<RenderRowProps<TRow, TSummaryRow>, 'row' | 'rowIdx' | 'selectCell'>, Omit_2< React.HTMLAttributes<HTMLDivElement>, 'style' | 'children' | 'onClick' | 'onDoubleClick' | 'onContextMenu' > {}
property colSpan
colSpan: number | undefined;
property column
column: CalculatedColumn<TRow, TSummaryRow>;
property isCellSelected
isCellSelected: boolean;
property isCopied
isCopied: boolean;
property isDraggedOver
isDraggedOver: boolean;
property onClick
onClick: RenderRowProps<TRow, TSummaryRow>['onCellClick'];
property onContextMenu
onContextMenu: RenderRowProps<TRow, TSummaryRow>['onCellContextMenu'];
property onDoubleClick
onDoubleClick: RenderRowProps<TRow, TSummaryRow>['onCellDoubleClick'];
property onRowChange
onRowChange: (column: CalculatedColumn<TRow, TSummaryRow>, newRow: TRow) => void;
interface CellSelectArgs
interface CellSelectArgs<TRow, TSummaryRow = unknown> {}
interface Column
interface Column<TRow, TSummaryRow = unknown> {}
property cellClass
readonly cellClass?: Maybe<string | ((row: TRow) => Maybe<string>)>;
property colSpan
readonly colSpan?: Maybe< (args: ColSpanArgs<TRow, TSummaryRow>) => Maybe<number>>;
property draggable
readonly draggable?: Maybe<boolean>;
Enable dragging of a 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. * 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>; /** @default true */ readonly commitOnOutsideClick?: Maybe<boolean>;}>;
property frozen
readonly frozen?: Maybe<boolean>;
Determines whether column is frozen or not
property headerCellClass
readonly headerCellClass?: Maybe<string>;
property key
readonly key: string;
A unique key to distinguish each column
property maxWidth
readonly maxWidth?: Maybe<number>;
Maximum column width in px.
property minWidth
readonly minWidth?: Maybe<number>;
Minimum column width in px.
property name
readonly name: string | ReactElement;
The name of the column. By default it will be displayed in the header cell
property renderCell
readonly renderCell?: Maybe< (props: RenderCellProps<TRow, TSummaryRow>) => ReactNode>;
Render function used to render the content of cells
property renderEditCell
readonly renderEditCell?: Maybe< (props: RenderEditCellProps<TRow, TSummaryRow>) => ReactNode>;
Render function used 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 used to render the content of group cells
property renderHeaderCell
readonly renderHeaderCell?: Maybe< (props: RenderHeaderCellProps<TRow, TSummaryRow>) => ReactNode>;
Render function used to render the content of the column's header cell
property renderSummaryCell
readonly renderSummaryCell?: Maybe< (props: RenderSummaryCellProps<TSummaryRow, TRow>) => ReactNode>;
Render function used to render the content of summary cells
property resizable
readonly resizable?: Maybe<boolean>;
Enable resizing of a column
property sortable
readonly sortable?: Maybe<boolean>;
Enable sorting of a 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>)>;
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
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 CopyEvent
interface CopyEvent<TRow> {}
property sourceColumnKey
sourceColumnKey: string;
property sourceRow
sourceRow: TRow;
interface DataGridHandle
interface DataGridHandle {}
property element
element: HTMLDivElement | null;
property scrollToCell
scrollToCell: (position: PartialPosition) => void;
property selectCell
selectCell: (position: Position, enableEditor?: Maybe<boolean>) => void;
interface DataGridProps
interface DataGridProps<R, SR = unknown, K extends Key = Key> extends SharedDivProps {}
property 'data-testid'
'data-testid'?: Maybe<string>;
property bottomSummaryRows
bottomSummaryRows?: Maybe<readonly SR[]>;
Rows to be pinned at the bottom of the rows view for summary, the vertical scroll bar will not scroll these rows.
property columns
columns: readonly ColumnOrColumnGroup<R, SR>[];
An array of objects representing each column on the grid
property defaultColumnOptions
defaultColumnOptions?: Maybe<DefaultColumnOptions<R, SR>>;
property direction
direction?: Maybe<Direction>;
'ltr'
property enableVirtualization
enableVirtualization?: Maybe<boolean>;
true
property headerRowHeight
headerRowHeight?: Maybe<number>;
The height of the header row in pixels 35
property onCellClick
onCellClick?: Maybe<(args: CellClickArgs<R, SR>, event: CellMouseEvent) => void>;
Function called whenever a cell is clicked
property onCellContextMenu
onCellContextMenu?: Maybe< (args: CellClickArgs<R, SR>, event: CellMouseEvent) => void>;
Function called whenever a cell is right clicked
property onCellDoubleClick
onCellDoubleClick?: Maybe< (args: CellClickArgs<R, SR>, event: CellMouseEvent) => void>;
Function called whenever a cell is double clicked
property onCellKeyDown
onCellKeyDown?: Maybe< (args: CellKeyDownArgs<R, SR>, event: CellKeyboardEvent) => void>;
property onColumnResize
onColumnResize?: Maybe<(idx: number, width: number) => void>;
Called when a column is resized
property onColumnsReorder
onColumnsReorder?: Maybe< (sourceColumnKey: string, targetColumnKey: string) => void>;
Called when a column is reordered
property onCopy
onCopy?: Maybe<(event: CopyEvent<R>) => void>;
property onFill
onFill?: Maybe<(event: FillEvent<R>) => R>;
property onPaste
onPaste?: Maybe<(event: PasteEvent<R>) => R>;
property onRowsChange
onRowsChange?: Maybe<(rows: R[], data: RowsChangeData<R, SR>) => void>;
property onScroll
onScroll?: Maybe<(event: React.UIEvent<HTMLDivElement>) => void>;
Called when the grid is scrolled
property onSelectedCellChange
onSelectedCellChange?: Maybe<(args: CellSelectArgs<R, SR>) => void>;
Function called whenever cell selection is changed
property onSelectedRowsChange
onSelectedRowsChange?: Maybe<(selectedRows: Set<K>) => void>;
Function called whenever row selection is changed
property onSortColumnsChange
onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>;
property renderers
renderers?: Maybe<Renderers<R, SR>>;
Miscellaneous
property rowClass
rowClass?: Maybe<(row: R, rowIdx: number) => Maybe<string>>;
property rowHeight
rowHeight?: Maybe<number | ((row: R) => number)>;
The height of each row in pixels 35
property rowKeyGetter
rowKeyGetter?: Maybe<(row: R) => K>;
The getter should return a unique key 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>>;
Set of selected row keys
property sortColumns
sortColumns?: Maybe<readonly SortColumn[]>;
Used for multi column sorting
property summaryRowHeight
summaryRowHeight?: Maybe<number>;
The height of each summary row in pixels 35
property topSummaryRows
topSummaryRows?: Maybe<readonly SR[]>;
Rows to be pinned at the top of the rows view for summary, the vertical scroll bar will not scroll these rows.
interface FillEvent
interface FillEvent<TRow> {}
interface PasteEvent
interface PasteEvent<TRow> {}
property sourceColumnKey
sourceColumnKey: string;
property sourceRow
sourceRow: TRow;
property targetColumnKey
targetColumnKey: string;
property targetRow
targetRow: 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.InputHTMLAttributes<HTMLInputElement>, 'aria-label' | 'aria-labelledby' | 'checked' | 'tabIndex' | 'disabled' > {}
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;
interface Renderers
interface Renderers<TRow, TSummaryRow> {}
property noRowsFallback
noRowsFallback?: Maybe<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 copiedCellIdx
copiedCellIdx: number | undefined;
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;
property setDraggedOverRowIdx
setDraggedOverRowIdx: ((overRowIdx: number) => void) | 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 SortColumn
interface SortColumn {}
interface TreeDataGridProps
interface TreeDataGridProps<R, SR = unknown, K extends Key = Key> extends Omit_2< DataGridProps<R, SR, K>, 'columns' | 'role' | 'aria-rowcount' | 'rowHeight' | 'onFill' > {}
property columns
columns: readonly Column<R, SR>[];
property expandedGroupIds
expandedGroupIds: ReadonlySet<unknown>;
property groupBy
groupBy: readonly string[];
property onExpandedGroupIdsChange
onExpandedGroupIdsChange: (expandedGroupIds: Set<unknown>) => void;
property rowGrouper
rowGrouper: ( rows: readonly R[], columnKey: string) => Record<string, readonly R[]>;
property rowHeight
rowHeight?: Maybe<number | ((args: RowHeightArgs<R>) => number)>;
Type Aliases
type CalculatedColumnOrColumnGroup
type CalculatedColumnOrColumnGroup<R, SR> = | CalculatedColumnParent<R, SR> | CalculatedColumn<R, SR>;
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 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 RowHeightArgs
type RowHeightArgs<TRow> = | { type: 'ROW'; row: TRow; } | { type: 'GROUP'; row: GroupRow<TRow>; };
type SelectRowEvent
type SelectRowEvent<TRow> = | { type: 'HEADER'; checked: boolean; } | { type: 'ROW'; row: TRow; checked: boolean; isShiftClick: boolean; };
type SortDirection
type SortDirection = 'ASC' | 'DESC';
Package Files (1)
Dependencies (1)
Dev Dependencies (52)
- @babel/core
- @babel/plugin-transform-runtime
- @babel/preset-env
- @babel/preset-react
- @babel/preset-typescript
- @babel/runtime
- @biomejs/biome
- @faker-js/faker
- @ianvs/prettier-plugin-sort-imports
- @linaria/core
- @microsoft/api-extractor
- @rollup/plugin-babel
- @rollup/plugin-node-resolve
- @testing-library/jest-dom
- @testing-library/react
- @testing-library/user-event
- @types/lodash-es
- @types/node
- @types/react
- @types/react-dom
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- @vitejs/plugin-react
- @vitest/coverage-v8
- @wyw-in-js/rollup
- @wyw-in-js/vite
- babel-plugin-optimize-clsx
- eslint
- eslint-config-prettier
- eslint-plugin-jest
- eslint-plugin-jest-dom
- eslint-plugin-node
- eslint-plugin-react
- eslint-plugin-react-hooks
- eslint-plugin-sonarjs
- eslint-plugin-testing-library
- jsdom
- jspdf
- jspdf-autotable
- lodash-es
- postcss
- prettier
- react
- react-dnd
- react-dnd-html5-backend
- react-dom
- react-router-dom
- rollup
- rollup-plugin-postcss
- typescript
- vite
- vitest
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[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](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 4770 ms. - Missing or incorrect documentation? Open an issue for this package.