Skip to main content

:::warning AUTO-GENERATED — do not edit This page is generated from the MCP server snapshot content/guide-mcp.json. Edit the source MCP server (not this file), then run npm run generate. :::

Add filters with shareable URL state

When to use: Users need to filter a table/chart and be able to share/bookmark the filtered view.

Prerequisites​

  • A table or list page already exists.

Steps​

Step 1: Get the FilterPanel template + its shadcn deps.​

Tools: get_component_template, get_shadcn_components

Step 2: Store filter state in TanStack Router search params (NOT Zustand, NOT useState).​

Step 3: Feed validated filter values into the query key so data refetches.​

Step 4: Run the quality gate.​

Full recipe definition​

The complete machine-readable recipe as returned by the MCP server:

{
  "id": "add-filters",
  "title": "Add filters with shareable URL state",
  "when": "Users need to filter a table/chart and be able to share/bookmark the filtered view.",
  "prerequisites": [
    "A table or list page already exists."
  ],
  "steps": [
    {
      "action": "Get the FilterPanel template + its shadcn deps.",
      "tools": [
        "get_component_template",
        "get_shadcn_components"
      ],
      "note": "name='FilterPanel'. Install select/input/checkbox/collapsible as listed."
    },
    {
      "action": "Store filter state in TanStack Router search params (NOT Zustand, NOT useState).",
      "files": [
        "src/routes/_authenticated/{domain}.tsx"
      ],
      "note": "Define a search schema on the route; read/write via useSearch/navigate."
    },
    {
      "action": "Feed validated filter values into the query key so data refetches.",
      "note": "queryKey: ['{domain}', filters] — TanStack Query refetches on change."
    },
    {
      "action": "Run the quality gate.",
      "note": "npm run verify"
    }
  ],
  "filesToCreate": [
    "src/components/{feature}/{domain}Filters.tsx"
  ],
  "validation": [
    "`npm run verify` passes.",
    "Reloading the URL restores the filtered state."
  ],
  "doneCriteria": [
    "verify green",
    "Filter state lives in the URL."
  ],
  "commonMistakes": [
    "Putting URL/filter state in Zustand or useState.",
    "Not including filters in the query key (stale data)."
  ],
  "relatedRecipes": [
    "add-data-table"
  ]
}