KQ-1756 · SCHEMA/TABLE

Schema Table

A database schema editor where each field's name, type and options sit above its sample column, so a change of type is something you watch. Picking a new type previews it: the column converts one cell at a time down the rows — the old drawing lifts and fades on a tween while the new one rises and grows from 0.94 on springs.snap, text becoming date chips, numbers gaining currency and cents, yes becoming a tick — and a cell that will not convert keeps its text, struck faint on a danger hatch with its reason; a confirm bar glides down on springs.glide, Convert commits and Cancel converts back bottom row first. Fields reorder by a grip that follows the hand 1:1 while the other columns slide aside on glide and land with the throw, or by Alt with an arrow on the field's button, which also opens a real menu of types (each showing how many cells would fail), rename, options, moves and remove.

KQ-1756 · SCHEMA/TABLE

Equipment register

6 fields · 6 sample rows

FL-0142FL-0157FL-0163+3

Pressure washerTrench pumpCable locator+3

2026-03-1414 Mar 2026last spring+3

1,240.00389.5072.00+3

In useSpareRepair+3

yesnoY+3

open a field to retype it · 6 fields

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/schema-table

Props

typeBadge: "icon" | "label" | "both"; default "both"; How a field's type shows in its header: a glyph, a word, or both; the badge rolls to the new type on snap.
density: "compact" | "regular" | "roomy"; default "regular"; Row height (30, 36 or 44px), type size and column width; columns glide to a new width.
accent: string; default "var(--accent-bright)"; The editor's colour: the previewed field, Convert, ticks, and where the select-chip hues start.
fields / defaultFields: SchemaField[]; default — / defaultSchemaFields; Fields in column order as { id, name, type, options? }, where type is text, number, currency, date, select, checkbox or email and options carry currency, decimals, dateStyle and choices. An empty list starts with one Name field.
onFieldsChange: (fields) => void; default —; Fires with every field after a rename, a confirmed type change, an option, a move, an add or a removal.
sampleRows / defaultSampleRows: SchemaRow[]; default — / defaultSchemaRows; Sample records as { id, cells: { [fieldId]: string | number | boolean | null } }; dates are ISO strings.
onSampleRowsChange: (rows) => void; default —; Fires after a conversion rewrote a column, or a field was added or removed.
onFieldChange: (field, previous) => void; default —; A field was renamed, re-typed (only after Convert) or given new options.
onAddField: (field) => void; default —; Add field created a field; its name input takes focus.
onRemoveField: (field) => void; default —; A field was removed after its menu's second press.
totalRows: number; default 1284; How many records the whole table holds, shown in the footer beside the sample count.
title: string; default "Equipment register"; The table's name; also names the table for assistive technology.
status: "ready" | "loading" | "error"; default "ready"; Whether the schema has arrived: loading draws skeleton rows, error offers Try again.
onRetry: () => void; default —; Try again was pressed after the schema failed to load.
height: number; default 540; The editor's height in px; the table scrolls inside it.
disabled: boolean; default false; Read only: fields can be browsed but not changed, moved, added or removed.
className: string; default —; Classes for the editor's outer box.

Prop	Type	Default	Description
typeBadge	"icon" \| "label" \| "both"	"both"	How a field's type shows in its header: a glyph, a word, or both; the badge rolls to the new type on snap.
density	"compact" \| "regular" \| "roomy"	"regular"	Row height (30, 36 or 44px), type size and column width; columns glide to a new width.
accent	string	"var(--accent-bright)"	The editor's colour: the previewed field, Convert, ticks, and where the select-chip hues start.
fields / defaultFields	SchemaField[]	— / defaultSchemaFields	Fields in column order as { id, name, type, options? }, where type is text, number, currency, date, select, checkbox or email and options carry currency, decimals, dateStyle and choices. An empty list starts with one Name field.
onFieldsChange	(fields) => void	—	Fires with every field after a rename, a confirmed type change, an option, a move, an add or a removal.
sampleRows / defaultSampleRows	SchemaRow[]	— / defaultSchemaRows	Sample records as { id, cells: { [fieldId]: string \| number \| boolean \| null } }; dates are ISO strings.
onSampleRowsChange	(rows) => void	—	Fires after a conversion rewrote a column, or a field was added or removed.
onFieldChange	(field, previous) => void	—	A field was renamed, re-typed (only after Convert) or given new options.
onAddField	(field) => void	—	Add field created a field; its name input takes focus.
onRemoveField	(field) => void	—	A field was removed after its menu's second press.
totalRows	number	1284	How many records the whole table holds, shown in the footer beside the sample count.
title	string	"Equipment register"	The table's name; also names the table for assistive technology.
status	"ready" \| "loading" \| "error"	"ready"	Whether the schema has arrived: loading draws skeleton rows, error offers Try again.
onRetry	() => void	—	Try again was pressed after the schema failed to load.
height	number	540	The editor's height in px; the table scrolls inside it.
disabled	boolean	false	Read only: fields can be browsed but not changed, moved, added or removed.
className	string	—	Classes for the editor's outer box.