DataGridComponent

The grid component: columns, data, borders, resizing, and reordering.

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

Resizable, reorderable columns

DataGridComponent

Live example

fit — columns fill the gridfixed — columns keep their own width

Id	Service	Environment Name	Environment Region	Status	Cost	Cost
1	checkout-api	production	us-east-1	healthy	1240.5	$1,240.50
2	billing-worker	production	eu-west-1	degraded	860.2	$860.20
3	search-index	staging	us-east-1	healthy	92.75	$92.75
4	notifications	production	us-west-2	down	305.4	$305.40
5	analytics-pipeline	staging	eu-west-1	healthy	145	$145.00

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

Prop	Type	Default	Description
`columns`	`readonly ColumnDefinition<Row>[]`	`—`	Columns to render. Falls back to defineColumnsFromRows(dataSource) when omitted.
`dataSource`	`readonly Row[]`	`—`	The rows to render.
`borders`	`"horizontal" \| "vertical" \| "all" \| "none"`	`—`	Which cell borders to draw.
`hoverable`	`{ rows?, columns?, cells? }`	`—`	Which hover highlighting to enable.
`resizableColumns`	`boolean`	`false`	Whether columns can be dragged wider, unless a column says otherwise.
`reorderableColumns`	`boolean`	`false`	Whether columns can be dragged into a new position.
`resizeMode`	`"fit" \| "fixed"`	`"fit"`	Whether columns fill the grid's width or sit at their own.
`defaultColumnSizing`	`ColumnSizingState`	`—`	Column widths to start from, keyed by column id. Uncontrolled.
`defaultColumnOrder`	`readonly string[]`	`—`	Column ids in the order to start in. Uncontrolled.
`columnSizeDefaults`	`Partial<ColumnSizeDefaults>`	`—`	Sizes applied to columns that do not set their own.
`onColumnResize`	`(event: ColumnResizeEvent) => void`	`—`	Called as the user resizes a column: continuously with phase "move", once with "end".
`onColumnOrderChange`	`(event: ColumnOrderEvent) => void`	`—`	Called once when the user drops a column somewhere new.

Keyboard & pointer interactions

Drag a header's trailing edge to resize; double-click it to size the column to its content.
With the resize handle focused, arrow keys 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.