react-data-grid

react-data-grid

Version 7.0.0-beta.50
Published 5 days ago
149 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

variable DataGridDefaultRenderersContext

const DataGridDefaultRenderersContext: 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>
) => 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) => JSX.Element;

function renderHeaderCell

renderHeaderCell: <R, SR>({
    column,
    sortDirection,
    priority,
}: RenderHeaderCellProps<R, SR>) => string | JSX.Element;

function renderSortIcon

renderSortIcon: ({ sortDirection }: RenderSortIconProps) => JSX.Element | null;

function renderSortPriority

renderSortPriority: ({
    priority,
}: RenderSortPriorityProps) => number | undefined;

function renderToggleGroup

renderToggleGroup: <R, SR>(props: RenderGroupCellProps<R, SR>) => JSX.Element;

function renderValue

renderValue: <R, SR>(props: RenderCellProps<R, SR>) => 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) => ReactNode;

function textEditor

textEditor: <TRow, TSummaryRow>({
    row,
    column,
    onRowChange,
    onClose,
}: RenderEditCellProps<TRow, TSummaryRow>) => JSX.Element;

function ToggleGroup

ToggleGroup: <R, SR>({
    groupKey,
    isExpanded,
    tabIndex,
    toggleGroup,
}: RenderGroupCellProps<R, SR>) => JSX.Element;

function TreeDataGrid

TreeDataGrid: <R, SR = unknown, K extends Key = Key>({
    columns: rawColumns,
    rows: rawRows,
    rowHeight: rawRowHeight,
    rowKeyGetter: rawRowKeyGetter,
    onCellKeyDown: rawOnCellKeyDown,
    onRowsChange,
    selectedRows: rawSelectedRows,
    onSelectedRowsChange: rawOnSelectedRowsChange,
    renderers,
    groupBy: rawGroupBy,
    rowGrouper,
    expandedGroupIds,
    onExpandedGroupIdsChange,
    ...props
}: TreeDataGridProps<R, SR, K>) => 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 CellClickArgs

interface CellClickArgs<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 Pick<RenderRowProps<TRow, TSummaryRow>, 'row' | 'rowIdx' | 'selectCell'>,
        Omit_2<
            React.ComponentProps<'div'>,
            '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> {}

property column

column: CalculatedColumn<TRow, TSummaryRow>;

property row

row: TRow | undefined;

property rowIdx

rowIdx: number;

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 '50px'

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 '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 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-cy'

'data-cy'?: Maybe<string>;

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<NoInfer<R>, NoInfer<SR>>[];

An array of objects representing each column on the grid

property defaultColumnOptions

defaultColumnOptions?: Maybe<DefaultColumnOptions<NoInfer<R>, NoInfer<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 isRowSelectionDisabled

isRowSelectionDisabled?: Maybe<(row: NoInfer<R>) => boolean>;

Determines if row selection is disabled, per row

property onCellClick

onCellClick?: Maybe<
    (args: CellClickArgs<NoInfer<R>, NoInfer<SR>>, event: CellMouseEvent) => void
>;

Function called whenever a cell is clicked

property onCellContextMenu

onCellContextMenu?: Maybe<
    (args: CellClickArgs<NoInfer<R>, NoInfer<SR>>, event: CellMouseEvent) => void
>;

Function called whenever a cell is right clicked

property onCellDoubleClick

onCellDoubleClick?: Maybe<
    (args: CellClickArgs<NoInfer<R>, NoInfer<SR>>, event: CellMouseEvent) => void
>;

Function called whenever a cell is double clicked

property onCellKeyDown

onCellKeyDown?: Maybe<
    (
        args: CellKeyDownArgs<NoInfer<R>, NoInfer<SR>>,
        event: CellKeyboardEvent
    ) => void
>;

property onColumnResize

onColumnResize?: Maybe<(column: CalculatedColumn<R, SR>, 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<NoInfer<R>>) => void>;

property onFill

onFill?: Maybe<(event: FillEvent<NoInfer<R>>) => NoInfer<R>>;

property onPaste

onPaste?: Maybe<(event: PasteEvent<NoInfer<R>>) => NoInfer<R>>;

property onRowsChange

onRowsChange?: Maybe<
    (rows: NoInfer<R>[], data: RowsChangeData<NoInfer<R>, NoInfer<SR>>) => void
>;

property onScroll

onScroll?: Maybe<(event: React.UIEvent<HTMLDivElement>) => void>;

Called 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>;

Function called whenever row selection is changed

property onSortColumnsChange

onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>;

property ref

ref?: Maybe<React.Ref<DataGridHandle>>;

property renderers

renderers?: Maybe<Renderers<NoInfer<R>, NoInfer<SR>>>;

Miscellaneous

property rowClass

rowClass?: Maybe<(row: NoInfer<R>, rowIdx: number) => Maybe<string>>;

property rowHeight

rowHeight?: Maybe<number | ((row: NoInfer<R>) => number)>;

The height of each row in pixels 35

property rowKeyGetter

rowKeyGetter?: Maybe<(row: NoInfer<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> {}

property columnKey

columnKey: string;

property sourceRow

sourceRow: TRow;

property targetRow

targetRow: 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.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 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> {}

property column

column: CalculatedColumn<TRow, TSummaryRow>;

property row

row: TSummaryRow;

property tabIndex

tabIndex: number;

interface RowsChangeData

interface RowsChangeData<R, SR = unknown> {}

property column

column: CalculatedColumn<R, SR>;

property indexes

indexes: number[];

interface SelectHeaderRowEvent

interface SelectHeaderRowEvent {}

property checked

checked: boolean;

interface SelectRowEvent

interface SelectRowEvent<TRow> {}

property checked

checked: boolean;

property isShiftClick

isShiftClick: boolean;

property row

row: TRow;

interface SortColumn

interface SortColumn {}

property columnKey

readonly columnKey: string;

property direction

readonly direction: SortDirection;

interface TreeDataGridProps

interface TreeDataGridProps<R, SR = unknown, K extends Key = Key>
    extends Omit_2<
        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 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 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 DefaultColumnOptions

type DefaultColumnOptions<R, SR> = Pick<
    Column<R, SR>,
    | 'renderCell'
    | 'renderHeaderCell'
    | 'width'
    | 'minWidth'
    | 'maxWidth'
    | 'resizable'
    | 'sortable'
    | 'draggable'
>;

type RowHeightArgs

type RowHeightArgs<TRow> =
    | {
          type: 'ROW';
          row: TRow;
      }
    | {
          type: 'GROUP';
          row: GroupRow<TRow>;
      };

type SortDirection

type SortDirection = 'ASC' | 'DESC';

Package Files (1)

lib/index.d.ts

Dependencies (1)

clsx

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 4 days ago.
Package analyzed in 6166 ms.
Missing or incorrect documentation? Open an issue for this package.

react-data-grid

Install

Overview

Index

Variables

Functions

Interfaces

Type Aliases

Variables

variable DataGridDefaultRenderersContext

variable SELECT_COLUMN_KEY

variable SelectColumn

Functions

function Cell

function DataGrid

Example 1

function renderCheckbox

function renderHeaderCell

function renderSortIcon

function renderSortPriority

function renderToggleGroup

function renderValue

function Row

function SelectCellFormatter

function textEditor

function ToggleGroup

function TreeDataGrid

function useHeaderRowSelection

function useRowSelection

Interfaces

interface CalculatedColumn

property draggable

property frozen

property idx

property level

property maxWidth

property minWidth

property parent

property renderCell

property renderHeaderCell

property resizable

property sortable

property width

interface CalculatedColumnParent

property colSpan

property headerCellClass

property idx

property level

property name

property parent

interface CellClickArgs

property column

property row

property rowIdx

property selectCell

interface CellRendererProps

property colSpan

property column

property isCellSelected

property isCopied

property isDraggedOver

property onClick

property onContextMenu

property onDoubleClick

property onRowChange

interface CellSelectArgs

property column

property row

property rowIdx

interface Column

property cellClass

property colSpan

property draggable

property editable

property editorOptions

property frozen

property headerCellClass

property key

property maxWidth

property minWidth