DataGrid

@spartanfx/react v1.2.2

---

@spartanfx/react / index / DataGrid

Variable: DataGrid

const DataGrid: React.FC<IDataGridProps>;

Renders a feature-rich, Excel-like grid component with support for:

• Editable cells
• Keyboard navigation
• Multi-cell selection
• Clipboard copy/paste
• Row-level locking and deletion
• Column sorting

Remarks

The grid integrates reactive editing, dynamic validation, and optional row locking. When editable is enabled, a trailing blank row is automatically added for data entry. Sorting is temporarily disabled while editing a cell to avoid data conflicts.

The component internally leverages several hooks for modular functionality:

• useGridData handles updates, validation, and persistence.
• useSelection and useKeyboardNav manage cell navigation.
• useClipboard enables Excel-style copy/paste.
• useRowSelection supports row checkboxes and bulk actions.
• useRowActions handles deletion and lock state.

Props

Required

Property	Type	Default	Description
getRowId	(row) => string | number	-	Function to retrieve a unique ID for each row.
onChange	(changes) => void	-	Callback triggered with changes to the grid data.
rawData	Record<string, unknown>[]	-	The raw tabular data to display.
schema	ColumnSchema[]	-	Schema defining columns, types, and behavior.

Options

Property	Type	Default	Description
defaultSort?	object	-	Optional initial sort configuration.
defaultSort.column	string	-	Field name to sort by.
defaultSort.direction	"desc" | "asc"	-	Sort direction.
editable?	boolean	-	Enables or disables cell editing.
enableNewRow?	boolean	true	Enables or disables the trailing blank row for new data entry.
enableRowDeletion?	boolean	-	Enables row deletion via UI or keyboard.
enableRowSelection?	boolean	true	Enables or disables row selection checkboxes.
layout?	DataGridLayout	DataGridLayout.fluid	Column layout mode.
lockedCells?	Map<string, boolean>	-	Map of locked cell keys (formatted as "rowIdx-colIdx").
lockedRows?	Set<number>	-	Set of row indices that are locked (cannot be edited or deleted).
sortable?	boolean	-	Enables column sorting via header clicks.
stickyColumnsCount?	number	-	Number of columns to freeze on the left.

Events & callbacks

Property	Type	Default	Description
onSortChange?	(column, direction) => void	-	Callback triggered when the user changes sort order.

Appearance & theming

Property	Type	Default	Description
appearance?	AppearanceMode	AppearanceMode.light	Visual appearance mode.

Full type reference: IDataGridProps

Examples

// Minimal usage

<DataGrid
  rawData={data}
  schema={schema}
  onChange={(updated) => console.log(updated)}
  getRowId={(row) => row.id}
/>

// Advanced usage with sorting, locks, and custom IDs

<DataGrid
  rawData={data}
  schema={schema}
  editable
  sortable
  defaultSort={{ column: 'Name', direction: 'asc' }}
  getRowId={(row) => row.id}
  lockedRows={new Set([0])}
  lockedCells={new Map([[1, new Set(['Status'])]])}
  enableRowDeletion
  onChange={handleGridChange}
  onSortChange={(col, dir) => console.log(col, dir)}
/>

Param

props

IDataGridProps defining grid data, schema, and behaviors.