Editable grid

This is an example, not an installable item. It shows what @gesso/table and @gesso/cell-fields add up to when every cell edits and the rows are tight, which is the case a normal table is not built for.

Click any cell. Status and priority are the same select type with different display hints, the checkbox commits in place without opening an editor, and New appends a row.

Why this is a demo and not an item

The kit ships the two pieces, not the assembly. Table gives you a readable table at 48px heads and 16px cells. cell-fields gives you a cell that renders and edits itself from a column descriptor. A grid is what you get by combining them with your own layout, and the layout is the part that is genuinely yours: how wide the columns are, whether rows are 36px or 52px, and whether there is a gutter at all.

Everything specific to this grid is about 120 lines of layout in components/demos/editable-grid-preview.tsx, and none of it knows anything about field types.

The density trade

The field layer's editors are full-bleed and borderless, with no radius of their own. That is what lets a 36px row hold a real text input, and it is why the layer uses raw inputs rather than the kit's Input. The cell owns the chrome: useFieldCell paints the read focus ring and the edit ring off data-slot="field-cell", so this grid only adds density.

<td className="h-9 border-r border-border align-middle">
  {children}
</td>

No padding reset, and no width juggling. The editor overlays the cell's content box, so the grid holds its layout whichever cell is open.

Fixed columns

The columns here are a plain array of FieldDefs and the widths are a lookup beside them. Nothing adds or retypes a column at runtime, which matches how server-backed admin tables actually work. If you need a schema users can edit, that is an application concern and it belongs above this layer, not inside it.

Built from

shadcn add @gesso/cell-fields