Replit Agent prompt to build a data table with sorting
Client-side sorting is the trap here: it quietly sorts one page of data and calls the job done. This prompt makes Replit Agent push sorting into the API with whitelisted columns, cycling header states, and the full view encoded in the URL. You get a table where any sorted view is a shareable link.
Last updated
Build a sortable data table for the existing app in this Repl. Sorting happens on the server, the client never re-sorts a page of rows locally. API: extend the list endpoint with sort and dir query params, whitelist sortable columns server-side, and reject unknown values with 400 rather than silently ignoring them. Keep pagination as it is and reset to page one whenever the sort changes. Header behavior: clicking a sortable column cycles ascending, descending, off, with exactly one active sort at a time. The active column shows a direction arrow and carries aria-sort so the state is announced. Non-sortable columns get plain text headers, not dead buttons. URL state: sort, direction, and page live in the query string. A pasted link reproduces the exact view and browser back steps through sort changes. Loading: keep current rows visible under a subtle overlay while the next sort loads, no full-table skeleton flash after first paint. Sorts fire immediately on click. Table mechanics while you are in there: a sticky header on scroll, right-aligned numeric columns, fixed table layout so column widths do not jump between pages, and dates sorted by value while displayed formatted. Empty and error states: zero results keeps the header row and shows a message in the body. A failed fetch keeps the previous rows and offers an inline retry. Done when: I sort by each column in the webview, watch the network panel issue one request per click, refresh and land on the identical view, and get a 400 from a hand-edited bogus sort param.
Same task in other tools
Questions about this prompt
Why server-side sorting when my table is small today?
The moment pagination exists, sorting a single page in the browser produces wrong orderings that look right. Server sorting is correct at any size, and the URL state and 400-on-bad-param checks come along with it.
How do I add multi-column sorting later?
Extend the params to an ordered list and let shift-click append a secondary column. Keep the server-side whitelist and the 400 on unknown values, those rules matter more with a more expressive parameter format.
Sorting the date column returns alphabetical order, what happened?
The query is ordering by the formatted display string instead of the underlying value. The prompt calls this out, so have the agent point at the ORDER BY column and its type, then re-sort and spot-check the first rows.