ListGuesser

A list page whose columns come from the resource's registered Zod schema.

Installation

pnpm dlx shadcn@latest add @chelone/list-guesser

<ListGuesser> is a <List> with a <DataTable> it builds itself. Each field of the resource's Zod schema becomes a column, so the columns exist before any record loads. A resource without a schema shows <GuesserEmpty> and makes no list request.

Loading preview…

src/App.tsx

<Resource name="posts" list={ListGuesser} />

Outside production it logs the hand-written list it stands in for. Copy that code and replace the guesser when the page needs more. enableLog turns the log off. The guessers guide covers the schema-to-column mapping, the log and Vue.

See also <ShowGuesser> and <EditGuesser>.

Props

Prop	Type	Default	Description
actions	false \| ReactElement<unknown, string \| JSXElementConstructor<any>>	—	Header actions (create/export/filter buttons); nothing by default.
className	string	—
component	ElementType<any, keyof IntrinsicElements>	—	Element/component wrapping the children (defaults to `"div"`).
enableLog	boolean	—	Log the equivalent hand-written list once per resource. Defaults to on outside production.
perPage	number	—	Rows-per-page for the initial query.
resource	string	—	Override the ambient resource (defaults to the `<Resource>` context).
title	ReactNode	—	Header title. A string/element renders as an `<h2>`; `false` omits it.