block
Catalog table
A pokerdata.io game's packs: tabs, search, filter chips, sortable columns and a card layout on phones, with Details, Browse and Download on every row. Bring your own range and purchase drawers.
A game's packs, as on pokerdata.io and Downloads. The tabs come from GET /api/partner/games/[slug]. Pass renderBrowse and renderBuy for your drawers, or renderRowAction for your own Download button.
Installation
$ npx shadcn@latest add https://www.pokerstudy.ai/r/catalog-table.jsonProps
Generated from the component source with react-docgen-typescript.
CatalogTable
| Prop | Type | Default | Description |
|---|---|---|---|
| banner | { title: string; text: string; buy?: (T & { label: string; }); } | – | An offer above the tabs: every section at once (the ICM page). |
| initialBrowseId | string | – | – |
| onBuy | ((target: T) => void) | – | Buy without a drawer (e.g. straight to checkout); `renderBuy` wins. |
| renderBrowse | ((target: B | null, close: () => void) => ReactNode) | – | The range drawer, open on `target` (null: closed). |
| renderBuy | ((target: T | null, close: () => void) => ReactNode) | – | The purchase drawer, open on `target` (null: closed). |
| renderRowAction | ((row: CatalogRow<B, T>) => ReactNode) | – | A row's own Buy/Download slot; undefined keeps the row's `buy` / `action`. |
| resolveBrowseId | ((id: string) => B | null) | – | A `?browse=<id>` that matches no row: the drawer target for it, if any. |
| tabs * | CatalogTab<B, T>[] | – | – |