DataGridComponent

DataGridComponent takes a set of columns and a data source and renders a grid. Resizing, reordering, and selection are all opt-in — enable them per grid with resizableColumns, reorderableColumns, and selectable, or per column via each column's own resizable and reorderable fields.

Resizable, reorderable columns#

import { useState } from "react";
import { defineColumnsFromRows } from "@gridkitjs/core";
import {
  DataGridComponent,
  type ColumnDefinition,
  type ResizeMode,
} from "@gridkitjs/react";

const columns: readonly ColumnDefinition<Row>[] = [
  ...defineColumnsFromRows(rows),
  {
    field: "Cost",
    id: "Cost.currency",
    type: "currency",
    headerTemplate: <span className="italic">Cost</span>,
    cellTemplate: ({ value, row }) => (
      <span className={row.Cost > 500 ? "font-semibold text-red-600" : ""}>
        {currency.format(Number(value))}
      </span>
    ),
  },
];

const [resizeMode, setResizeMode] = useState<ResizeMode>("fit");

<DataGridComponent
  columns={columns}
  dataSource={rows}
  borders="all"
  resizableColumns
  reorderableColumns
  resizeMode={resizeMode}
/>;

Props#

Scrollable layout#

Set height to bound the row area to a fixed size, independently scrollable, while the group-by bar, header, footer, and pager stay outside it and always visible:

<DataGridComponent columns={columns} dataSource={rows} height={400} />

Under the hood, the header, the rows, and (when aggregates is active) the grand-total footer each render as their own <table> — .gridkit-data-grid-header, .gridkit-data-grid-body (the one height applies to), and .gridkit-data-grid-footer — rather than sharing one. That's what keeps the header and footer out of the region that scrolls: they're never inside it to begin with, so there's nothing to pin in place with position: sticky. A consumer who wants a divider or shadow at the seam adds their own CSS targeting one of those classes directly, for example:

.gridkit-data-grid-header {
  box-shadow: 0 1px 0 var(--gridkit-line);
}

Keyboard & pointer interactions#

• Drag a header's trailing edge to resize; double-click it to size the column to its content.
• With the trailing edge focused, Alt+ArrowLeft / Alt+ArrowRight nudge the width; Escape cancels an in-progress resize.
• Drag a header to reorder columns.
• With a header focused, Ctrl+ArrowLeft / Ctrl+ArrowRight reorders it via keyboard; Escape cancels an in-progress drag.
• Click a row, column, or cell to select it; Ctrl+click toggles, Shift+click takes a range.
• Ctrl+A selects every row; Escape clears every selection.
• Click a groupable header's group icon, or focus the header and press Alt+ArrowDown, to add or remove it from the group-by stack — or drag the header into the group-by bar, for a column that sets groupByDraggable.
• Drag a chip in the group-by bar to reorder the stack; with a chip focused, Ctrl+ArrowLeft / Ctrl+ArrowRight moves it via keyboard.
• Click a group header, or focus it and press Space/Enter, to expand or collapse it.

See also#

• Column definition for the full ColumnDefinition<Row> field reference.
• Column resizing, reordering, sorting, and filtering, each in depth.
• Row, column, and cell selection, each on its own page.
• Row grouping for groupableColumns/groupBy, in depth.
• Pagination for paginated/pagination, and how it composes with grouping.
• Aggregate functions for aggregates and footerTemplate, in depth.
• Accessibility for the keyboard model, ARIA attributes, and live announcements.
• Events for every callback prop, firing live.
• Imperative handle for the ref, in depth.