Editable table

Overview

The editable table is the canonical surface for bulk content edits — when the user needs to scan a column of values and change several at once without losing place. Every cell is a focused input; tabbing across a row feels like filling out a spreadsheet. Five column types: text, number, currency, select, read-only.

Try it

Click into any cell, type, Tab to move across. The VAT column is a select — open it to see the options. Hit the trash icon at the end of any row to remove it; click “Add new row” below to append.

Mobile

On phones, a 7-column grid becomes useless — labels truncate, taps land on the wrong cell, and horizontal scroll loses the user's place. Below md the component collapses each row into a stacked card with labelled fields, so the merchant edits one row at a time without leaving the page. The desktop table re-appears at md and up — same data, two surfaces, one source of truth.

Read-only cells

Mark identifying columns as type="readonly" when they shouldn't be editable inline — SKUs, IDs, anything system-generated. They render as plain text but stay aligned with the editable cells around them.

Empty state

Pass an emptyState string or node to teach the user how to start — what kind of data goes here, what the first row looks like. Pair it with a newRow factory so the affordance to add the first row is one click away.

Anatomy

Five named parts. The header carries the column names; every cell is its own focusable input; the trash column and add-row link are separate affordances at the end.

Behavior

• 01Tab moves across, Shift+Tab back. Native input focus order — no custom keyboard handler. When the user reaches the trash icon, Tab continues to the next row.
• 02Changes commit on input. Every keystroke fires onChange with the next array of rows. The owner debounces or batches as needed — the component is fully controlled.
• 03Add row appends and stays. Clicking “Add new row” appends a fresh row from newRow(). Focus doesn't auto-jump into it — the user's eye still on the link clicked, the new row is one Tab away. Hold the affordance steady.
• 04Delete is immediate. No confirm dialog — the row is removed instantly. Pair with undo at the page level (a transient toast with a restore action) for the safety net. Modal confirms on every delete are the worst kind of friction in bulk edit flows.
• 05Mobile is one row at a time. Below md, each row is a card; the user fills it like a small form. The card stays the same shape whether the desktop layout was 4 columns or 14.

Accessibility

• Real table semantics. Renders a native <table> with <th scope="col"> headers — screen readers announce “Sales price column, row 3” as the user navigates. The mobile card layout uses <dl> with label/value pairs for the same association.
• Cell focus is highlighted. focus-withinon the cell paints the ring inset, so the user always knows which cell they're editing — even when the input itself doesn't visually change inside the cell.
• Delete buttons announce row identity.Each trash icon's aria-label is “Delete row N” by default — override via deleteRowAriaLabel with something more specific (“Delete ‘Greek salad’”).
• Required columns must be enforced upstream.The component doesn't validate — it's a controlled grid. Required-field validation lives in the parent: render error messages outside the table, or block save until the data is complete.

Code

import { EditableTable, type EditableColumn } from "@flatpay-dk/ui";

interface MenuRow {
  id: string;
  category: string;
  productName: string;
  salesPrice: string;
  vat: string;
  costPrice: string;
}

const COLUMNS: ReadonlyArray<EditableColumn<MenuRow>> = [
  { id: "category", header: "Category", type: "text", width: "16%" },
  { id: "productName", header: "Product name", type: "text", width: "22%" },
  { id: "salesPrice", header: "Sales price", type: "currency", width: "14%" },
  {
    id: "vat",
    header: "VAT",
    type: "select",
    options: [
      { value: "0", label: "0%" },
      { value: "9", label: "9%" },
      { value: "21", label: "21%" },
    ],
    width: "12%",
  },
  { id: "costPrice", header: "Cost price", type: "currency", width: "14%" },
];

let rowSeed = 0;
function makeRow(): MenuRow {
  rowSeed += 1;
  return {
    id: `r${rowSeed}`,
    category: "",
    productName: "",
    salesPrice: "",
    vat: "",
    costPrice: "",
  };
}

export function MenuEditor() {
  const [rows, setRows] = useState<MenuRow[]>([]);
  return (
    <EditableTable
      ariaLabel="Menu items"
      columns={COLUMNS}
      rows={rows}
      onChange={setRows}
      newRow={makeRow}
      emptyState="No items yet. Add a row below to start the menu."
    />
  );
}

Best practices

Props

Related