CRUD flow

The four data-app verbs on one surface, all live. This is DataTable 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.

Walk each verb

Create. The + New record row at the bottom appends an editable "Untitled" row inline; the count bumps immediately. → One mechanism, no separate form — the row you get IS the record, ready to fill in.

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:

<DataTable
  data={rows}
  columns={columns}
  selectable
  selectedIds={selected}
  onSelectionChange={setSelected}
  onEdit={(id, key, value) => /* PATCH */}
  onAddRow={() => /* POST */}
  // 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.