URL-Synced Table Filters
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
Prompt Metadata
Primary Use Cases:
- •Legacy code modernization & technical refactoring
- •Full-stack layout generation & component structuring
- •CI/CD workflow automation & unit/E2E testing suites
Associated Tags:
💡 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
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...
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...
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...