# @skmtc/gen-shadcn-table



An operation generator. Companion to `gen-shadcn-select` — same
filter (GET + list response), different output (table rather than
select dropdown). Use for inventory-style screens that display
many items.

## Source [#source]

`skmtc-generators/gen-shadcn-table/src/`

## What it generates [#what-it-generates]

Per supported operation, a table component:

```tsx
export const UsersTable = () => {
  const { data } = useGetUsers()
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>ID</TableHead>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {data.map(user => (
          <TableRow key={user.id}>
            <TableCell>{user.id}</TableCell>
            <TableCell>{user.name}</TableCell>
            <TableCell>{user.email}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}
```

## Key decisions [#key-decisions]

* **Same `isSupported` as `gen-shadcn-select`.** Both generators
  share the GET + list-response filter, importing `isListResponse`
  from `@skmtc/gen-tanstack-query-supabase-zod`. This is the
  deliberate shape sharing — two UI outputs sourced from the same
  operation shape.
* **Columns derived from the item schema.** Each property of the
  list-item schema becomes a column. No filtering of which
  properties show up — the stock dumps everything, which is rarely
  what users want for production tables.
* **`toPreviewModule` hook.** Enables IDE preview integration the
  same way `gen-shadcn-form` does.

## What to learn from it [#what-to-learn-from-it]

* **Sibling generators sharing `isSupported` logic.** Two
  generators (select, table) gate on identical operation shapes
  but produce different outputs. The pattern works because filtering
  and rendering are decoupled — the entry filters, the Projection
  shapes the output.
* **Schema-shape to columns.** Iterating an `OasObject`'s
  properties to produce table columns is the table-version of
  `gen-shadcn-form`'s `schemaToField` dispatch. Same idea, simpler
  product.

## Common customizations when cloned [#common-customizations-when-cloned]

* **Filter visible columns.** Add enrichments for
  `columns: { include?: string[], exclude?: string[] }` to let
  users hide noisy fields.
* **Custom cell renderers per column.** Date columns format with
  `Intl.DateTimeFormat`, image-URL columns render `<img>`, etc.
* **Add pagination, sorting, filtering.** The stock is a static
  table. Tanstack Table is the canonical library to layer on top
  if you need those features.
* **Swap UI library.** shadcn/ui Table → DaisyUI Table → custom.

## See also [#see-also]

* [gen-shadcn-select](/docs/reference/stock-generators/gen-shadcn-select) — same filter, sibling
  output
* [gen-tanstack-query-supabase-zod](/docs/reference/stock-generators/gen-tanstack-query-supabase-zod) —
  exports `isListResponse`
* [gen-shadcn-form](/docs/reference/stock-generators/gen-shadcn-form) — complementary UI generator
* [Projections and Snippets concept](/docs/concepts/projections-and-snippets)