react-data-grid

  • Version 7.0.0-beta.56
  • Published
  • 402 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

Type Aliases

Variables

variable DataGridDefaultRenderersContext

const DataGridDefaultRenderersContext: react3.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_runtime9.JSX.Element;

            function renderHeaderCell

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

              function renderSortIcon

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

                function renderSortPriority

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

                  function renderToggleGroup

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

                    function renderValue

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

                          function textEditor

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

                            function ToggleGroup

                            ToggleGroup: <R, SR>({
                            groupKey,
                            isExpanded,
                            tabIndex,
                            toggleGroup,
                            }: RenderGroupCellProps<R, SR>) => react_jsx_runtime10.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_runtime1.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> {}

                                                                                                      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>)>;
                                                                                                              • Class name(s) for the cell

                                                                                                              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.
                                                                                                                * 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 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 the summary cell

                                                                                                                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 {}

                                                                                                                        property type

                                                                                                                        readonly type: 'resized' | 'measured';

                                                                                                                          property width

                                                                                                                          readonly width: number;

                                                                                                                            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> {}

                                                                                                                                                property columnKey

                                                                                                                                                columnKey: string;

                                                                                                                                                  property sourceRow

                                                                                                                                                  sourceRow: TRow;

                                                                                                                                                    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 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> {}

                                                                                                                                                                                                                                                      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 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> {}

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

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

                                                                                                                                                                                                                                                                                                                                type SortDirection

                                                                                                                                                                                                                                                                                                                                type SortDirection = 'ASC' | 'DESC';

                                                                                                                                                                                                                                                                                                                                  Package Files (1)

                                                                                                                                                                                                                                                                                                                                  Dependencies (1)

                                                                                                                                                                                                                                                                                                                                  Dev Dependencies (43)

                                                                                                                                                                                                                                                                                                                                  Peer Dependencies (2)

                                                                                                                                                                                                                                                                                                                                  Badge

                                                                                                                                                                                                                                                                                                                                  To add a badge like this onejsDocs.io badgeto 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>