184 Components
SQL Data Grid
CardsSupabase and Neon inspired keyboard-navigable micro data table with SQL column type badges (UUID, VARCHAR, BOOLEAN, TIMESTAMPTZ, JSONB), double-click inline cell editing, and SQL INSERT export.
public.users4 rows
idUUID | usernameVARCHAR | tierVARCHAR | is_activeBOOLEAN | creditsINT | created_atTIMESTAMPTZ |
|---|---|---|---|---|---|
| a1b2c3d4-e5f6-7890-1234-56789abcdef0 | alex_mercer | enterprise | true | 4500 | 2026-10-12T10:14:00Z |
| f9e8d7c6-b5a4-3210-9876-54321fedcba9 | sara_chen | pro | true | 1200 | 2026-10-11T18:32:00Z |
| 10293847-5647-3829-1029-384756102938 | dev_bot_9 | starter | false | 0 | 2026-10-09T08:00:00Z |
| 84739201-9283-7461-9201-837465928172 | marcus_v | pro | true | 890 | 2026-10-08T12:45:00Z |
Click any cell to edit inline • Press Enter to saveRead/Write Access
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/sql-data-grid.json"
Props
TypeScript props supported by <SqlDataGrid />.
| Prop | Type | Default | Description |
|---|---|---|---|
| tableName | string | "public.users" | Database table schema name displayed in header. |
| columns | SqlColumn[] | — | Array of column schemas with types. |
| initialRows | SqlRow[] | — | Initial dataset rows. |
Key Features
- SQL schema column header types with dedicated color badges.
- Click or double-click to edit any cell inline with Enter/Esc shortcuts.
- Instant table row search and substring filtering.
- One-click SQL INSERT statement export.
Keyboard & Accessibility
- Full semantic HTML table markup.
- Keyboard accessible cell editing with focus lock and key handlers.