CRUD flow

Create, read, update, and delete on one live table — the concrete companion to the Patterns guide.

The four data-app verbs on one surface, all live. This is the Records Table with nothing hidden — try each step below on the real component and watch the record count and cells change. It's the hands-on companion to the CRUD & Detail Patterns guide.


Google	google.com	182,000	Mountain View, CA	Sundar Pichai	twitter.com/google	29,800,000	linkedin.com/company/google	307,000,000,000
Stripe	stripe.com	8,000	San Francisco, CA	Patrick Collison	twitter.com/stripe	1,200,000	linkedin.com/company/stripe	16,000,000,000
Figma	figma.com	1,300	San Francisco, CA	Dylan Field	twitter.com/figma	540,000	linkedin.com/company/figma	600,000,000
Notion	notion.so	800	San Francisco, CA	Ivan Zhao	twitter.com/notionhq	480,000	linkedin.com/company/notionhq	400,000,000
Linear	linear.app	60	Remote	Karri Saarinen	twitter.com/linear	120,000	linkedin.com/company/linear	30,000,000
Vercel	vercel.com	500	San Francisco, CA	Guillermo Rauch	twitter.com/vercel	310,000	linkedin.com/company/vercel	100,000,000
OpenAI	openai.com	3,500	San Francisco, CA	Sam Altman	twitter.com/openai	4,200,000	linkedin.com/company/openai	3,400,000,000
Anthropic	anthropic.com	1,000	San Francisco, CA	Dario Amodei	twitter.com/anthropicai	520,000	linkedin.com/company/anthropic	1,000,000,000

Walk each verb

Create. Click + New (top-right) to open the create Dialog — fill a field or two and hit Create record (or ⌘↵); the row appears and the count bumps. For a quicker add, the + New record row at the bottom appends an editable "Untitled" row inline. → Two weights of create: a considered modal, and a one-click inline row.

Read. The table is already reading: click a column header → Sort ascending / descending, or open Filter to pick an attribute and set a condition (contains / is / is empty). The footer aggregates each column (Sum / Count). → Sort, filter, and aggregate are the reading tools; the list is home base.

Update. Double-click any text / number / url / date cell to edit it in place; Enter commits, Escape cancels. Open a column header's menu to rename it or move it left / right. → Editing happens in the grid — no separate form, applied optimistically.

Delete. Tick one or more row checkboxes to raise the bulk action bar (N Selected); open More → Delete (styled red) to remove them, or Add to list for the safe bulk action. → Destructive actions live one menu-layer down behind an explicit selection.

Wiring it to a backend

Every mutation above updates local state — the table is controlled, so productionising it is swapping the setters for API calls:

<RecordsTable
  rows={rows}
  columns={columns}
  onSelectionChange={setSelected}
  // create → POST, inline edit → PATCH, delete → DELETE,
  // each applied optimistically to `rows` then reconciled on response
/>

Because state flows top-down and updates are optimistic, the UI stays instant and the network layer stays a thin edge around it.

Walk each verb

Wiring it to a backend

On this page