Step-by-step setup (Next.js App Router)
1. Add NuqsAdapter in your root layout If you want sort, filters, pagination, and visibility persisted in URL params, wrap your app with NuqsAdapter: // app/layout.tsx export default function RootLayout(
Guide
Step-by-step setup with a concrete Next.js example
1. Add NuqsAdapter in your root layout If you want sort, filters, pagination, and visibility persisted in URL params, wrap your app with NuqsAdapter: // app/layout.tsx export default function RootLayout(
After the 4 core steps above, your table should: Load data through list(params). Keep sorting, filters, display mode, and pagination in URL params. Call create/update/delete when row actions are used.
getTableConfig(tableType) should return: Top-level table behavior keys like layoutPreset, emptyState, rowClickMode, displayModes, defaultDisplayMode, kanban, gallery, allowViewSave, allowViewSharing, enableRowSelection,...
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. Add NuqsAdapter in your root layout If you want sort, filters, pagination, and visibility persisted in URL params, wrap your app with NuqsAdapter: // app/layout.tsx export default function RootLayout(
After the 4 core steps above, your table should: Load data through list(params). Keep sorting, filters, display mode, and pagination in URL params. Call create/update/delete when row actions are used.
getTableConfig(tableType) should return: Top-level table behavior keys like layoutPreset, emptyState, rowClickMode, displayModes, defaultDisplayMode, kanban, gallery, allowViewSave, allowViewSharing, enableRowSelection,...
Return an object with methods keyed by action name. The table calls these when the user sorts, filters, paginates, or runs CRUD/bulk actions. list – Required for server-driven data. Signature: (params) = Promise. Params...
Return form configuration per form type (e.g. "products", "products-bulk"). Used to build create/edit forms and bulk edit. Shape: fields array with name, type, label, required, etc. See Forms and Collection Fields for t...
All props are optional except tableType. | Prop | Type | Description | |------|------|-------------| | tableType | string | Required. Identifier for this table (e.g. "products"). Used to resolve config and actions. |
Implementation notes
Build create/edit forms with native array editors, validation, and nested collection support
$ export default function RootLayout({
$ children,
$ }: {
$ children: React.ReactNode;
$ }) {