react-data-grid

  • Version 7.0.0-beta.43
  • Published
  • 802 kB
  • 1 dependency
  • MIT license

Install

npm i react-data-grid
yarn add react-data-grid
pnpm add react-data-grid

Overview

Feature-rich and customizable data grid React component

Index

Variables

Functions

Interfaces

Type Aliases

Variables

variable DataGridDefaultRenderersProvider

const DataGridDefaultRenderersProvider: Provider<Renderers<any, any>>;

    variable SELECT_COLUMN_KEY

    const SELECT_COLUMN_KEY: string;

      variable SelectColumn

      const SelectColumn: Column<any, any>;

        Functions

        function _default

        _default: <R, SR = unknown, K extends Key = Key>(props: any) => JSX.Element;

          function renderCheckbox

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

            function renderHeaderCell

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

              function renderSortIcon

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

                function renderSortPriority

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

                  function renderToggleGroup

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

                    function renderValue

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

                      function Row

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

                        function SelectCellFormatter

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

                          function textEditor

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

                            function ToggleGroup

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

                              function TreeDataGrid

                              TreeDataGrid: <R, SR = unknown, K extends Key = Key>(props: any) => JSX.Element;

                                function useRowSelection

                                useRowSelection: <R>() => [boolean, (selectRowEvent: SelectRowEvent<R>) => void];

                                  Interfaces

                                  interface CalculatedColumn

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

                                    property draggable

                                    readonly draggable: boolean;

                                      property frozen

                                      readonly frozen: boolean;

                                        property idx

                                        readonly idx: number;

                                          property level

                                          readonly level: number;

                                            property maxWidth

                                            readonly maxWidth: number | undefined;

                                              property minWidth

                                              readonly minWidth: number;

                                                property parent

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

                                                  property renderCell

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

                                                    property resizable

                                                    readonly resizable: boolean;

                                                      property sortable

                                                      readonly sortable: boolean;

                                                        property width

                                                        readonly width: number | string;

                                                          interface CalculatedColumnParent

                                                          interface CalculatedColumnParent<R, SR> {}

                                                            property colSpan

                                                            readonly colSpan: number;

                                                              property headerCellClass

                                                              readonly headerCellClass?: Maybe<string>;

                                                                property idx

                                                                readonly idx: number;

                                                                  property level

                                                                  readonly level: number;

                                                                    property name

                                                                    readonly name: string | ReactElement;

                                                                      property parent

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

                                                                        interface CellClickArgs

                                                                        interface CellClickArgs<TRow, TSummaryRow = unknown> {}

                                                                          property column

                                                                          column: CalculatedColumn<TRow, TSummaryRow>;

                                                                            property row

                                                                            row: TRow;

                                                                              property selectCell

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

                                                                                interface CellRendererProps

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

                                                                                  property colSpan

                                                                                  colSpan: number | undefined;

                                                                                    property column

                                                                                    column: CalculatedColumn<TRow, TSummaryRow>;

                                                                                      property isCellSelected

                                                                                      isCellSelected: boolean;

                                                                                        property isCopied

                                                                                        isCopied: boolean;

                                                                                          property isDraggedOver

                                                                                          isDraggedOver: boolean;

                                                                                            property onClick

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

                                                                                              property onContextMenu

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

                                                                                                property onDoubleClick

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

                                                                                                  property onRowChange

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

                                                                                                    interface CellSelectArgs

                                                                                                    interface CellSelectArgs<TRow, TSummaryRow = unknown> {}

                                                                                                      property column

                                                                                                      column: CalculatedColumn<TRow, TSummaryRow>;

                                                                                                        property row

                                                                                                        row: TRow;

                                                                                                          property rowIdx

                                                                                                          rowIdx: number;

                                                                                                            interface Column

                                                                                                            interface Column<TRow, TSummaryRow = unknown> {}

                                                                                                              property cellClass

                                                                                                              readonly cellClass?: Maybe<string | ((row: TRow) => Maybe<string>)>;

                                                                                                                property colSpan

                                                                                                                readonly colSpan?: Maybe<
                                                                                                                (args: ColSpanArgs<TRow, TSummaryRow>) => Maybe<number>
                                                                                                                >;

                                                                                                                  property draggable

                                                                                                                  readonly draggable?: Maybe<boolean>;
                                                                                                                  • Enable dragging of a column

                                                                                                                  property editable

                                                                                                                  readonly editable?: Maybe<boolean | ((row: TRow) => boolean)>;
                                                                                                                  • Enables cell editing. If set and no editor property specified, then a textinput will be used as the cell editor

                                                                                                                  property editorOptions

                                                                                                                  readonly editorOptions?: Maybe<{
                                                                                                                  /**
                                                                                                                  * Render the cell content in addition to the edit cell.
                                                                                                                  * Enable this option when the editor is rendered outside the grid, like a modal for example.
                                                                                                                  * By default, the cell content is not rendered when the edit cell is open.
                                                                                                                  * @default false
                                                                                                                  */
                                                                                                                  readonly displayCellContent?: Maybe<boolean>;
                                                                                                                  /** @default true */
                                                                                                                  readonly commitOnOutsideClick?: Maybe<boolean>;
                                                                                                                  }>;

                                                                                                                    property frozen

                                                                                                                    readonly frozen?: Maybe<boolean>;
                                                                                                                    • Determines whether column is frozen or not

                                                                                                                    property headerCellClass

                                                                                                                    readonly headerCellClass?: Maybe<string>;

                                                                                                                      property key

                                                                                                                      readonly key: string;
                                                                                                                      • A unique key to distinguish each column

                                                                                                                      property maxWidth

                                                                                                                      readonly maxWidth?: Maybe<number>;
                                                                                                                      • Maximum column width in px.

                                                                                                                      property minWidth

                                                                                                                      readonly minWidth?: Maybe<number>;
                                                                                                                      • Minimum column width in px.

                                                                                                                      property name

                                                                                                                      readonly name: string | ReactElement;
                                                                                                                      • The name of the column. By default it will be displayed in the header cell

                                                                                                                      property renderCell

                                                                                                                      readonly renderCell?: Maybe<
                                                                                                                      (props: RenderCellProps<TRow, TSummaryRow>) => ReactNode
                                                                                                                      >;
                                                                                                                      • Render function used to render the content of cells

                                                                                                                      property renderEditCell

                                                                                                                      readonly renderEditCell?: Maybe<
                                                                                                                      (props: RenderEditCellProps<TRow, TSummaryRow>) => ReactNode
                                                                                                                      >;
                                                                                                                      • Render function used to render the content of edit cells. When set, the column is automatically set to be editable

                                                                                                                      property renderGroupCell

                                                                                                                      readonly renderGroupCell?: Maybe<
                                                                                                                      (props: RenderGroupCellProps<TRow, TSummaryRow>) => ReactNode
                                                                                                                      >;
                                                                                                                      • Render function used to render the content of group cells

                                                                                                                      property renderHeaderCell

                                                                                                                      readonly renderHeaderCell?: Maybe<
                                                                                                                      (props: RenderHeaderCellProps<TRow, TSummaryRow>) => ReactNode
                                                                                                                      >;
                                                                                                                      • Render function used to render the content of the column's header cell

                                                                                                                      property renderSummaryCell

                                                                                                                      readonly renderSummaryCell?: Maybe<
                                                                                                                      (props: RenderSummaryCellProps<TSummaryRow, TRow>) => ReactNode
                                                                                                                      >;
                                                                                                                      • Render function used to render the content of summary cells

                                                                                                                      property resizable

                                                                                                                      readonly resizable?: Maybe<boolean>;
                                                                                                                      • Enable resizing of a column

                                                                                                                      property sortable

                                                                                                                      readonly sortable?: Maybe<boolean>;
                                                                                                                      • Enable sorting of a column

                                                                                                                      property sortDescendingFirst

                                                                                                                      readonly sortDescendingFirst?: Maybe<boolean>;
                                                                                                                      • Sets the column sort order to be descending instead of ascending the first time the column is sorted

                                                                                                                      property summaryCellClass

                                                                                                                      readonly summaryCellClass?: Maybe<
                                                                                                                      string | ((row: TSummaryRow) => Maybe<string>)
                                                                                                                      >;

                                                                                                                        property width

                                                                                                                        readonly width?: Maybe<number | string>;
                                                                                                                        • Column width. If not specified, it will be determined automatically based on grid width and specified widths of other columns

                                                                                                                        interface ColumnGroup

                                                                                                                        interface ColumnGroup<R, SR = unknown> {}

                                                                                                                          property children

                                                                                                                          readonly children: readonly ColumnOrColumnGroup<R, SR>[];

                                                                                                                            property headerCellClass

                                                                                                                            readonly headerCellClass?: Maybe<string>;

                                                                                                                              property name

                                                                                                                              readonly name: string | ReactElement;
                                                                                                                              • The name of the column group, it will be displayed in the header cell

                                                                                                                              interface CopyEvent

                                                                                                                              interface CopyEvent<TRow> {}

                                                                                                                                property sourceColumnKey

                                                                                                                                sourceColumnKey: string;

                                                                                                                                  property sourceRow

                                                                                                                                  sourceRow: TRow;

                                                                                                                                    interface DataGridHandle

                                                                                                                                    interface DataGridHandle {}

                                                                                                                                      property element

                                                                                                                                      element: HTMLDivElement | null;

                                                                                                                                        property scrollToCell

                                                                                                                                        scrollToCell: (position: PartialPosition) => void;

                                                                                                                                          property selectCell

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

                                                                                                                                            interface DataGridProps

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

                                                                                                                                              property 'data-testid'

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

                                                                                                                                                property bottomSummaryRows

                                                                                                                                                bottomSummaryRows?: Maybe<readonly SR[]>;
                                                                                                                                                • Rows to be pinned at the bottom of the rows view for summary, the vertical scroll bar will not scroll these rows.

                                                                                                                                                property columns

                                                                                                                                                columns: readonly ColumnOrColumnGroup<R, SR>[];
                                                                                                                                                • An array of objects representing each column on the grid

                                                                                                                                                property defaultColumnOptions

                                                                                                                                                defaultColumnOptions?: Maybe<DefaultColumnOptions<R, SR>>;

                                                                                                                                                  property direction

                                                                                                                                                  direction?: Maybe<Direction>;
                                                                                                                                                  • 'ltr'

                                                                                                                                                  property enableVirtualization

                                                                                                                                                  enableVirtualization?: Maybe<boolean>;
                                                                                                                                                  • true

                                                                                                                                                  property headerRowHeight

                                                                                                                                                  headerRowHeight?: Maybe<number>;
                                                                                                                                                  • The height of the header row in pixels 35

                                                                                                                                                  property onCellClick

                                                                                                                                                  onCellClick?: Maybe<(args: CellClickArgs<R, SR>, event: CellMouseEvent) => void>;
                                                                                                                                                  • Function called whenever a cell is clicked

                                                                                                                                                  property onCellContextMenu

                                                                                                                                                  onCellContextMenu?: Maybe<
                                                                                                                                                  (args: CellClickArgs<R, SR>, event: CellMouseEvent) => void
                                                                                                                                                  >;
                                                                                                                                                  • Function called whenever a cell is right clicked

                                                                                                                                                  property onCellDoubleClick

                                                                                                                                                  onCellDoubleClick?: Maybe<
                                                                                                                                                  (args: CellClickArgs<R, SR>, event: CellMouseEvent) => void
                                                                                                                                                  >;
                                                                                                                                                  • Function called whenever a cell is double clicked

                                                                                                                                                  property onCellKeyDown

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

                                                                                                                                                    property onColumnResize

                                                                                                                                                    onColumnResize?: Maybe<(idx: number, width: number) => void>;
                                                                                                                                                    • Called when a column is resized

                                                                                                                                                    property onColumnsReorder

                                                                                                                                                    onColumnsReorder?: Maybe<
                                                                                                                                                    (sourceColumnKey: string, targetColumnKey: string) => void
                                                                                                                                                    >;
                                                                                                                                                    • Called when a column is reordered

                                                                                                                                                    property onCopy

                                                                                                                                                    onCopy?: Maybe<(event: CopyEvent<R>) => void>;

                                                                                                                                                      property onFill

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

                                                                                                                                                        property onPaste

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

                                                                                                                                                          property onRowsChange

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

                                                                                                                                                            property onScroll

                                                                                                                                                            onScroll?: Maybe<(event: React.UIEvent<HTMLDivElement>) => void>;
                                                                                                                                                            • Called when the grid is scrolled

                                                                                                                                                            property onSelectedCellChange

                                                                                                                                                            onSelectedCellChange?: Maybe<(args: CellSelectArgs<R, SR>) => void>;
                                                                                                                                                            • Function called whenever cell selection is changed

                                                                                                                                                            property onSelectedRowsChange

                                                                                                                                                            onSelectedRowsChange?: Maybe<(selectedRows: Set<K>) => void>;
                                                                                                                                                            • Function called whenever row selection is changed

                                                                                                                                                            property onSortColumnsChange

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

                                                                                                                                                              property renderers

                                                                                                                                                              renderers?: Maybe<Renderers<R, SR>>;
                                                                                                                                                              • Miscellaneous

                                                                                                                                                              property rowClass

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

                                                                                                                                                                property rowHeight

                                                                                                                                                                rowHeight?: Maybe<number | ((row: R) => number)>;
                                                                                                                                                                • The height of each row in pixels 35

                                                                                                                                                                property rowKeyGetter

                                                                                                                                                                rowKeyGetter?: Maybe<(row: R) => K>;
                                                                                                                                                                • The getter should return a unique key for each row

                                                                                                                                                                property rows

                                                                                                                                                                rows: readonly R[];
                                                                                                                                                                • A function called for each rendered row that should return a plain key/value pair object

                                                                                                                                                                property selectedRows

                                                                                                                                                                selectedRows?: Maybe<ReadonlySet<K>>;
                                                                                                                                                                • Set of selected row keys

                                                                                                                                                                property sortColumns

                                                                                                                                                                sortColumns?: Maybe<readonly SortColumn[]>;
                                                                                                                                                                • Used for multi column sorting

                                                                                                                                                                property summaryRowHeight

                                                                                                                                                                summaryRowHeight?: Maybe<number>;
                                                                                                                                                                • The height of each summary row in pixels 35

                                                                                                                                                                property topSummaryRows

                                                                                                                                                                topSummaryRows?: Maybe<readonly SR[]>;
                                                                                                                                                                • Rows to be pinned at the top of the rows view for summary, the vertical scroll bar will not scroll these rows.

                                                                                                                                                                interface FillEvent

                                                                                                                                                                interface FillEvent<TRow> {}

                                                                                                                                                                  property columnKey

                                                                                                                                                                  columnKey: string;

                                                                                                                                                                    property sourceRow

                                                                                                                                                                    sourceRow: TRow;

                                                                                                                                                                      property targetRow

                                                                                                                                                                      targetRow: TRow;

                                                                                                                                                                        interface PasteEvent

                                                                                                                                                                        interface PasteEvent<TRow> {}

                                                                                                                                                                          property sourceColumnKey

                                                                                                                                                                          sourceColumnKey: string;

                                                                                                                                                                            property sourceRow

                                                                                                                                                                            sourceRow: TRow;

                                                                                                                                                                              property targetColumnKey

                                                                                                                                                                              targetColumnKey: string;

                                                                                                                                                                                property targetRow

                                                                                                                                                                                targetRow: TRow;

                                                                                                                                                                                  interface RenderCellProps

                                                                                                                                                                                  interface RenderCellProps<TRow, TSummaryRow = unknown> {}

                                                                                                                                                                                    property column

                                                                                                                                                                                    column: CalculatedColumn<TRow, TSummaryRow>;

                                                                                                                                                                                      property isCellEditable

                                                                                                                                                                                      isCellEditable: boolean;

                                                                                                                                                                                        property onRowChange

                                                                                                                                                                                        onRowChange: (row: TRow) => void;

                                                                                                                                                                                          property row

                                                                                                                                                                                          row: TRow;

                                                                                                                                                                                            property rowIdx

                                                                                                                                                                                            rowIdx: number;

                                                                                                                                                                                              property tabIndex

                                                                                                                                                                                              tabIndex: number;

                                                                                                                                                                                                interface RenderCheckboxProps

                                                                                                                                                                                                interface RenderCheckboxProps
                                                                                                                                                                                                extends Pick<
                                                                                                                                                                                                React.InputHTMLAttributes<HTMLInputElement>,
                                                                                                                                                                                                'aria-label' | 'aria-labelledby' | 'checked' | 'tabIndex' | 'disabled'
                                                                                                                                                                                                > {}

                                                                                                                                                                                                  property onChange

                                                                                                                                                                                                  onChange: (checked: boolean, shift: boolean) => void;

                                                                                                                                                                                                    interface RenderEditCellProps

                                                                                                                                                                                                    interface RenderEditCellProps<TRow, TSummaryRow = unknown> {}

                                                                                                                                                                                                      property column

                                                                                                                                                                                                      column: CalculatedColumn<TRow, TSummaryRow>;

                                                                                                                                                                                                        property onClose

                                                                                                                                                                                                        onClose: (commitChanges?: boolean, shouldFocusCell?: boolean) => void;

                                                                                                                                                                                                          property onRowChange

                                                                                                                                                                                                          onRowChange: (row: TRow, commitChanges?: boolean) => void;

                                                                                                                                                                                                            property row

                                                                                                                                                                                                            row: TRow;

                                                                                                                                                                                                              interface Renderers

                                                                                                                                                                                                              interface Renderers<TRow, TSummaryRow> {}

                                                                                                                                                                                                                property noRowsFallback

                                                                                                                                                                                                                noRowsFallback?: Maybe<ReactNode>;

                                                                                                                                                                                                                  property renderCheckbox

                                                                                                                                                                                                                  renderCheckbox?: Maybe<(props: RenderCheckboxProps) => ReactNode>;

                                                                                                                                                                                                                    property renderRow

                                                                                                                                                                                                                    renderRow?: Maybe<
                                                                                                                                                                                                                    (key: Key, props: RenderRowProps<TRow, TSummaryRow>) => ReactNode
                                                                                                                                                                                                                    >;

                                                                                                                                                                                                                      property renderSortStatus

                                                                                                                                                                                                                      renderSortStatus?: Maybe<(props: RenderSortStatusProps) => ReactNode>;

                                                                                                                                                                                                                        interface RenderGroupCellProps

                                                                                                                                                                                                                        interface RenderGroupCellProps<TRow, TSummaryRow = unknown> {}

                                                                                                                                                                                                                          property childRows

                                                                                                                                                                                                                          childRows: readonly TRow[];

                                                                                                                                                                                                                            property column

                                                                                                                                                                                                                            column: CalculatedColumn<TRow, TSummaryRow>;

                                                                                                                                                                                                                              property groupKey

                                                                                                                                                                                                                              groupKey: unknown;

                                                                                                                                                                                                                                property isExpanded

                                                                                                                                                                                                                                isExpanded: boolean;

                                                                                                                                                                                                                                  property row

                                                                                                                                                                                                                                  row: GroupRow<TRow>;

                                                                                                                                                                                                                                    property tabIndex

                                                                                                                                                                                                                                    tabIndex: number;

                                                                                                                                                                                                                                      property toggleGroup

                                                                                                                                                                                                                                      toggleGroup: () => void;

                                                                                                                                                                                                                                        interface RenderHeaderCellProps

                                                                                                                                                                                                                                        interface RenderHeaderCellProps<TRow, TSummaryRow = unknown> {}

                                                                                                                                                                                                                                          property column

                                                                                                                                                                                                                                          column: CalculatedColumn<TRow, TSummaryRow>;

                                                                                                                                                                                                                                            property priority

                                                                                                                                                                                                                                            priority: number | undefined;

                                                                                                                                                                                                                                              property sortDirection

                                                                                                                                                                                                                                              sortDirection: SortDirection | undefined;

                                                                                                                                                                                                                                                property tabIndex

                                                                                                                                                                                                                                                tabIndex: number;

                                                                                                                                                                                                                                                  interface RenderRowProps

                                                                                                                                                                                                                                                  interface RenderRowProps<TRow, TSummaryRow = unknown>
                                                                                                                                                                                                                                                  extends BaseRenderRowProps<TRow, TSummaryRow> {}

                                                                                                                                                                                                                                                    property copiedCellIdx

                                                                                                                                                                                                                                                    copiedCellIdx: number | undefined;

                                                                                                                                                                                                                                                      property draggedOverCellIdx

                                                                                                                                                                                                                                                      draggedOverCellIdx: number | undefined;

                                                                                                                                                                                                                                                        property lastFrozenColumnIndex

                                                                                                                                                                                                                                                        lastFrozenColumnIndex: number;

                                                                                                                                                                                                                                                          property onRowChange

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

                                                                                                                                                                                                                                                            property row

                                                                                                                                                                                                                                                            row: TRow;

                                                                                                                                                                                                                                                              property rowClass

                                                                                                                                                                                                                                                              rowClass: Maybe<(row: TRow, rowIdx: number) => Maybe<string>>;

                                                                                                                                                                                                                                                                property selectedCellEditor

                                                                                                                                                                                                                                                                selectedCellEditor: ReactElement<RenderEditCellProps<TRow>> | undefined;

                                                                                                                                                                                                                                                                  property setDraggedOverRowIdx

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

                                                                                                                                                                                                                                                                    interface RenderSortIconProps

                                                                                                                                                                                                                                                                    interface RenderSortIconProps {}

                                                                                                                                                                                                                                                                      property sortDirection

                                                                                                                                                                                                                                                                      sortDirection: SortDirection | undefined;

                                                                                                                                                                                                                                                                        interface RenderSortPriorityProps

                                                                                                                                                                                                                                                                        interface RenderSortPriorityProps {}

                                                                                                                                                                                                                                                                          property priority

                                                                                                                                                                                                                                                                          priority: number | undefined;

                                                                                                                                                                                                                                                                            interface RenderSortStatusProps

                                                                                                                                                                                                                                                                            interface RenderSortStatusProps
                                                                                                                                                                                                                                                                            extends RenderSortIconProps,
                                                                                                                                                                                                                                                                            RenderSortPriorityProps {}

                                                                                                                                                                                                                                                                              interface RenderSummaryCellProps

                                                                                                                                                                                                                                                                              interface RenderSummaryCellProps<TSummaryRow, TRow = unknown> {}

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

                                                                                                                                                                                                                                                                                                    property columns

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

                                                                                                                                                                                                                                                                                                      property expandedGroupIds

                                                                                                                                                                                                                                                                                                      expandedGroupIds: ReadonlySet<unknown>;

                                                                                                                                                                                                                                                                                                        property groupBy

                                                                                                                                                                                                                                                                                                        groupBy: readonly string[];

                                                                                                                                                                                                                                                                                                          property onExpandedGroupIdsChange

                                                                                                                                                                                                                                                                                                          onExpandedGroupIdsChange: (expandedGroupIds: Set<unknown>) => void;

                                                                                                                                                                                                                                                                                                            property rowGrouper

                                                                                                                                                                                                                                                                                                            rowGrouper: (
                                                                                                                                                                                                                                                                                                            rows: readonly R[],
                                                                                                                                                                                                                                                                                                            columnKey: string
                                                                                                                                                                                                                                                                                                            ) => Record<string, readonly R[]>;

                                                                                                                                                                                                                                                                                                              property rowHeight

                                                                                                                                                                                                                                                                                                              rowHeight?: Maybe<number | ((args: RowHeightArgs<R>) => number)>;

                                                                                                                                                                                                                                                                                                                Type Aliases

                                                                                                                                                                                                                                                                                                                type CalculatedColumnOrColumnGroup

                                                                                                                                                                                                                                                                                                                type CalculatedColumnOrColumnGroup<R, SR> =
                                                                                                                                                                                                                                                                                                                | CalculatedColumnParent<R, SR>
                                                                                                                                                                                                                                                                                                                | CalculatedColumn<R, SR>;

                                                                                                                                                                                                                                                                                                                  type CellKeyboardEvent

                                                                                                                                                                                                                                                                                                                  type CellKeyboardEvent = CellEvent<React.KeyboardEvent<HTMLDivElement>>;

                                                                                                                                                                                                                                                                                                                    type CellKeyDownArgs

                                                                                                                                                                                                                                                                                                                    type CellKeyDownArgs<TRow, TSummaryRow = unknown> =
                                                                                                                                                                                                                                                                                                                    | SelectCellKeyDownArgs<TRow, TSummaryRow>
                                                                                                                                                                                                                                                                                                                    | EditCellKeyDownArgs<TRow, TSummaryRow>;

                                                                                                                                                                                                                                                                                                                      type CellMouseEvent

                                                                                                                                                                                                                                                                                                                      type CellMouseEvent = CellEvent<React.MouseEvent<HTMLDivElement>>;

                                                                                                                                                                                                                                                                                                                        type ColSpanArgs

                                                                                                                                                                                                                                                                                                                        type ColSpanArgs<TRow, TSummaryRow> =
                                                                                                                                                                                                                                                                                                                        | {
                                                                                                                                                                                                                                                                                                                        type: 'HEADER';
                                                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                                                        | {
                                                                                                                                                                                                                                                                                                                        type: 'ROW';
                                                                                                                                                                                                                                                                                                                        row: TRow;
                                                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                                                        | {
                                                                                                                                                                                                                                                                                                                        type: 'SUMMARY';
                                                                                                                                                                                                                                                                                                                        row: TSummaryRow;
                                                                                                                                                                                                                                                                                                                        };

                                                                                                                                                                                                                                                                                                                          type ColumnOrColumnGroup

                                                                                                                                                                                                                                                                                                                          type ColumnOrColumnGroup<R, SR = unknown> = Column<R, SR> | ColumnGroup<R, SR>;

                                                                                                                                                                                                                                                                                                                            type RowHeightArgs

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

                                                                                                                                                                                                                                                                                                                              type SelectRowEvent

                                                                                                                                                                                                                                                                                                                              type SelectRowEvent<TRow> =
                                                                                                                                                                                                                                                                                                                              | {
                                                                                                                                                                                                                                                                                                                              type: 'HEADER';
                                                                                                                                                                                                                                                                                                                              checked: boolean;
                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                              | {
                                                                                                                                                                                                                                                                                                                              type: 'ROW';
                                                                                                                                                                                                                                                                                                                              row: TRow;
                                                                                                                                                                                                                                                                                                                              checked: boolean;
                                                                                                                                                                                                                                                                                                                              isShiftClick: boolean;
                                                                                                                                                                                                                                                                                                                              };

                                                                                                                                                                                                                                                                                                                                type SortDirection

                                                                                                                                                                                                                                                                                                                                type SortDirection = 'ASC' | 'DESC';

                                                                                                                                                                                                                                                                                                                                  Package Files (1)

                                                                                                                                                                                                                                                                                                                                  Dependencies (1)

                                                                                                                                                                                                                                                                                                                                  Dev Dependencies (52)

                                                                                                                                                                                                                                                                                                                                  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>