DataGrid

DataGrid is an editable tabular grid. You describe columns with a schema and pass rawData; the grid renders editable cells and reports edits through onChange. It supports a trailing "new row", row deletion, selection, and sorting.

When to use

• Spreadsheet-style editing of tabular data (inline edits, add/remove rows).
• Bulk data entry where users tweak many cells before saving.

For read-heavy display (sort/filter/export, not editing) use DataTable instead.

Import

import { DataGrid } from '@spartanfx/react';

Basic usage

Provide rawData, a schema, a getRowId, and an onChange that receives the changes.

<DataGrid
  rawData={rows}
  getRowId={(row) => row.id as string}
  schema={[
    { fieldName: 'name', name: 'Name', type: 'text' },
    { fieldName: 'qty', name: 'Quantity', type: 'integer' },
  ]}
  editable
  onChange={(changes) => applyChanges(changes)}
/>

note

schema entries are ColumnSchema — see the reference for the full set of column types and options.

Toggle features

<DataGrid
  rawData={rows}
  schema={schema}
  getRowId={(r) => r.id}
  onChange={onChange}
  editable
  enableNewRow
  enableRowDeletion
  enableRowSelection
/>

Key props

Prop	Type	Default	Notes
rawData (required)	Record<string, unknown>[]	—	Rows to display/edit.
schema (required)	ColumnSchema[]	—	Column definitions and types.
getRowId (required)	(row) => string | number	—	Stable row identity.
onChange (required)	(changes) => void	—	Receives edits/adds/deletes.
editable	boolean	—	Enable cell editing.
enableNewRow	boolean	true	Trailing blank row for new entries.
enableRowDeletion / enableRowSelection	boolean	— / true	Row delete / selection checkboxes.
layout	DataGridLayout	fluid	Column layout mode.

See the full generated reference: DataGrid API ↗.

See also

• DataTable
• Components overview