• Version 7.0.0-beta.7
  • Published
  • 601 kB
  • 1 dependency
  • MIT license


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


Feature-rich and customizable data grid React component





Type Aliases



const SELECT_COLUMN_KEY: string;

    variable SelectColumn

    const SelectColumn: Column<any, any>;


      function _default

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

        function Row

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

          function SelectCellFormatter

          SelectCellFormatter: ({
          'aria-label': ariaLabel,
          'aria-labelledby': ariaLabelledBy,
          }: SelectCellFormatterProps) => any;

            function SortableHeaderCell

            SortableHeaderCell: <R, SR>({
            }: Props<R, SR>) => any;

              function TextEditor

              TextEditor: <TRow, TSummaryRow>({
              }: EditorProps<TRow, TSummaryRow>) => any;

                function ToggleGroupFormatter

                ToggleGroupFormatter: <R, SR>({
                }: GroupFormatterProps<R, SR>) => any;

                  function useRowSelection

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

                    function ValueFormatter

                    ValueFormatter: <R, SR>(props: FormatterProps<R, SR>) => JSX.Element | null;


                      interface CalculatedColumn

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

                        property formatter

                        readonly formatter: React.ComponentType<FormatterProps<TRow, TSummaryRow>>;

                          property frozen

                          readonly frozen: boolean;

                            property idx

                            readonly idx: number;

                              property isLastFrozenColumn

                              readonly isLastFrozenColumn: boolean;

                                property resizable

                                readonly resizable: boolean;

                                  property rowGroup

                                  readonly rowGroup: boolean;

                                    property sortable

                                    readonly sortable: boolean;

                                      interface CellRendererProps

                                      interface CellRendererProps<TRow, TSummaryRow>
                                      extends Pick<
                                      RowRendererProps<TRow, TSummaryRow>,
                                      'onRowClick' | 'onRowDoubleClick' | 'selectCell'
                                      Omit_2<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'> {}

                                        property colSpan

                                        colSpan: number | undefined;

                                          property column

                                          column: CalculatedColumn<TRow, TSummaryRow>;

                                            property dragHandle

                                            dragHandle: ReactElement<React.HTMLAttributes<HTMLDivElement>> | undefined;

                                              property isCellSelected

                                              isCellSelected: boolean;

                                                property isCopied

                                                isCopied: boolean;

                                                  property isDraggedOver

                                                  isDraggedOver: boolean;

                                                    property onRowChange

                                                    onRowChange: (newRow: TRow) => void;

                                                      property row

                                                      row: TRow;

                                                        interface Column

                                                        interface Column<TRow, TSummaryRow = unknown> {}

                                                          property cellClass

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

                                                            property colSpan

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

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

                                                              readonly editor?: Maybe<React.ComponentType<EditorProps<TRow, TSummaryRow>>>;
                                                              • Editor to be rendered when cell of column is being edited. If set, then the column is automatically set to be editable

                                                              property editorOptions

                                                              readonly editorOptions?: Maybe<{
                                                              /** @default false */
                                                              readonly renderFormatter?: Maybe<boolean>;
                                                              /** @default false */
                                                              readonly editOnClick?: Maybe<boolean>;
                                                              /** @default true */
                                                              readonly commitOnOutsideClick?: Maybe<boolean>;
                                                              /** Prevent default to cancel editing */
                                                              readonly onCellKeyDown?: Maybe<
                                                              (event: React.KeyboardEvent<HTMLDivElement>) => void
                                                              /** Control the default cell navigation behavior while the editor is open */
                                                              readonly onNavigation?: Maybe<
                                                              (event: React.KeyboardEvent<HTMLDivElement>) => boolean

                                                                property formatter

                                                                readonly formatter?: Maybe<
                                                                React.ComponentType<FormatterProps<TRow, TSummaryRow>>
                                                                • Formatter to be used to render the cell content

                                                                property frozen

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

                                                                property groupFormatter

                                                                readonly groupFormatter?: Maybe<
                                                                React.ComponentType<GroupFormatterProps<TRow, TSummaryRow>>
                                                                • Formatter to be used to render the group cell content

                                                                property headerCellClass

                                                                readonly headerCellClass?: Maybe<string>;

                                                                  property headerRenderer

                                                                  readonly headerRenderer?: Maybe<
                                                                  React.ComponentType<HeaderRendererProps<TRow, TSummaryRow>>
                                                                  • Header renderer for each header cell

                                                                  property key

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

                                                                  property maxWidth

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

                                                                  property minWidth

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

                                                                  property name

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

                                                                  property resizable

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

                                                                  property sortable

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

                                                                  property sortDescendingFirst

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

                                                                  property summaryCellClass

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

                                                                    property summaryFormatter

                                                                    readonly summaryFormatter?: Maybe<
                                                                    React.ComponentType<SummaryFormatterProps<TSummaryRow, TRow>>
                                                                    • Formatter to be used to render the summary cell content

                                                                    property width

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

                                                                    interface DataGridHandle

                                                                    interface DataGridHandle {}

                                                                      property element

                                                                      element: HTMLDivElement | null;

                                                                        property scrollToColumn

                                                                        scrollToColumn: (colIdx: number) => void;

                                                                          property scrollToRow

                                                                          scrollToRow: (rowIdx: number) => void;

                                                                            property selectCell

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

                                                                              interface DataGridProps

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

                                                                                property 'data-testid'

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

                                                                                  property cellNavigationMode

                                                                                  cellNavigationMode?: Maybe<CellNavigationMode>;
                                                                                  • 'NONE'

                                                                                  property columns

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

                                                                                  property defaultColumnOptions

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

                                                                                    property enableVirtualization

                                                                                    enableVirtualization?: Maybe<boolean>;
                                                                                    • true

                                                                                    property expandedGroupIds

                                                                                    expandedGroupIds?: Maybe<ReadonlySet<unknown>>;

                                                                                      property groupBy

                                                                                      groupBy?: Maybe<readonly string[]>;

                                                                                        property headerRowHeight

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

                                                                                        property noRowsFallback

                                                                                        noRowsFallback?: React.ReactNode;

                                                                                          property onColumnResize

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

                                                                                          property onExpandedGroupIdsChange

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

                                                                                            property onFill

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

                                                                                              property onPaste

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

                                                                                                property onRowClick

                                                                                                onRowClick?: Maybe<(row: R, column: CalculatedColumn<R, SR>) => void>;
                                                                                                • Function called whenever a row is clicked

                                                                                                property onRowDoubleClick

                                                                                                onRowDoubleClick?: Maybe<(row: R, column: CalculatedColumn<R, SR>) => void>;
                                                                                                • Function called whenever a row is double clicked

                                                                                                property onRowsChange

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

                                                                                                  property onScroll

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

                                                                                                  property onSelectedRowsChange

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

                                                                                                  property onSortColumnsChange

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

                                                                                                    property rowClass

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

                                                                                                      property rowGrouper

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

                                                                                                        property rowHeight

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

                                                                                                        property rowKeyGetter

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

                                                                                                        property rowRenderer

                                                                                                        rowRenderer?: Maybe<React.ComponentType<RowRendererProps<R, SR>>>;
                                                                                                        • Miscellaneous

                                                                                                        property rows

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

                                                                                                        property selectedRows

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

                                                                                                        property sortColumns

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

                                                                                                        property summaryRowHeight

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

                                                                                                        property summaryRows

                                                                                                        summaryRows?: Maybe<readonly SR[]>;
                                                                                                        • Rows to be pinned at the bottom of the rows view for summary, the vertical scroll bar will not scroll these rows. Bottom horizontal scroll bar can move the row left / right. Or a customized row renderer can be used to disabled the scrolling support.

                                                                                                        interface EditorProps

                                                                                                        interface EditorProps<TRow, TSummaryRow = unknown> {}

                                                                                                          property column

                                                                                                          column: CalculatedColumn<TRow, TSummaryRow>;

                                                                                                            property onClose

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

                                                                                                              property onRowChange

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

                                                                                                                property row

                                                                                                                row: TRow;

                                                                                                                  interface FillEvent

                                                                                                                  interface FillEvent<TRow> {}

                                                                                                                    property columnKey

                                                                                                                    columnKey: string;

                                                                                                                      property sourceRow

                                                                                                                      sourceRow: TRow;

                                                                                                                        property targetRow

                                                                                                                        targetRow: TRow;

                                                                                                                          interface FormatterProps

                                                                                                                          interface FormatterProps<TRow, TSummaryRow = unknown> {}

                                                                                                                            property column

                                                                                                                            column: CalculatedColumn<TRow, TSummaryRow>;

                                                                                                                              property isCellSelected

                                                                                                                              isCellSelected: boolean;

                                                                                                                                property onRowChange

                                                                                                                                onRowChange: (row: TRow) => void;

                                                                                                                                  property row

                                                                                                                                  row: TRow;

                                                                                                                                    interface GroupFormatterProps

                                                                                                                                    interface GroupFormatterProps<TRow, TSummaryRow = unknown> {}

                                                                                                                                      property childRows

                                                                                                                                      childRows: readonly TRow[];

                                                                                                                                        property column

                                                                                                                                        column: CalculatedColumn<TRow, TSummaryRow>;

                                                                                                                                          property groupKey

                                                                                                                                          groupKey: unknown;

                                                                                                                                            property isCellSelected

                                                                                                                                            isCellSelected: boolean;

                                                                                                                                              property isExpanded

                                                                                                                                              isExpanded: boolean;

                                                                                                                                                property row

                                                                                                                                                row: GroupRow<TRow>;

                                                                                                                                                  property toggleGroup

                                                                                                                                                  toggleGroup: () => void;

                                                                                                                                                    interface HeaderRendererProps

                                                                                                                                                    interface HeaderRendererProps<TRow, TSummaryRow = unknown> {}

                                                                                                                                                      property allRowsSelected

                                                                                                                                                      allRowsSelected: boolean;

                                                                                                                                                        property column

                                                                                                                                                        column: CalculatedColumn<TRow, TSummaryRow>;

                                                                                                                                                          property isCellSelected

                                                                                                                                                          isCellSelected: boolean;

                                                                                                                                                            property onAllRowsSelectionChange

                                                                                                                                                            onAllRowsSelectionChange: (checked: boolean) => void;

                                                                                                                                                              property onSort

                                                                                                                                                              onSort: (ctrlClick: boolean) => void;

                                                                                                                                                                property priority

                                                                                                                                                                priority: number | undefined;

                                                                                                                                                                  property sortDirection

                                                                                                                                                                  sortDirection: SortDirection | undefined;

                                                                                                                                                                    interface PasteEvent

                                                                                                                                                                    interface PasteEvent<TRow> {}

                                                                                                                                                                      property sourceColumnKey

                                                                                                                                                                      sourceColumnKey: string;

                                                                                                                                                                        property sourceRow

                                                                                                                                                                        sourceRow: TRow;

                                                                                                                                                                          property targetColumnKey

                                                                                                                                                                          targetColumnKey: string;

                                                                                                                                                                            property targetRow

                                                                                                                                                                            targetRow: TRow;

                                                                                                                                                                              interface RowRendererProps

                                                                                                                                                                              interface RowRendererProps<TRow, TSummaryRow = unknown>
                                                                                                                                                                              extends Omit_2<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'> {}

                                                                                                                                                                                property copiedCellIdx

                                                                                                                                                                                copiedCellIdx: number | undefined;

                                                                                                                                                                                  property draggedOverCellIdx

                                                                                                                                                                                  draggedOverCellIdx: number | undefined;

                                                                                                                                                                                    property height

                                                                                                                                                                                    height: number;

                                                                                                                                                                                      property isRowSelected

                                                                                                                                                                                      isRowSelected: boolean;

                                                                                                                                                                                        property lastFrozenColumnIndex

                                                                                                                                                                                        lastFrozenColumnIndex: number;

                                                                                                                                                                                          property onRowChange

                                                                                                                                                                                          onRowChange: (rowIdx: number, newRow: TRow) => void;

                                                                                                                                                                                            property onRowClick

                                                                                                                                                                                            onRowClick: Maybe<
                                                                                                                                                                                            (row: TRow, column: CalculatedColumn<TRow, TSummaryRow>) => void

                                                                                                                                                                                              property onRowDoubleClick

                                                                                                                                                                                              onRowDoubleClick: Maybe<
                                                                                                                                                                                              (row: TRow, column: CalculatedColumn<TRow, TSummaryRow>) => void

                                                                                                                                                                                                property row

                                                                                                                                                                                                row: TRow;

                                                                                                                                                                                                  property rowClass

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

                                                                                                                                                                                                    property rowIdx

                                                                                                                                                                                                    rowIdx: number;

                                                                                                                                                                                                      property selectCell

                                                                                                                                                                                                      selectCell: (
                                                                                                                                                                                                      row: TRow,
                                                                                                                                                                                                      column: CalculatedColumn<TRow, TSummaryRow>,
                                                                                                                                                                                                      enableEditor?: Maybe<boolean>
                                                                                                                                                                                                      ) => void;

                                                                                                                                                                                                        property selectedCellDragHandle

                                                                                                                                                                                                        | ReactElement<React.HTMLAttributes<HTMLDivElement>>
                                                                                                                                                                                                        | undefined;

                                                                                                                                                                                                          property selectedCellEditor

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

                                                                                                                                                                                                            property selectedCellIdx

                                                                                                                                                                                                            selectedCellIdx: number | undefined;

                                                                                                                                                                                                              property setDraggedOverRowIdx

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

                                                                                                                                                                                                                property top

                                                                                                                                                                                                                top: number;

                                                                                                                                                                                                                  property viewportColumns

                                                                                                                                                                                                                  viewportColumns: readonly CalculatedColumn<TRow, TSummaryRow>[];

                                                                                                                                                                                                                    interface RowsChangeData

                                                                                                                                                                                                                    interface RowsChangeData<R, SR = unknown> {}

                                                                                                                                                                                                                      property column

                                                                                                                                                                                                                      column: CalculatedColumn<R, SR>;

                                                                                                                                                                                                                        property indexes

                                                                                                                                                                                                                        indexes: number[];

                                                                                                                                                                                                                          interface SelectRowEvent

                                                                                                                                                                                                                          interface SelectRowEvent<TRow> {}

                                                                                                                                                                                                                            property checked

                                                                                                                                                                                                                            checked: boolean;

                                                                                                                                                                                                                              property isShiftClick

                                                                                                                                                                                                                              isShiftClick: boolean;

                                                                                                                                                                                                                                property row

                                                                                                                                                                                                                                row: TRow;

                                                                                                                                                                                                                                  interface SortColumn

                                                                                                                                                                                                                                  interface SortColumn {}

                                                                                                                                                                                                                                    property columnKey

                                                                                                                                                                                                                                    readonly columnKey: string;

                                                                                                                                                                                                                                      property direction

                                                                                                                                                                                                                                      readonly direction: SortDirection;

                                                                                                                                                                                                                                        interface SummaryFormatterProps

                                                                                                                                                                                                                                        interface SummaryFormatterProps<TSummaryRow, TRow = unknown> {}

                                                                                                                                                                                                                                          property column

                                                                                                                                                                                                                                          column: CalculatedColumn<TRow, TSummaryRow>;

                                                                                                                                                                                                                                            property isCellSelected

                                                                                                                                                                                                                                            isCellSelected: boolean;

                                                                                                                                                                                                                                              property row

                                                                                                                                                                                                                                              row: TSummaryRow;

                                                                                                                                                                                                                                                Type Aliases

                                                                                                                                                                                                                                                type CellNavigationMode

                                                                                                                                                                                                                                                type CellNavigationMode = 'NONE' | 'CHANGE_ROW' | 'LOOP_OVER_ROW';

                                                                                                                                                                                                                                                  type ColSpanArgs

                                                                                                                                                                                                                                                  type ColSpanArgs<R, SR> =
                                                                                                                                                                                                                                                  | {
                                                                                                                                                                                                                                                  type: 'HEADER';
                                                                                                                                                                                                                                                  | {
                                                                                                                                                                                                                                                  type: 'ROW';
                                                                                                                                                                                                                                                  row: R;
                                                                                                                                                                                                                                                  | {
                                                                                                                                                                                                                                                  type: 'SUMMARY';
                                                                                                                                                                                                                                                  row: SR;

                                                                                                                                                                                                                                                    type RowHeightArgs

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

                                                                                                                                                                                                                                                      type SortDirection

                                                                                                                                                                                                                                                      type SortDirection = 'ASC' | 'DESC';

                                                                                                                                                                                                                                                        Package Files (1)

                                                                                                                                                                                                                                                        Dependencies (1)

                                                                                                                                                                                                                                                        Dev Dependencies (65)

                                                                                                                                                                                                                                                        Peer Dependencies (2)


                                                                                                                                                                                                                                                        To add a badge like this badgeto your package's README, use the codes available below.

                                                                                                                                                                                                                                                        You may also use to create a custom badge linking to

                                                                                                                                                                                                                                                        • Markdown
                                                                                                                                                                                                                                                        • HTML
                                                                                                                                                                                                                                                          <a href=""><img src="" alt=""></a>