Code & Dev Compatible: claude

URL-Synced Table Filters

Complexity Level: Beginner
Prompt Code Block

Sync a data table's filters, sort, and page to the URL. A refresh and a shared link must show the same rows. TABLE Framework: [REACT | NEXT.JS] Filters: [LIST WITH TYPES] Sort: [COLUMNS] Pagination: [CURSOR | PAGE] Defaults when the URL is empty: [DEFAULTS] DELIVER 1) The query-param schema. Invalid values fall back to the default and replace the URL, they do not white-screen. 2) The hook that reads and writes params without dropping unrelated params (a tab, a query string someone else owns). 3) Debounce text input so we do not push a history entry per keystroke; filters that are clicks can update immediately. Say which push and which replace. 4) The fetch that depends on the parsed params, and the loading state that does not blank the table if we already have rows. 5) A test: set two filters, reload from that URL, clear one, the other remains. Do not store the filter state only in memory. Do not put secrets or emails in the query string; say so if a filter would.

🌟 Example Output / Preview

### Generated Component Preview: ```typescript // Fully validated modern structure import { z } from 'zod'; export const RequestSchema = z.object({ id: z.string().uuid(), createdAt: z.date().default(() => new Date()), data: z.record(z.string(), z.any()) }); export type ValidatedRequest = z.infer<typeof RequestSchema>; ```

Prompt Metadata

DifficultyBeginner
Compatibilityclaude

Primary Use Cases:

  • •Legacy code modernization & technical refactoring
  • •Full-stack layout generation & component structuring
  • •CI/CD workflow automation & unit/E2E testing suites

Associated Tags:

#react #filters #typescript #ux

💡 Pro Tips & Advice

1. Use bracketed items: Be sure to fill out all [PLACEHOLDER] elements with specific details before sending the prompt to the AI model.

2. Adjust temperature: For creative tasks, set AI temperature higher (e.g., 0.8), or lower (e.g., 0.2) for strict coding/technical tasks.

🔗 Related AI Prompts

Code & Dev
★ Featured

Full SaaS Landing Page Build Spec (SEO + Conversion)

You are a Staff Product Designer + Frontend Engineer + SEO strategist. Build a complete, production-ready marketing landing page f...

Compatible:claudeDiff:Advanced
#landing-page #saas #seo #nextjs #tailwind
Code & Dev
★ Featured 🔥 Trending

SaaS Analytics Dashboard Full Build Spec

You are a Principal Product Designer + Frontend Lead. Design and specify a complete [LIGHT | DARK] analytics dashboard for [PRODUC...

Compatible:claudeDiff:Intermediate
#dashboard #saas #ui #tailwind #seo
Code & Dev

SaaS Admin Panel Dashboard Build Spec

Design a full internal Admin Dashboard for [PRODUCT_NAME] used by [ADMIN_ROLE: support | ops | super-admin]. --- 🎯 CONTEXT Adm...

Compatible:claudeDiff:Intermediate
#admin #dashboard #saas #crud #tailwind