Table Editable · paneui

Launch checklist · double-click or type to edit6 tasks · 20.5 h

Freeze the pricing page copy

Mina

Oct 15

Record the onboarding walkthrough

Kenji

Oct 16

Load-test checkout at 2× traffic

Priya

Oct 17

Draft the launch email

Leo

Oct 18

Swap in the new App Store screenshots

Unassigned

Oct 20

1.5

Go / no-go review

Mina

Oct 21

Installation

pnpm dlx shadcn@latest add @paneui/table-editable

Usage

import { EditableTable } from "@/components/ui/table-editable"

<EditableTable
  aria-label="Tasks"
  defaultColumns={[{ key: "task", header: "Task", grow: true }]}
  defaultRows={[{ id: "t1", task: "Draft the launch email" }]}
/>

Examples

Read Only

Use when people should browse the data but not change it.

Cell Edit Callback

Use when you save each edit as it commits instead of holding every row in state.

Custom New Rows

Use when new rows or columns need ids or defaults from your own data.

Keyboard

Arrow keys walk the grid. Enter, F2 or just typing edits a cell; Enter / Tab commit and move, Esc cancels, Backspace / Delete clears. On a header, Enter renames and Alt + ← / → moves the column.

Built on Table. See also Table Async.

API Reference

EditableTable

Editable grid on the virtualized Table core. It also passes aria-label, height, headerHeight, overscan, selectable and the selection props, resizable, minColumnWidth, onColumnResize, animateLayout, emptyState and className through to Table. Also accepts every prop of Table.

rows: readonly EditableRow[]; Controlled rows.
defaultRows= []: readonly EditableRow[]; Initial rows when uncontrolled.
onRowsChange: (rows: EditableRow[]) => void; Called after any edit, insert or delete.
columns: readonly EditableColumn[]; Controlled columns.
defaultColumns= []: readonly EditableColumn[]; Initial columns when uncontrolled.
onColumnsChange: (columns: EditableColumn[]) => void; Called after a column is added, renamed, moved or deleted.
onCellEdit: (rowId: string, columnKey: string, value: EditableValue) => void; Called when a cell edit commits.
createRow: (columns: readonly EditableColumn[]) => EditableRow; Build the row the + pills, menus and new-row band insert; defaults to an id and empty cells.
createColumn: (columns: readonly EditableColumn[]) => EditableColumn; Build a new column; defaults to “Column N”.
showAddRow= true: boolean; Show the “New row” band under the last row.
readOnly= false: boolean; Turn off editing, the row and column menus, the insert pills and the new-row band. Keyboard navigation stays.
reorderable= true: boolean; Drag headers to reorder (off when readOnly).
rowHeight= 40: number; Row height in px.
ref: Ref<TableHandle>; Same handle as Table.

Prop	Type	Default	Description
rows	readonly EditableRow[]	—	Controlled rows.
defaultRows	readonly EditableRow[]	[]	Initial rows when uncontrolled.
onRowsChange	(rows: EditableRow[]) => void	—	Called after any edit, insert or delete.
columns	readonly EditableColumn[]	—	Controlled columns.
defaultColumns	readonly EditableColumn[]	[]	Initial columns when uncontrolled.
onColumnsChange	(columns: EditableColumn[]) => void	—	Called after a column is added, renamed, moved or deleted.
onCellEdit	(rowId: string, columnKey: string, value: EditableValue) => void	—	Called when a cell edit commits.
createRow	(columns: readonly EditableColumn[]) => EditableRow	—	Build the row the + pills, menus and new-row band insert; defaults to an id and empty cells.
createColumn	(columns: readonly EditableColumn[]) => EditableColumn	—	Build a new column; defaults to “Column N”.
showAddRow	boolean	true	Show the “New row” band under the last row.
readOnly	boolean	false	Turn off editing, the row and column menus, the insert pills and the new-row band. Keyboard navigation stays.
reorderable	boolean	true	Drag headers to reorder (off when `readOnly`).
rowHeight	number	40	Row height in px.
ref	Ref<TableHandle>	—	Same handle as Table.

EditableColumn

Type of each entry in columns.

key*: string; Property read from each row.
header*: string; Header label (renamable).
width: number; Width in px.
minWidth: number; Resize floor.
grow: boolean; Soak up leftover width.
align: "left" | "center" | "right"; Cell alignment.
type= "text": "text" | "number"; number right-aligns and stores numbers.
placeholder: string; Shown in empty cells.

Prop	Type	Default	Description
key*	string	—	Property read from each row.
header*	string	—	Header label (renamable).
width	number	—	Width in px.
minWidth	number	—	Resize floor.
grow	boolean	—	Soak up leftover width.
align	"left" \| "center" \| "right"	—	Cell alignment.
type	"text" \| "number"	"text"	`number` right-aligns and stores numbers.
placeholder	string	—	Shown in empty cells.

EditableRow

{ id: string; [key: string]: string | number | null | undefined }.