react-data-grid

When updating rows in your state, avoid creating new references for every row object. Instead, map through the existing rows and only create a new object for the row that actually changed. This allows the grid's internal memoization to skip re-rendering unchanged rows.

// ✅ Good: Only changed row is re-rendered
setRows(rows.map((row, idx) => (idx === targetIdx ? { ...row, updated: true } : row)));

// ❌ Avoid: Creates new references for all rows, causing all visible rows to re-render
setRows(rows.map((row) => ({ ...row })));

The direction prop sets the text direction of the grid. It defaults to 'ltr' (left-to-right).

Setting direction to 'rtl' (right-to-left) results in:

• Columns flowing from right to left.
• Start-frozen columns pinned to the right, and end-frozen columns pinned to the left.
• Column resize cursor shown on the left edge.
• Scrollbar moved to the left.

When using TreeDataGrid, you can provide a rowHeight function that receives RowHeightArgs. This allows you to return different heights based on whether the row is a standard row or a group row, or based on row properties.

RowHeightArgs<TRow> types:

• { type: 'ROW'; row: TRow }
• { type: 'GROUP'; row: GroupRow<TRow> }

function getRowHeight(args: RowHeightArgs<Row>): number {
  if (args.type === 'GROUP') {
    return 40;
  }
  return args.row.isLarge ? 60 : 35;
}

<TreeDataGrid rowHeight={getRowHeight} ... />

Use RenderEditCellProps to create custom editors for cells. This interface provides access to the current row, the column being edited, and methods to commit changes or close the editor.

Key props:

• onRowChange: Function to update the row data. Call with commitChanges: true to save.
• onClose: Function to close the editor. Use commitChanges: true to save changes on close.

import type { RenderEditCellProps } from 'react-data-grid';

function CustomEditor({ row, column, onRowChange, onClose }: RenderEditCellProps<MyRow>) {
  return (
    <input
      autoFocus
      value={row[column.key]}
      onChange={(event) => onRowChange({ ...row, [column.key]: event.target.value })}
      onBlur={() => onClose(true)}
    />
  );
}

The onCellKeyDown handler receives CellKeyDownArgs, which changes shape depending on whether the cell is in ACTIVE or EDIT mode.

• ACTIVE mode: Used for navigation. Provides setActivePosition to move focus.
• EDIT mode: Used for data entry. Provides navigate and onClose (to commit or cancel changes).

import type { CellKeyboardEvent, CellKeyDownArgs } from 'react-data-grid';

function onCellKeyDown(args: CellKeyDownArgs<Row>, event: CellKeyboardEvent) {
  if (args.mode === 'EDIT' && event.key === 'Escape') {
    args.onClose(false); // Close without committing
    event.preventGridDefault();
  }
}

The CellMouseEvent object provides methods to prevent the grid's default behavior (like cell selection or focus) when handling specific clicks, such as on an 'actions' column.

import type { CellMouseArgs, CellMouseEvent } from 'react-data-grid';

function onCellClick(args: CellMouseArgs<Row>, event: CellMouseEvent) {
  if (args.column.key === 'actions') {
    event.preventGridDefault(); // Prevent cell focus
  }
}

SelectColumn is a pre-configured column that includes checkbox renderers for the header, regular rows, and grouped rows. To use it, include it in your columns array and manage the selectedRows state in your component.

Note: You can identify or filter this column using the SELECT_COLUMN_KEY constant ('rdg-select-column').

import { DataGrid, SelectColumn, type Column } from 'react-data-grid';

const columns: readonly Column<Row>[] = [SelectColumn, ...otherColumns];

function rowKeyGetter(row: Row) {
  return row.id;
}

function MyGrid() {
  return (
    <DataGrid
      columns={columns}
      rows={rows}
      rowKeyGetter={rowKeyGetter}
      selectedRows={selectedRows}
      onSelectedRowsChange={setSelectedRows}
    />
  );
}

Use ColumnGroup to create a group of columns that share a common header. This is useful for organizing related data under a single heading.

Structure:

• name: string | ReactElement: The group header name.
• headerCellClass?: Maybe<string>: CSS class for the group header.
• children: readonly ColumnOrColumnGroup<R, SR>[]: The columns or nested groups within this group.

import type { ColumnOrColumnGroup } from 'react-data-grid';

const columns: readonly ColumnOrColumnGroup<Row>[] = [
  {
    name: 'Personal Info',
    children: [
      { key: 'firstName', name: 'First Name' },
      { key: 'lastName', name: 'Last Name' }
    ]
  }
];

In TreeDataGrid, the rowHeight prop can be a function that receives RowHeightArgs<R>. This allows you to return different heights for regular rows versus group rows by checking the type property.

RowHeightArgs<R>.type can be 'GROUP' or 'ROW'.

function getRowHeight(args: RowHeightArgs<Row>): number {
  if (args.type === 'GROUP') {
    return 50; // Custom height for group rows
  }
  return 35; // Height for regular rows
}

<TreeDataGrid rowHeight={getRowHeight} ... />

renderToggleGroup is the default cell renderer used for columns configured for grouping (via the groupBy prop). It renders the expand/collapse toggle for tree data or grouped rows.

import { renderToggleGroup, type Column } from 'react-data-grid';

const columns: readonly Column<Row>[] = [
  {
    key: 'group',
    name: 'Group',
    renderGroupCell: renderToggleGroup
  }
];

Use DataGridDefaultRenderersContext to provide a set of default renderers to all DataGrid components within a specific part of your application tree. This is useful for implementing global themes or custom behaviors for checkboxes, sort icons, and sort status.

Example implementation:

import {
  DataGridDefaultRenderersContext,
  renderCheckbox,
  renderSortIcon,
  renderSortPriority,
  type Renderers
} from 'react-data-grid';

// custom implementations of renderers
const defaultGridRenderers: Renderers<unknown, unknown> = {
  renderCheckbox,
  renderSortStatus(props) {
    return (
      <>
        {renderSortIcon(props)}
        {renderSortPriority(props)}
      </>
    );
  }
};

function AppProvider({ children }) {
  return (
    <DataGridDefaultRenderersContext value={defaultGridRenderers}>
      {children}
    </DataGridDefaultRenderersContext>
  );
}