Content table editor

Code

<ContentTableEditor  defaultValue={{    columns: [      { id: "name", label: "Name", type: "text", required: true },      { id: "price", label: "Price", type: "number" },    ],    rows: [{ id: "r1", cells: { name: "Coffee", price: 12 } }],  }}  onSave={async (value) => {    await api.save(value);  }}/>

Editors · beta

Live examples and controls: Content table editor in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/content-table-editor.json

A spreadsheet-like grid for content people maintain by hand: a price list, a glossary, a schedule. Columns have types (text, number, select, date, checkbox, link, tags), cells edit in place, and the whole thing works from the keyboard.

When to useCopy Anchor Link

• A table people fill in and correct: many short rows with the same fields.
• You need sorting, search, totals and CSV without building a form per row.

When not to useCopy Anchor Link

• Read-only tables of records: use DataTable.
• Long rich text per row: use RichTextEditor in a form.
• A few repeated form groups: use Repeater.

ImportCopy Anchor Link

import { ContentTableEditor } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

<ContentTableEditor
  defaultValue={{
    columns: [
      { id: "name", label: "Name", type: "text", required: true },
      { id: "price", label: "Price", type: "number" },
    ],
    rows: [{ id: "r1", cells: { name: "Coffee", price: 12 } }],
  }}
  onSave={async (value) => {
    await api.save(value);
  }}
/>

APICopy Anchor Link

BehaviourCopy Anchor Link

• Arrow keys move between cells, Enter or F2 or typing starts editing, Enter or Tab commits, Escape cancels, Delete clears a cell.
• Ctrl or Cmd plus Z and Y undo and redo (50 steps). Deleting rows is undone the same way, so there are no confirm dialogs.
• Header menus sort (empty cells always last), edit, move and delete columns. Row menus insert, duplicate, move and delete.
• Required and link columns show an error on the cell and a count in the toolbar.
• Numbers accept Arabic digits and separators.

Shared editorsCopy Anchor Link

The text and option-list cell editors live in data-table/cell-editors.tsx and are shared with DataTable's in-cell edit. This component's props and behaviour are unchanged.

AccessibilityCopy Anchor Link

The grid has role="grid" with a roving tab stop, aria-sort on sorted headers, and a polite live region for changes. Errors are text plus an icon, not colour alone.

RTLCopy Anchor Link

Arrow keys mirror, sticky columns and menus use logical sides, and numbers, dates and links stay left to right inside their cells.