react-data-grid

  • Version 7.0.0-beta.61
  • Published
  • 373 kB
  • No dependencies
  • MIT license

Install

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

Overview

Feature-rich and customizable data grid React component

Index

Variables

Functions

Interfaces

Type Aliases

Variables

variable DataGridDefaultRenderersContext

const DataGridDefaultRenderersContext: any;

    variable SELECT_COLUMN_KEY

    const SELECT_COLUMN_KEY: string;

      variable SelectColumn

      const SelectColumn: Column<any, any>;

        Functions

        function Cell

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

          function DataGrid

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

            Example 1

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

          function renderCheckbox

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

            function renderHeaderCell

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

              function renderSortIcon

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

                function renderSortPriority

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

                  function renderTextEditor

                  renderTextEditor: <TRow, TSummaryRow>({
                  row,
                  column,
                  onRowChange,
                  onClose,
                  }: RenderEditCellProps<TRow, TSummaryRow>) => any;

                    function renderToggleGroup

                    renderToggleGroup: <R, SR>(props: RenderGroupCellProps<R, SR>) => any;

                      function renderValue

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

                        function Row

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

                          function SelectCellFormatter

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

                            function ToggleGroup

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

                              function TreeDataGrid

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

                                function useHeaderRowSelection

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

                                  function useRowSelection

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

                                    Interfaces

                                    interface CalculatedColumn

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

                                      property draggable

                                      readonly draggable: boolean;

                                        property frozen

                                        readonly frozen: ColumnFrozen;

                                          property idx

                                          readonly idx: number;

                                            property level

                                            readonly level: number;

                                              property maxWidth

                                              readonly maxWidth: number | undefined;

                                                property minWidth

                                                readonly minWidth: number;

                                                  property parent

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

                                                    property renderCell

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

                                                      property renderHeaderCell

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

                                                        property resizable

                                                        readonly resizable: boolean;

                                                          property sortable

                                                          readonly sortable: boolean;

                                                            property width

                                                            readonly width: number | string;

                                                              interface CalculatedColumnParent

                                                              interface CalculatedColumnParent<R, SR> {}

                                                                property colSpan

                                                                readonly colSpan: number;

                                                                  property headerCellClass

                                                                  readonly headerCellClass?: Maybe<string>;

                                                                    property idx

                                                                    readonly idx: number;

                                                                      property level

                                                                      readonly level: number;

                                                                        property name

                                                                        readonly name: string | ReactElement;

                                                                          property parent

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

                                                                            interface CellMouseArgs

                                                                            interface CellMouseArgs<TRow, TSummaryRow = unknown> {}

                                                                              property column

                                                                              column: CalculatedColumn<TRow, TSummaryRow>;
                                                                              • The column object of the cell.

                                                                              property row

                                                                              row: TRow;
                                                                              • The row object of the cell.

                                                                              property rowIdx

                                                                              rowIdx: number;
                                                                              • The row index of the cell.

                                                                              property setActivePosition

                                                                              setActivePosition: (enableEditor?: boolean) => void;
                                                                              • Function to manually focus the cell. Pass true to immediately start editing.

                                                                              interface CellRendererProps

                                                                              interface CellRendererProps<TRow, TSummaryRow>
                                                                              extends BaseCellRendererProps<TRow, TSummaryRow> {}

                                                                                property colSpan

                                                                                colSpan: number | undefined;

                                                                                  property column

                                                                                  column: CalculatedColumn<TRow, TSummaryRow>;

                                                                                    property isCellActive

                                                                                    isCellActive: boolean;

                                                                                      property isDraggedOver

                                                                                      isDraggedOver: boolean;

                                                                                        property onRowChange

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

                                                                                          property row

                                                                                          row: TRow;

                                                                                            interface Column

                                                                                            interface Column<TRow, TSummaryRow = unknown> {}

                                                                                              property cellClass

                                                                                              readonly cellClass?: Maybe<string | ((row: TRow) => Maybe<string>)>;
                                                                                              • Class name(s) for cells

                                                                                              property colSpan

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

                                                                                                property draggable

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

                                                                                                property editable

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

                                                                                                property editorOptions

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

                                                                                                property frozen

                                                                                                readonly frozen?: Maybe<ColumnFrozen>;
                                                                                                • Determines whether column is frozen, and on which edge. true is an alias for 'start' for backwards compatibility.

                                                                                                property headerCellClass

                                                                                                readonly headerCellClass?: Maybe<string>;
                                                                                                • Class name(s) for the header cell

                                                                                                property key

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

                                                                                                property maxWidth

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

                                                                                                property minWidth

                                                                                                readonly minWidth?: Maybe<number>;
                                                                                                • Minimum column width in pixels 50

                                                                                                property name

                                                                                                readonly name: string | ReactElement;
                                                                                                • The name of the column. Displayed in the header cell by default

                                                                                                property renderCell

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

                                                                                                property renderEditCell

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

                                                                                                property renderGroupCell

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

                                                                                                property renderHeaderCell

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

                                                                                                property renderSummaryCell

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

                                                                                                property resizable

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

                                                                                                property sortable

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

                                                                                                property sortDescendingFirst

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

                                                                                                property summaryCellClass

                                                                                                readonly summaryCellClass?: Maybe<
                                                                                                string | ((row: TSummaryRow) => Maybe<string>)
                                                                                                >;
                                                                                                • Class name(s) for summary cells

                                                                                                property width

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

                                                                                                interface ColumnGroup

                                                                                                interface ColumnGroup<R, SR = unknown> {}

                                                                                                  property children

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

                                                                                                    property headerCellClass

                                                                                                    readonly headerCellClass?: Maybe<string>;

                                                                                                      property name

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

                                                                                                      interface ColumnWidth

                                                                                                      interface ColumnWidth {}

                                                                                                        property type

                                                                                                        readonly type: 'resized' | 'measured';

                                                                                                          property width

                                                                                                          readonly width: number;

                                                                                                            interface DataGridHandle

                                                                                                            interface DataGridHandle {}

                                                                                                              property element

                                                                                                              element: HTMLDivElement | null;

                                                                                                                property scrollToCell

                                                                                                                scrollToCell: (position: PartialPosition) => void;

                                                                                                                  property setActivePosition

                                                                                                                  setActivePosition: (
                                                                                                                  position: Position,
                                                                                                                  options?: SetActivePositionOptions
                                                                                                                  ) => void;

                                                                                                                    interface DataGridProps

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

                                                                                                                      property 'data-cy'

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

                                                                                                                        property 'data-testid'

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

                                                                                                                          property bottomSummaryRows

                                                                                                                          bottomSummaryRows?: Maybe<readonly SR[]>;
                                                                                                                          • Rows pinned at the bottom of the grid for summary purposes

                                                                                                                          property columns

                                                                                                                          columns: readonly ColumnOrColumnGroup<NoInfer<R>, NoInfer<SR>>[];
                                                                                                                          • An array of column definitions

                                                                                                                          property columnWidths

                                                                                                                          columnWidths?: Maybe<ColumnWidths>;
                                                                                                                          • A map of column widths

                                                                                                                          property defaultColumnOptions

                                                                                                                          defaultColumnOptions?: Maybe<DefaultColumnOptions<NoInfer<R>, NoInfer<SR>>>;
                                                                                                                          • Default options applied to all columns

                                                                                                                          property direction

                                                                                                                          direction?: Maybe<Direction>;
                                                                                                                          • Text direction of the grid ('ltr' or 'rtl') 'ltr'

                                                                                                                          property enableVirtualization

                                                                                                                          enableVirtualization?: Maybe<boolean>;
                                                                                                                          • true

                                                                                                                          property headerRowClass

                                                                                                                          headerRowClass?: Maybe<string>;
                                                                                                                          • Custom class name for the header row

                                                                                                                          property headerRowHeight

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

                                                                                                                          property isRowSelectionDisabled

                                                                                                                          isRowSelectionDisabled?: Maybe<(row: NoInfer<R>) => boolean>;
                                                                                                                          • Function to determine if row selection is disabled for a specific row

                                                                                                                          property onActivePositionChange

                                                                                                                          onActivePositionChange?: Maybe<
                                                                                                                          (args: PositionChangeArgs<NoInfer<R>, NoInfer<SR>>) => void
                                                                                                                          >;
                                                                                                                          • Function called whenever the active position is changed

                                                                                                                          property onCellClick

                                                                                                                          onCellClick?: CellMouseEventHandler<R, SR>;
                                                                                                                          • Callback triggered when a cell is clicked

                                                                                                                          property onCellContextMenu

                                                                                                                          onCellContextMenu?: CellMouseEventHandler<R, SR>;
                                                                                                                          • Callback triggered when a cell is right-clicked

                                                                                                                          property onCellCopy

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

                                                                                                                          property onCellDoubleClick

                                                                                                                          onCellDoubleClick?: CellMouseEventHandler<R, SR>;
                                                                                                                          • Callback triggered when a cell is double-clicked

                                                                                                                          property onCellKeyDown

                                                                                                                          onCellKeyDown?: Maybe<
                                                                                                                          (
                                                                                                                          args: CellKeyDownArgs<NoInfer<R>, NoInfer<SR>>,
                                                                                                                          event: CellKeyboardEvent
                                                                                                                          ) => void
                                                                                                                          >;
                                                                                                                          • Callback triggered when a key is pressed in a cell

                                                                                                                          property onCellMouseDown

                                                                                                                          onCellMouseDown?: CellMouseEventHandler<R, SR>;
                                                                                                                          • Callback triggered when a pointer becomes active in a cell

                                                                                                                          property onCellPaste

                                                                                                                          onCellPaste?: Maybe<
                                                                                                                          (
                                                                                                                          args: CellPasteArgs<NoInfer<R>, NoInfer<SR>>,
                                                                                                                          event: CellClipboardEvent
                                                                                                                          ) => NoInfer<R>
                                                                                                                          >;
                                                                                                                          • Callback triggered when content is pasted into a cell

                                                                                                                          property onColumnResize

                                                                                                                          onColumnResize?: Maybe<(column: CalculatedColumn<R, SR>, width: number) => void>;
                                                                                                                          • Callback triggered when column is resized

                                                                                                                          property onColumnsReorder

                                                                                                                          onColumnsReorder?: Maybe<
                                                                                                                          (sourceColumnKey: string, targetColumnKey: string) => void
                                                                                                                          >;
                                                                                                                          • Callback triggered when columns are reordered

                                                                                                                          property onColumnWidthsChange

                                                                                                                          onColumnWidthsChange?: Maybe<(columnWidths: ColumnWidths) => void>;
                                                                                                                          • Callback triggered when column widths change

                                                                                                                          property onFill

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

                                                                                                                            property onRowsChange

                                                                                                                            onRowsChange?: Maybe<
                                                                                                                            (rows: NoInfer<R>[], data: RowsChangeData<NoInfer<R>, NoInfer<SR>>) => void
                                                                                                                            >;
                                                                                                                            • Callback triggered when rows are changed

                                                                                                                            property onSelectedRowsChange

                                                                                                                            onSelectedRowsChange?: Maybe<(selectedRows: Set<NoInfer<K>>) => void>;
                                                                                                                            • Callback triggered when the selection changes

                                                                                                                            property onSortColumnsChange

                                                                                                                            onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>;
                                                                                                                            • Callback triggered when sorting changes

                                                                                                                            property ref

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

                                                                                                                              property renderers

                                                                                                                              renderers?: Maybe<Renderers<NoInfer<R>, NoInfer<SR>>>;
                                                                                                                              • Custom renderers for cells, rows, and other components

                                                                                                                              property rowClass

                                                                                                                              rowClass?: Maybe<(row: NoInfer<R>, rowIdx: number) => Maybe<string>>;
                                                                                                                              • Function to apply custom class names to rows

                                                                                                                              property rowHeight

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

                                                                                                                              property rowKeyGetter

                                                                                                                              rowKeyGetter?: Maybe<(row: NoInfer<R>) => K>;
                                                                                                                              • Function to return a unique key/identifier for each row

                                                                                                                              property rows

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

                                                                                                                              property selectedRows

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

                                                                                                                              property sortColumns

                                                                                                                              sortColumns?: Maybe<readonly SortColumn[]>;
                                                                                                                              • An array of sorted columns

                                                                                                                              property summaryRowHeight

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

                                                                                                                              property topSummaryRows

                                                                                                                              topSummaryRows?: Maybe<readonly SR[]>;
                                                                                                                              • Rows pinned at the top of the grid for summary purposes

                                                                                                                              interface FillEvent

                                                                                                                              interface FillEvent<TRow> {}

                                                                                                                                property columnKey

                                                                                                                                columnKey: string;

                                                                                                                                  property sourceRow

                                                                                                                                  sourceRow: TRow;

                                                                                                                                    property targetRow

                                                                                                                                    targetRow: TRow;

                                                                                                                                      interface PositionChangeArgs

                                                                                                                                      interface PositionChangeArgs<TRow, TSummaryRow = unknown> {}

                                                                                                                                        property column

                                                                                                                                        column: CalculatedColumn<TRow, TSummaryRow> | undefined;
                                                                                                                                        • column object of the active position, undefined if the active position is a row instead of a cell

                                                                                                                                        property row

                                                                                                                                        row: TRow | undefined;
                                                                                                                                        • row object of the active position, undefined if the active position is on a header or summary row

                                                                                                                                        property rowIdx

                                                                                                                                        rowIdx: number;
                                                                                                                                        • row index of the active position

                                                                                                                                        interface RenderCellProps

                                                                                                                                        interface RenderCellProps<TRow, TSummaryRow = unknown> {}

                                                                                                                                          property column

                                                                                                                                          column: CalculatedColumn<TRow, TSummaryRow>;

                                                                                                                                            property isCellEditable

                                                                                                                                            isCellEditable: boolean;

                                                                                                                                              property onRowChange

                                                                                                                                              onRowChange: (row: TRow) => void;

                                                                                                                                                property row

                                                                                                                                                row: TRow;

                                                                                                                                                  property rowIdx

                                                                                                                                                  rowIdx: number;

                                                                                                                                                    property tabIndex

                                                                                                                                                    tabIndex: number;

                                                                                                                                                      interface RenderCheckboxProps

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

                                                                                                                                                        property indeterminate

                                                                                                                                                        indeterminate?: boolean | undefined;

                                                                                                                                                          property onChange

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

                                                                                                                                                            interface RenderEditCellProps

                                                                                                                                                            interface RenderEditCellProps<TRow, TSummaryRow = unknown> {}

                                                                                                                                                              property column

                                                                                                                                                              column: CalculatedColumn<TRow, TSummaryRow>;

                                                                                                                                                                property onClose

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

                                                                                                                                                                  property onRowChange

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

                                                                                                                                                                    property row

                                                                                                                                                                    row: TRow;

                                                                                                                                                                      property rowIdx

                                                                                                                                                                      rowIdx: number;

                                                                                                                                                                        interface Renderers

                                                                                                                                                                        interface Renderers<TRow, TSummaryRow> {}

                                                                                                                                                                          property noRowsFallback

                                                                                                                                                                          noRowsFallback?: Maybe<ReactNode>;

                                                                                                                                                                            property renderCell

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

                                                                                                                                                                              property renderCheckbox

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

                                                                                                                                                                                property renderRow

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

                                                                                                                                                                                  property renderSortStatus

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

                                                                                                                                                                                    interface RenderGroupCellProps

                                                                                                                                                                                    interface RenderGroupCellProps<TRow, TSummaryRow = unknown> {}

                                                                                                                                                                                      property childRows

                                                                                                                                                                                      childRows: readonly TRow[];

                                                                                                                                                                                        property column

                                                                                                                                                                                        column: CalculatedColumn<TRow, TSummaryRow>;

                                                                                                                                                                                          property groupKey

                                                                                                                                                                                          groupKey: unknown;

                                                                                                                                                                                            property isExpanded

                                                                                                                                                                                            isExpanded: boolean;

                                                                                                                                                                                              property row

                                                                                                                                                                                              row: GroupRow<TRow>;

                                                                                                                                                                                                property tabIndex

                                                                                                                                                                                                tabIndex: number;

                                                                                                                                                                                                  property toggleGroup

                                                                                                                                                                                                  toggleGroup: () => void;

                                                                                                                                                                                                    interface RenderHeaderCellProps

                                                                                                                                                                                                    interface RenderHeaderCellProps<TRow, TSummaryRow = unknown> {}

                                                                                                                                                                                                      property column

                                                                                                                                                                                                      column: CalculatedColumn<TRow, TSummaryRow>;

                                                                                                                                                                                                        property priority

                                                                                                                                                                                                        priority: number | undefined;

                                                                                                                                                                                                          property sortDirection

                                                                                                                                                                                                          sortDirection: SortDirection | undefined;

                                                                                                                                                                                                            property tabIndex

                                                                                                                                                                                                            tabIndex: number;

                                                                                                                                                                                                              interface RenderRowProps

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

                                                                                                                                                                                                                property activeCellEditor

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

                                                                                                                                                                                                                  property draggedOverCellIdx

                                                                                                                                                                                                                  draggedOverCellIdx: number | undefined;

                                                                                                                                                                                                                    property isTreeGrid

                                                                                                                                                                                                                    isTreeGrid: boolean;

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

                                                                                                                                                                                                                            interface RenderSortIconProps

                                                                                                                                                                                                                            interface RenderSortIconProps {}

                                                                                                                                                                                                                              property sortDirection

                                                                                                                                                                                                                              sortDirection: SortDirection | undefined;

                                                                                                                                                                                                                                interface RenderSortPriorityProps

                                                                                                                                                                                                                                interface RenderSortPriorityProps {}

                                                                                                                                                                                                                                  property priority

                                                                                                                                                                                                                                  priority: number | undefined;

                                                                                                                                                                                                                                    interface RenderSortStatusProps

                                                                                                                                                                                                                                    interface RenderSortStatusProps
                                                                                                                                                                                                                                    extends RenderSortIconProps,
                                                                                                                                                                                                                                    RenderSortPriorityProps {}

                                                                                                                                                                                                                                      interface RenderSummaryCellProps

                                                                                                                                                                                                                                      interface RenderSummaryCellProps<TSummaryRow, TRow = unknown> {}

                                                                                                                                                                                                                                        property column

                                                                                                                                                                                                                                        column: CalculatedColumn<TRow, TSummaryRow>;

                                                                                                                                                                                                                                          property row

                                                                                                                                                                                                                                          row: TSummaryRow;

                                                                                                                                                                                                                                            property tabIndex

                                                                                                                                                                                                                                            tabIndex: number;

                                                                                                                                                                                                                                              interface RowsChangeData

                                                                                                                                                                                                                                              interface RowsChangeData<R, SR = unknown> {}

                                                                                                                                                                                                                                                property column

                                                                                                                                                                                                                                                column: CalculatedColumn<R, SR>;

                                                                                                                                                                                                                                                  property indexes

                                                                                                                                                                                                                                                  indexes: number[];

                                                                                                                                                                                                                                                    interface SelectHeaderRowEvent

                                                                                                                                                                                                                                                    interface SelectHeaderRowEvent {}

                                                                                                                                                                                                                                                      property checked

                                                                                                                                                                                                                                                      checked: boolean;

                                                                                                                                                                                                                                                        interface SelectRowEvent

                                                                                                                                                                                                                                                        interface SelectRowEvent<TRow> {}

                                                                                                                                                                                                                                                          property checked

                                                                                                                                                                                                                                                          checked: boolean;

                                                                                                                                                                                                                                                            property isShiftClick

                                                                                                                                                                                                                                                            isShiftClick: boolean;

                                                                                                                                                                                                                                                              property row

                                                                                                                                                                                                                                                              row: TRow;

                                                                                                                                                                                                                                                                interface SetActivePositionOptions

                                                                                                                                                                                                                                                                interface SetActivePositionOptions {}

                                                                                                                                                                                                                                                                  property enableEditor

                                                                                                                                                                                                                                                                  enableEditor?: Maybe<boolean>;

                                                                                                                                                                                                                                                                    property shouldFocus

                                                                                                                                                                                                                                                                    shouldFocus?: Maybe<boolean>;

                                                                                                                                                                                                                                                                      interface SortColumn

                                                                                                                                                                                                                                                                      interface SortColumn {}

                                                                                                                                                                                                                                                                        property columnKey

                                                                                                                                                                                                                                                                        readonly columnKey: string;

                                                                                                                                                                                                                                                                          property direction

                                                                                                                                                                                                                                                                          readonly direction: SortDirection;

                                                                                                                                                                                                                                                                            interface TreeDataGridProps

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

                                                                                                                                                                                                                                                                              property columns

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

                                                                                                                                                                                                                                                                                property expandedGroupIds

                                                                                                                                                                                                                                                                                expandedGroupIds: ReadonlySet<unknown>;

                                                                                                                                                                                                                                                                                  property groupBy

                                                                                                                                                                                                                                                                                  groupBy: readonly string[];

                                                                                                                                                                                                                                                                                    property groupIdGetter

                                                                                                                                                                                                                                                                                    groupIdGetter?: Maybe<(groupKey: string, parentId?: string) => string>;

                                                                                                                                                                                                                                                                                      property onExpandedGroupIdsChange

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

                                                                                                                                                                                                                                                                                        property rowGrouper

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

                                                                                                                                                                                                                                                                                          property rowHeight

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

                                                                                                                                                                                                                                                                                            Type Aliases

                                                                                                                                                                                                                                                                                            type CalculatedColumnOrColumnGroup

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

                                                                                                                                                                                                                                                                                              type CellCopyArgs

                                                                                                                                                                                                                                                                                              type CellCopyArgs<TRow, TSummaryRow = unknown> = CellCopyPasteArgs<
                                                                                                                                                                                                                                                                                              TRow,
                                                                                                                                                                                                                                                                                              TSummaryRow
                                                                                                                                                                                                                                                                                              >;

                                                                                                                                                                                                                                                                                                type CellKeyboardEvent

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

                                                                                                                                                                                                                                                                                                  type CellKeyDownArgs

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

                                                                                                                                                                                                                                                                                                    type CellMouseEvent

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

                                                                                                                                                                                                                                                                                                      type CellPasteArgs

                                                                                                                                                                                                                                                                                                      type CellPasteArgs<TRow, TSummaryRow = unknown> = CellCopyPasteArgs<
                                                                                                                                                                                                                                                                                                      TRow,
                                                                                                                                                                                                                                                                                                      TSummaryRow
                                                                                                                                                                                                                                                                                                      >;

                                                                                                                                                                                                                                                                                                        type ColSpanArgs

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

                                                                                                                                                                                                                                                                                                          type ColumnFrozen

                                                                                                                                                                                                                                                                                                          type ColumnFrozen = boolean | 'start' | 'end';

                                                                                                                                                                                                                                                                                                            type ColumnOrColumnGroup

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

                                                                                                                                                                                                                                                                                                              type ColumnWidths

                                                                                                                                                                                                                                                                                                              type ColumnWidths = ReadonlyMap<string, ColumnWidth>;

                                                                                                                                                                                                                                                                                                                type DefaultColumnOptions

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

                                                                                                                                                                                                                                                                                                                  type Direction

                                                                                                                                                                                                                                                                                                                  type Direction = 'ltr' | 'rtl';

                                                                                                                                                                                                                                                                                                                    type RowHeightArgs

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

                                                                                                                                                                                                                                                                                                                      type SortDirection

                                                                                                                                                                                                                                                                                                                      type SortDirection = 'ASC' | 'DESC';

                                                                                                                                                                                                                                                                                                                        Package Files (1)

                                                                                                                                                                                                                                                                                                                        Dependencies (0)

                                                                                                                                                                                                                                                                                                                        No dependencies.

                                                                                                                                                                                                                                                                                                                        Dev Dependencies (31)

                                                                                                                                                                                                                                                                                                                        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>