Data Grid
A spreadsheet-grade grid that stays smooth at 100,000 rows: virtualised body under a sticky header and a frozen first column.
$149 once · every Pro piece
Drag or Shift+arrow a range and it fills with a soft accent wash while the active cell's inset ring glides between cells; the status bar sums what you select. Drag column edges to resize (double-click to fit), click headers to sort, type, Enter or F2 to edit in place with validation, Esc to cancel, Cmd+C copies the range as TSV, paste fills it, Cmd+Z undoes. Loading skeleton rows, empty and recoverable error states.
Install
npx shadcn@latest add @obsyde/data-gridNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { DataGrid } from '@/components/obsyde/ember/data-grid/DataGrid';
export function Example() {
return (
<DataGrid />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/data-grid/DataGrid.tsxcomponentember/data-grid/data-grid.cssstylesember/data-grid/data.tsmoduleember/data-grid/DataGridDemo.tsxdemoember/shared/ember.csssharedember/display-kit/motion.tssharedember/shared/spring.tssharedember/shared/accent.tssharedember/shared/chart-kit.tsshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
rowsRows | number | 10000 |
stateState | 'ready' | 'loading' | 'empty' | 'error' | 'ready' |
densityDensity | 'compact' | 'comfortable' | 'compact' |
frozenFreeze first column | boolean | true |
editableEditable | boolean | true |
seedSeed | number | 11 |