DWG · 04.03 · COMPONENT SPEC

Table

A ruled data grid styled like a drawing schedule or bill of materials. Define columns with cell renderers; rows are your own typed data. Optionally number rows and frame it with a title block.

SHEET · 04.03

Drawing schedule

04.03·A

PREVIEWPX · 1:1

Drawing registerDWG · 04.03

No	Sheet	Scale	Revs	Status
01	A-101 · Ground Floor Plan	1:50	3	ISSUED
02	A-102 · First Floor Plan	1:50	1	DRAFT
03	A-201 · Section A–A	1:50	2	ISSUED
04	A-301 · Sill Detail	1:5	0	VOID

<Table
  caption="Drawing register"
  drawingNo="04.03"
  numbered
  columns={[
    { header: "Sheet",  cell: (s) => s.name },
    { header: "Scale",  cell: (s) => s.scale, width: "6rem" },
    { header: "Revs",   cell: (s) => s.revs, align: "right" },
    { header: "Status", align: "right",
      cell: (s) => <Badge tone={tone[s.status]}>{s.status.toUpperCase()}</Badge> },
  ]}
  rows={sheets}
/>

Plain (no title block)

04.03·B

PREVIEWPX · 1:1

Sheet	Scale	Revs	Status
A-101 · Ground Floor Plan	1:50	3	ISSUED
A-102 · First Floor Plan	1:50	1	DRAFT
A-201 · Section A–A	1:50	2	ISSUED
A-301 · Sill Detail	1:5	0	VOID

<Table columns={columns} rows={sheets} />

Row actions

04.03·D

Put a DropdownMenu in the last column for a per-row kebab (⋮) menu. Keep the menu (and its handlers) in a small client component so the table itself can stay server-rendered.

PREVIEWPX · 1:1

Drawing register

Sheet	Scale	Revs	Status
A-101 · Ground Floor Plan	1:50	3	ISSUED
A-102 · First Floor Plan	1:50	1	DRAFT
A-201 · Section A–A	1:50	2	ISSUED
A-301 · Sill Detail	1:5	0	VOID

// RowActions.tsx — "use client"
export function RowActions({ name }) {
  return (
    <DropdownMenu
      align="end"
      trigger={<button aria-label={`Actions for ${name}`}>⋮</button>}
      items={[
        { label: "Duplicate", shortcut: "⌘D", onSelect: () => {} },
        { label: "Rename", onSelect: () => {} },
        "separator",
        { label: "Delete sheet", danger: true, onSelect: () => {} },
      ]}
    />
  );
}

// column
{ header: "", align: "right", width: "3rem",
  cell: (s) => <RowActions name={s.name} /> }

Empty state

04.03·C

PREVIEWPX · 1:1

Drawing register

Sheet	Scale	Revs	Status
NO DATA · AWAITING SURVEY

<Table
  caption="Drawing register"
  columns={columns}
  rows={[]}
  empty="NO DATA · AWAITING SURVEY"
/>