react-data-grid

  • Version 7.0.0-beta.52
  • Published
  • 392 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: Context<Renderers<any, any>>;

    variable SELECT_COLUMN_KEY

    const SELECT_COLUMN_KEY: string;

      variable SelectColumn

      const SelectColumn: Column<any, any>;

        Functions

        function Cell

        Cell: <R, SR>(props: CellRendererProps<R, SR>) => React.JSX.Element;

          function DataGrid

          DataGrid: <R, SR = unknown, K extends Key = Key>(
          props: DataGridProps<R, SR, K>
          ) => JSX.Element;
          • Main API Component to render a data grid of rows and columns

            Example 1

            <DataGrid columns={columns} rows={rows} />

          function renderCheckbox

          renderCheckbox: ({
          onChange,
          indeterminate,
          ...props
          }: RenderCheckboxProps) => JSX.Element;

            function renderHeaderCell

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

              function renderSortIcon

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

                function renderSortPriority

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

                  function renderToggleGroup

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

                    function renderValue

                    renderValue: <R, SR>(props: RenderCellProps<R, SR>) => ReactNode;

                      function Row

                      Row: <R, SR>(props: RenderRowProps<R, SR>) => React.JSX.Element;

                        function SelectCellFormatter

                        SelectCellFormatter: ({
                        value,
                        tabIndex,
                        indeterminate,
                        disabled,
                        onChange,
                        'aria-label': ariaLabel,
                        'aria-labelledby': ariaLabelledBy,
                        }: SelectCellFormatterProps) => ReactNode;

                          function textEditor

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

                            function ToggleGroup

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

                              function TreeDataGrid

                              TreeDataGrid: <R, SR = unknown, K extends Key = Key>({
                              columns: rawColumns,
                              rows: rawRows,
                              rowHeight: rawRowHeight,
                              rowKeyGetter: rawRowKeyGetter,
                              onCellKeyDown: rawOnCellKeyDown,
                              onCellCopy: rawOnCellCopy,
                              onCellPaste: rawOnCellPaste,
                              onRowsChange,
                              selectedRows: rawSelectedRows,
                              onSelectedRowsChange: rawOnSelectedRowsChange,
                              renderers,
                              groupBy: rawGroupBy,
                              rowGrouper,
                              expandedGroupIds,
                              onExpandedGroupIdsChange,
                              groupIdGetter: rawGroupIdGetter,
                              ...props
                              }: TreeDataGridProps<R, SR, K>) => JSX.Element;

                                function useHeaderRowSelection

                                useHeaderRowSelection: () => {
                                isIndeterminate: boolean;
                                isRowSelected: boolean;
                                onRowSelectionChange: (selectRowEvent: SelectHeaderRowEvent) => void;
                                };

                                  function useRowSelection

                                  useRowSelection: () => {
                                  isRowSelectionDisabled: boolean;
                                  isRowSelected: boolean;
                                  onRowSelectionChange: (selectRowEvent: SelectRowEvent<any>) => void;
                                  };

                                    Interfaces

                                    interface CalculatedColumn

                                    interface CalculatedColumn<TRow, TSummaryRow = unknown>
                                    extends Column<TRow, TSummaryRow> {}

                                      property draggable

                                      readonly draggable: boolean;

                                        property frozen

                                        readonly frozen: boolean;

                                          property idx

                                          readonly idx: number;

                                            property level

                                            readonly level: number;

                                              property maxWidth

                                              readonly maxWidth: number | undefined;

                                                property minWidth

                                                readonly minWidth: number;

                                                  property parent

                                                  readonly parent: CalculatedColumnParent<TRow, TSummaryRow> | undefined;

                                                    property renderCell

                                                    readonly renderCell: (props: RenderCellProps<TRow, TSummaryRow>) => ReactNode;

                                                      property renderHeaderCell

                                                      readonly renderHeaderCell: (
                                                      props: RenderHeaderCellProps<TRow, TSummaryRow>
                                                      ) => ReactNode;

                                                        property resizable

                                                        readonly resizable: boolean;

                                                          property sortable

                                                          readonly sortable: boolean;

                                                            property width

                                                            readonly width: number | string;

                                                              interface CalculatedColumnParent

                                                              interface CalculatedColumnParent<R, SR> {}

                                                                property colSpan

                                                                readonly colSpan: number;

                                                                  property headerCellClass

                                                                  readonly headerCellClass?: Maybe<string>;

                                                                    property idx

                                                                    readonly idx: number;

                                                                      property level

                                                                      readonly level: number;

                                                                        property name

                                                                        readonly name: string | ReactElement;

                                                                          property parent

                                                                          readonly parent: CalculatedColumnParent<R, SR> | undefined;

                                                                            interface CellClickArgs

                                                                            interface CellClickArgs<TRow, TSummaryRow = unknown> {}

                                                                              property column

                                                                              column: CalculatedColumn<TRow, TSummaryRow>;

                                                                                property row

                                                                                row: TRow;

                                                                                  property rowIdx

                                                                                  rowIdx: number;

                                                                                    property selectCell

                                                                                    selectCell: (enableEditor?: boolean) => void;

                                                                                      interface CellRendererProps

                                                                                      interface CellRendererProps<TRow, TSummaryRow>
                                                                                      extends Pick<RenderRowProps<TRow, TSummaryRow>, 'row' | 'rowIdx' | 'selectCell'>,
                                                                                      Omit_2<
                                                                                      React.ComponentProps<'div'>,
                                                                                      'children' | 'onClick' | 'onDoubleClick' | 'onContextMenu'
                                                                                      > {}

                                                                                        property colSpan

                                                                                        colSpan: number | undefined;

                                                                                          property column

                                                                                          column: CalculatedColumn<TRow, TSummaryRow>;

                                                                                            property isCellSelected

                                                                                            isCellSelected: boolean;

                                                                                              property isDraggedOver

                                                                                              isDraggedOver: boolean;

                                                                                                property onClick

                                                                                                onClick: RenderRowProps<TRow, TSummaryRow>['onCellClick'];

                                                                                                  property onContextMenu

                                                                                                  onContextMenu: RenderRowProps<TRow, TSummaryRow>['onCellContextMenu'];

                                                                                                    property onDoubleClick

                                                                                                    onDoubleClick: RenderRowProps<TRow, TSummaryRow>['onCellDoubleClick'];

                                                                                                      property onRowChange

                                                                                                      onRowChange: (column: CalculatedColumn<TRow, TSummaryRow>, newRow: TRow) => void;

                                                                                                        interface CellSelectArgs

                                                                                                        interface CellSelectArgs<TRow, TSummaryRow = unknown> {}

                                                                                                          property column

                                                                                                          column: CalculatedColumn<TRow, TSummaryRow>;

                                                                                                            property row

                                                                                                            row: TRow | undefined;

                                                                                                              property rowIdx

                                                                                                              rowIdx: number;

                                                                                                                interface Column

                                                                                                                interface Column<TRow, TSummaryRow = unknown> {}

                                                                                                                  property cellClass

                                                                                                                  readonly cellClass?: Maybe<string | ((row: TRow) => Maybe<string>)>;
                                                                                                                  • 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 '50px'

                                                                                                                    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 DataGridHandle

                                                                                                                          interface DataGridHandle {}

                                                                                                                            property element

                                                                                                                            element: HTMLDivElement | null;

                                                                                                                              property scrollToCell

                                                                                                                              scrollToCell: (position: PartialPosition) => void;

                                                                                                                                property selectCell

                                                                                                                                selectCell: (position: Position, enableEditor?: Maybe<boolean>) => void;

                                                                                                                                  interface DataGridProps

                                                                                                                                  interface DataGridProps<R, SR = unknown, K extends Key = Key>
                                                                                                                                  extends SharedDivProps {}

                                                                                                                                    property 'data-cy'

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

                                                                                                                                      property 'data-testid'

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

                                                                                                                                        property bottomSummaryRows

                                                                                                                                        bottomSummaryRows?: Maybe<readonly SR[]>;
                                                                                                                                        • Rows 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 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?: Maybe<
                                                                                                                                        (args: CellClickArgs<NoInfer<R>, NoInfer<SR>>, event: CellMouseEvent) => void
                                                                                                                                        >;
                                                                                                                                        • Callback triggered when a cell is clicked

                                                                                                                                        property onCellContextMenu

                                                                                                                                        onCellContextMenu?: Maybe<
                                                                                                                                        (args: CellClickArgs<NoInfer<R>, NoInfer<SR>>, event: CellMouseEvent) => void
                                                                                                                                        >;
                                                                                                                                        • Callback triggered when a cell is right-clicked

                                                                                                                                        property onCellCopy

                                                                                                                                        onCellCopy?: Maybe<
                                                                                                                                        (
                                                                                                                                        args: CellCopyEvent<NoInfer<R>, NoInfer<SR>>,
                                                                                                                                        event: CellClipboardEvent
                                                                                                                                        ) => void
                                                                                                                                        >;
                                                                                                                                        • Callback triggered when a cell's content is copied

                                                                                                                                        property onCellDoubleClick

                                                                                                                                        onCellDoubleClick?: Maybe<
                                                                                                                                        (args: CellClickArgs<NoInfer<R>, NoInfer<SR>>, event: CellMouseEvent) => void
                                                                                                                                        >;
                                                                                                                                        • 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 onCellPaste

                                                                                                                                        onCellPaste?: Maybe<
                                                                                                                                        (
                                                                                                                                        args: CellPasteEvent<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 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;

                                                                                                                                                                                                                                        property setDraggedOverRowIdx

                                                                                                                                                                                                                                        setDraggedOverRowIdx: ((overRowIdx: number) => void) | undefined;

                                                                                                                                                                                                                                          interface RenderSortIconProps

                                                                                                                                                                                                                                          interface RenderSortIconProps {}

                                                                                                                                                                                                                                            property sortDirection

                                                                                                                                                                                                                                            sortDirection: SortDirection | undefined;

                                                                                                                                                                                                                                              interface RenderSortPriorityProps

                                                                                                                                                                                                                                              interface RenderSortPriorityProps {}

                                                                                                                                                                                                                                                property priority

                                                                                                                                                                                                                                                priority: number | undefined;

                                                                                                                                                                                                                                                  interface RenderSortStatusProps

                                                                                                                                                                                                                                                  interface RenderSortStatusProps
                                                                                                                                                                                                                                                  extends RenderSortIconProps,
                                                                                                                                                                                                                                                  RenderSortPriorityProps {}

                                                                                                                                                                                                                                                    interface RenderSummaryCellProps

                                                                                                                                                                                                                                                    interface RenderSummaryCellProps<TSummaryRow, TRow = unknown> {}

                                                                                                                                                                                                                                                      property column

                                                                                                                                                                                                                                                      column: CalculatedColumn<TRow, TSummaryRow>;

                                                                                                                                                                                                                                                        property row

                                                                                                                                                                                                                                                        row: TSummaryRow;

                                                                                                                                                                                                                                                          property tabIndex

                                                                                                                                                                                                                                                          tabIndex: number;

                                                                                                                                                                                                                                                            interface RowsChangeData

                                                                                                                                                                                                                                                            interface RowsChangeData<R, SR = unknown> {}

                                                                                                                                                                                                                                                              property column

                                                                                                                                                                                                                                                              column: CalculatedColumn<R, SR>;

                                                                                                                                                                                                                                                                property indexes

                                                                                                                                                                                                                                                                indexes: number[];

                                                                                                                                                                                                                                                                  interface SelectHeaderRowEvent

                                                                                                                                                                                                                                                                  interface SelectHeaderRowEvent {}

                                                                                                                                                                                                                                                                    property checked

                                                                                                                                                                                                                                                                    checked: boolean;

                                                                                                                                                                                                                                                                      interface SelectRowEvent

                                                                                                                                                                                                                                                                      interface SelectRowEvent<TRow> {}

                                                                                                                                                                                                                                                                        property checked

                                                                                                                                                                                                                                                                        checked: boolean;

                                                                                                                                                                                                                                                                          property isShiftClick

                                                                                                                                                                                                                                                                          isShiftClick: boolean;

                                                                                                                                                                                                                                                                            property row

                                                                                                                                                                                                                                                                            row: TRow;

                                                                                                                                                                                                                                                                              interface SortColumn

                                                                                                                                                                                                                                                                              interface SortColumn {}

                                                                                                                                                                                                                                                                                property columnKey

                                                                                                                                                                                                                                                                                readonly columnKey: string;

                                                                                                                                                                                                                                                                                  property direction

                                                                                                                                                                                                                                                                                  readonly direction: SortDirection;

                                                                                                                                                                                                                                                                                    interface TreeDataGridProps

                                                                                                                                                                                                                                                                                    interface TreeDataGridProps<R, SR = unknown, K extends Key = Key>
                                                                                                                                                                                                                                                                                    extends Omit_2<
                                                                                                                                                                                                                                                                                    DataGridProps<R, SR, K>,
                                                                                                                                                                                                                                                                                    | 'columns'
                                                                                                                                                                                                                                                                                    | 'role'
                                                                                                                                                                                                                                                                                    | 'aria-rowcount'
                                                                                                                                                                                                                                                                                    | 'rowHeight'
                                                                                                                                                                                                                                                                                    | 'onFill'
                                                                                                                                                                                                                                                                                    | 'isRowSelectionDisabled'
                                                                                                                                                                                                                                                                                    > {}

                                                                                                                                                                                                                                                                                      property columns

                                                                                                                                                                                                                                                                                      columns: readonly Column<NoInfer<R>, NoInfer<SR>>[];

                                                                                                                                                                                                                                                                                        property expandedGroupIds

                                                                                                                                                                                                                                                                                        expandedGroupIds: ReadonlySet<unknown>;

                                                                                                                                                                                                                                                                                          property groupBy

                                                                                                                                                                                                                                                                                          groupBy: readonly string[];

                                                                                                                                                                                                                                                                                            property 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 CellCopyEvent

                                                                                                                                                                                                                                                                                                      type CellCopyEvent<TRow, TSummaryRow = unknown> = CellCopyPasteEvent<
                                                                                                                                                                                                                                                                                                      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 CellPasteEvent

                                                                                                                                                                                                                                                                                                              type CellPasteEvent<TRow, TSummaryRow = unknown> = CellCopyPasteEvent<
                                                                                                                                                                                                                                                                                                              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 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>