Schema Table

Columns, keys and indexes. Foreign keys name their target inline, because `owner_id` tells you nothing about whether it points at users or accounts — which is exactly what you opened the schema to find out.

src/components/ui/schema-table.tsx

About

From the component's own source, where it was written.

A table's columns, keys and indexes.

Nullability is stated as "not null" rather than left implied. A blank in a nullable column reads as missing information; the constraint is the fact, and it is the thing that decides whether your code needs a null check.

Foreign keys name their target inline. A column called owner_id tells you nothing about whether it points at users or accounts, and that is precisely what someone reading a schema is trying to find out.

Indexes are listed separately from columns, with their columns in order. Index column order is not cosmetic — an index on (a, b) cannot serve a query filtering only on b, and a set-like display hides that completely.

Install

npx astralyx-ui add schema-table

Usage

import { SchemaTable } from '@/components/ui/schema-table'

<SchemaTable name="users" columns={columns} indexes={indexes} />

Composer

Change the props and the source below follows.

public.users128,400 rows

Columns

iduuidnot nulldefault gen_random_uuid()
emailcitextnot nullCase-insensitive by column type, not by index.
account_iduuidnot null→ accounts.id
owner_iduuid→ users.id
roletextnot nulldefault 'member'
created_attimestamptznot nulldefault now()
deleted_attimestamptz

Indexes

users_pkey(id)uniquebtree
users_email_key(email)uniquebtree
users_account_created_idx(account_id, created_at)btree

Props

table

indexes

row count

tsx

<SchemaTable name="public.users" columns={columns} indexes={indexes} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`SchemaTable`

A table's columns, keys and indexes.

Extends Omit<ComponentProps<'div'>, 'children'>.

Prop	Type	Default	Description
name	ReactNode	required	—
columns	SchemaColumn[]	required	`{ name, type, nullable?, primaryKey?, references?, default?, comment? }`.
indexes	SchemaIndex[]	[]	Columns in order. An index on `(a, b)` cannot serve a query filtering only on `b`, and a set-like display hides that.
rowCount	number	—	—
columnsLabel	ReactNode	'Columns'	—
indexesLabel	ReactNode	'Indexes'	—
notNullLabel	ReactNode	'not null'	—
primaryKeyLabel	string	'primary key'	Accessible name for the key icon.
uniqueLabel	ReactNode	'unique'	—
referencesLabel	string	'references'	Accessible name for the foreign-key icon.
defaultLabel	ReactNode	'default'	—
rowsLabel	ReactNode	'rows'	—

Types

`SchemaColumn`

Field	Type	Description
name	string	—
type	string	—
nullable?	boolean	"not null" is printed. A blank in a nullable column reads as missing information, when the constraint is the fact.
primaryKey?	boolean	—
references?	string	e.g. `users.id`. Rendered inline against the column.
default?	string	—
comment?	ReactNode	—

`SchemaIndex`

Field	Type	Description
name	string	—
columns	string[]	In order — order determines which queries it can serve.
unique?	boolean	—
method?	string	—