React

The grid is also available as React component (React 18 or newer). It uses the same core, options, column definitions and styles as the Vue component, so all guides apply. Only the component API differs.

Framework switch

Select React in the navigation bar: all live examples of this documentation then run with the React component and show the React source code.

pnpm add @datagrid/react-ui

import { useMemo, useState } from "react";
import { Datagrid, type ColumnConfig } from "@datagrid/react-ui";
import "@datagrid/react-ui/style.css";

type Person = { id: number; name: string; age: number };

export function Persons({ persons }: { persons: Person[] }) {
  const [selected, setSelected] = useState<Array<number | string>>([]);

  // define columns and options outside of the render function or memoize them
  const columns = useMemo<ColumnConfig<Person>[]>(
    () => [
      { field: "name", text: "Name", sortable: true, filterable: true },
      { field: "age", text: "Age", type: "number", sortable: true },
    ],
    []
  );

  return (
    <div style={{ height: 400, display: "flex" }}>
      <Datagrid
        columns={columns}
        rows={persons}
        options={{ rowId: (p) => p.id, checkboxSelection: true }}
        selectedItems={selected}
        onSelectedItemsChange={setSelected}
      />
    </div>
  );
}

Differences to the Vue component

Vue	React
v-model:rows	rows + onRowsChange
v-model:selectedItems	selectedItems + onSelectedItemsChange
v-model:selectedCells	selectedCells + onSelectedCellsChange
v-model:expandedItems	expandedItems + onExpandedItemsChange
v-model:sortedColumns	sortedColumns + onSortedColumnsChange
v-model:columnFilter	columnFilter + onColumnFilterChange
v-model:globalFilter	globalFilter + onGlobalFilterChange
v-model:columnGroups	columnGroups + onColumnGroupsChange
v-model:pageIndex	pageIndex + onPageIndexChange
@ready, @cell-click, …	onReady, onCellClick, onCellDoubleClick, onCellContextMenu, onHeaderContextMenu, onCellValueChanged, onSelectionChange, onPageChange, onColumnResize, onRowDrop, onStateChange
#cell-<id> slot	prop cellRenderers: { [id]: (params) => node } ("*" for all columns)
#header-<id> slot	prop headerRenderers: { [id]: (params) => node }
#filter-<id> slot	prop filterRenderers: { [id]: ({ column, value, setValue, api }) => node }
#editor-<id> slot	column option editComponent, see custom editors
#statusbar slot	renderStatusBar={({ items, info, api }) => node}
#detail slot	renderDetail={({ row, data, api }) => node}
#group slot	renderGroup={(params) => node}
#empty, #loading	renderEmpty, renderLoading
#toolbar, #footer, #overlay	toolbar, footer, overlay (node or (api) => node)
template ref	ref with DatagridHandle (api, exportCsv, getDataAsCsv, getState, setState, refresh, focus, selectAll, deselectAll, expandAll, collapseAll, autosizeColumns, undo, redo)
class	className, style

All state props are optional: without them the grid manages the state itself. A state prop is applied whenever its value changes. If the change callback does not accept a new value (the prop stays the same), the grid returns to the value of the prop.

Custom components

Components in column definitions (component, headerComponent, filterComponent, editComponent) are React components:

Option	Props
component	value, text, row, data, column, setValue, api, modelValue, onChange + componentProps
headerComponent	column, text
filterComponent	column, value, onChange
editComponent	value, onChange, column, item, submitChanges(value?), cancelEdit() (the first input inside the component is focused automatically)

const columns: ColumnConfig<Task>[] = [
  { field: "status", component: ({ value }) => <StatusBadge status={value} /> },
];

Performance

• Keep columns and options stable (useMemo or module constants). The grid compares them deeply (functions by their source code, so inline functions like rowId: (d) => d.id do not cause updates), but stable references avoid unnecessary work.
• Renderer props (cellRenderers, renderDetail, …) re-render all visible cells when their identity changes, so memoize them with useMemo / useCallback if they do not depend on changing state.
• Rows and cells are memoized and only re-render when their data, layout or state changes.