Products

Products table

The product management table — desktop grid and a stacked mobile list from the same rows.

Available

Needs mock props

Dual breakpoint

Examples

Rendered live from the maintained Storybook story. Lantern stores only the story id and embeds Storybook rather than duplicating the component or its demo.

Products table

Rendered live from Storybook

Open

Storybook must be running for this to load — bun run start:storybook from the monorepo root, or set NEXT_PUBLIC_STORYBOOK_URL to a deployed instance.

Props

The component's public API, read from its TypeScript source. Descriptions come from TSDoc on the prop, so this table cannot drift from the component.

Prop	Type	Default	Description
`products`*	`Product[]`	—	Undocumented — add TSDoc to the prop in the library.
`selectionMode`	`boolean`	`false`	Reveals the checkbox column and the floating bulk-actions toolbar.
`onExitSelectionMode`	`() => void`	—	Cancel / Escape was pressed in selection mode.
`onDelete`	`(ids: string[]) => void`	—	Delete was confirmed, for one id or for the whole selection.
`layersByProductId`	`Record<string, string[]>`	—	Layer names per product id. Replaces `useProductLayers().getProductLayers(id)`.
`getProductLayers`	`(productId: string) => string[]`	—	Escape hatch when layers are computed rather than looked up. Wins over the map.
`getHref`	`(product: Product) => string`	—	Row href, used by the "View product" menu item. Defaults to `/creator/products/{id}`.
`spaceId`	`string`	—	Appended as `?space=` to the default href. Replaces the router's search param.
`onSelectProduct`	`(product: Product) => void`	—	A row was activated (click or Enter/Space). Replaces `navigate(href)`.
`onEditProduct`	`(product: Product) => void`	—	Edit was chosen from a row's overflow menu.
`onExport`	`(ids: string[]) => void`	—	Export was pressed in the bulk toolbar. The app's handler was an empty stub.
`defaultSelectedIds`	`string[]`	—	Uncontrolled initial selection, so "3 selected" is a static story.
`selectedIds`	`string[]`	—	Controlled selection.
`onSelectionChange`	`(ids: string[]) => void`	—	Undocumented — add TSDoc to the prop in the library.
`defaultPage`	`number`	`0`	Uncontrolled initial page index (zero-based).
`pageSize`	`number`	`20`	Rows per page.
`defaultDeleteTarget`	`ProductsTableDeleteTarget \| null`	`null`	Uncontrolled seed for the delete confirmation, so the open dialog is a static story. `"bulk"` targets the current selection.
`now`	`Date`	`PRODUCTS_TABLE_DEFAULT_NOW`	Reference "today" for the date fallback on products with no timestamps.
`currencySymbol`	`string`	`"$"`	Prefix on prices. BTS prices in AUD, hence the bare `$`.
`emptyLabel`	`string`	`"No products yet."`	Shown when `products` is empty.
`className`	`string`	—	Undocumented — add TSDoc to the prop in the library.

Reference

Transcribed from the component audit. If this disagrees with the source, the source is right.

Source: src/components/products/ProductsTable.tsx
Portability: Needs its app dependencies replaced by props before it renders in isolation.
Responsive: Carries a load-bearing max-md: / md: pair. Sign off at both viewports — see the rule.
Notes: Takes a now value; its date and price formatters are exported alongside it.