Setup (Next.js App Router)
1. Install nuqs: 2. Add NuqsAdapter in your root layout: // app/layout.tsx export default function Layout( children : children: React.ReactNode )
Guide
Sort, filters, pagination and column state in the URL with Nuqs
1. Install nuqs: 2. Add NuqsAdapter in your root layout: // app/layout.tsx export default function Layout( children : children: React.ReactNode )
Query params are prefixed by table id (your tableType, e.g. products). Typical names: | Param | Example | Description | |-------|---------|-------------| | tableId-sort | products-sort | Sort state (array of id, desc )....
Saved views are built from the same URL-backed state. The view manager is enabled by default and can be disabled with enableViews: false. Use allowViewSave: false when users can select existing views but should not crea...
What this page covers
The original MDX source has been condensed into CMS-native cards so the page can be edited and republished from the control plane.
1. Install nuqs: 2. Add NuqsAdapter in your root layout: // app/layout.tsx export default function Layout( children : children: React.ReactNode )
Query params are prefixed by table id (your tableType, e.g. products). Typical names: | Param | Example | Description | |-------|---------|-------------| | tableId-sort | products-sort | Sort state (array of id, desc )....
Saved views are built from the same URL-backed state. The view manager is enabled by default and can be disabled with enableViews: false. Use allowViewSave: false when users can select existing views but should not crea...
Copy link – The toolbar can offer “Copy link” / “Share” using the current URL (all table params are already in it). Reset – Resetting the table state clears these params (or restores defaults), so the URL is updated acc...
If you render the table on the server (e.g. in a Server Component), you can read the same params from searchParams and pass initial data or use them in your Server Action. The client will hydrate with the same URL and N...
nuqs – Required for URL state. The table uses useQueryState and custom parsers. Next.js – Use nuqs/adapters/next/app for the App Router. See also: Provider & Setup
Implementation notes
Common runtime issues and fixes
$ export default function Layout({ children }: { children: React.ReactNode }) {
$ return (
$ <html lang="en">
$ <body>
$ <NuqsAdapter>