BoilerPrompt
v0

v0 prompt to build a data table with sorting

The shadcn/ui plus TanStack Table pairing is the pattern v0 scaffolds for tables, and this prompt uses it fully: three-state header sorting reflected in the URL, filters that compose instead of resetting, and a skeleton that matches column widths. You end up with a table whose views are shareable as links.

Last updated

Prompt
Build a sortable data table for {{resource}} records using the shadcn/ui Table primitives with TanStack Table managing column state, the pairing v0 scaffolds for this job. Columns: name, status rendered as a colored Badge, amount right-aligned through a currency formatter, created_at formatted on the server, and a row actions column holding a DropdownMenu with edit and delete. Sorting: clickable headers cycling ascending, descending, then cleared, an ArrowUp or ArrowDown lucide icon on the active column only, amount sorting numerically rather than lexically, and sort state written to URL query params like ?sort=amount&dir=desc so refreshes and shared links reproduce the view. Keep it single-column, multi-sort is out of scope. Above the table: a debounced text filter on name and a status Select that compose with sorting instead of resetting it. Pagination: a page size selector plus previous and next buttons in the footer, with a range label like showing 21 to 40 computed from real counts. States: a loading skeleton matching the exact column widths so the layout never jumps when data lands, an empty row spanning all columns when filters match nothing with a clear filters action, and an error row with a retry button if the fetch fails. Keep the basics honest without turning this into an audit: aria-sort on the active header, and buttons rather than divs for anything clickable. Acceptance: in the v0 preview, sorting by amount orders numerically, the URL updates as you sort, and clearing filters restores the full set without losing the chosen sort.

Customize it

Runs in your browser. Nothing you type here is sent anywhere.

Your customized prompt
Build a sortable data table for users records using the shadcn/ui Table primitives with TanStack Table managing column state, the pairing v0 scaffolds for this job. Columns: name, status rendered as a colored Badge, amount right-aligned through a currency formatter, created_at formatted on the server, and a row actions column holding a DropdownMenu with edit and delete. Sorting: clickable headers cycling ascending, descending, then cleared, an ArrowUp or ArrowDown lucide icon on the active column only, amount sorting numerically rather than lexically, and sort state written to URL query params like ?sort=amount&dir=desc so refreshes and shared links reproduce the view. Keep it single-column, multi-sort is out of scope. Above the table: a debounced text filter on name and a status Select that compose with sorting instead of resetting it. Pagination: a page size selector plus previous and next buttons in the footer, with a range label like showing 21 to 40 computed from real counts. States: a loading skeleton matching the exact column widths so the layout never jumps when data lands, an empty row spanning all columns when filters match nothing with a clear filters action, and an error row with a retry button if the fetch fails. Keep the basics honest without turning this into an audit: aria-sort on the active header, and buttons rather than divs for anything clickable. Acceptance: in the v0 preview, sorting by amount orders numerically, the URL updates as you sort, and clearing filters restores the full set without losing the chosen sort.

Same task in other tools

Questions about this prompt

Is the sorting client side or server side?

This spec sorts client side through TanStack with the state mirrored to the URL. When the dataset outgrows one payload, ask v0 to pass those same sort and dir params into the fetch and sort in the query, the header UI and URL contract stay identical.

How do I add columns without breaking the layout?

Add a column def with a header, cell renderer, and a numeric sortingFn if the values are numbers, then update the skeleton to include the new column at a matching width. Skipping the skeleton update is what makes the table jump when data lands.

Sorting by amount puts 100 before 20. Why?

The sort is running on the formatted string instead of the raw number. Keep raw numeric values in the row data, format only inside the cell renderer, and ask v0 to point the sorting accessor at the raw field.

Related prompts