DataGrid

@spartanfx/react v1.0.4

---

@spartanfx/react / 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.

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

IDataGridProps defining grid data, schema, and behaviors.