État URL (Nuqs)

La table conserve tri, filtres, pagination, visibilité des colonnes, regroupement et pinning dans l'URL avec Nuqs. Cela apporte :

Liens partageables – Envoyez un lien et le destinataire voit la même vue (même tri, filtres, page).
Retour/avance navigateur – L'historique reflète l'état de la table.
Compatible SSR – La même URL peut être utilisée pour le rendu côté serveur ou le prefetch.

Setup (Next.js App Router)

Installez nuqs :

npm install nuqs

Ajoutez NuqsAdapter dans votre layout racine :

// app/layout.tsx
import { NuqsAdapter } from "nuqs/adapters/next/app";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <NuqsAdapter>
          {children}
        </NuqsAdapter>
      </body>
    </html>
  );
}

Aucune autre configuration n'est nécessaire ; la table utilise Nuqs en interne.

Ce qui est stocké dans l'URL

Les query params sont préfixés par table id (votre tableType, par ex. products). Noms typiques :

Param	Example	Description
`{tableId}-sort`	`products-sort`	État du tri (tableau de `{ id, desc }`).
`{tableId}-filters`	`products-filters`	Filtres de colonnes.
`{tableId}-advancedFilters`	`products-advancedFilters`	Règles de filtres avancés.
`{tableId}-q`	`products-q`	Recherche globale.
`{tableId}-page`	`products-page`	Index de page en base 0.
`{tableId}-pageSize`	`products-pageSize`	Taille de page.
`{tableId}-visibility`	`products-visibility`	Visibilité des colonnes (objet).
`{tableId}-order`	`products-order`	Ordre des colonnes.
`{tableId}-grouping`	`products-grouping`	IDs des colonnes de regroupement.
`{tableId}-pinning`	`products-pinning`	Colonnes épinglées (gauche/droite).

Les valeurs sont encodées en JSON ou en string simple. La table les lit et les écrit via Nuqs ; vous n'avez pas besoin de les lire vous-même sauf si vous voulez les exploiter côté serveur (par ex. pour SSR).

Partage et reset

Copier le lien – La barre d'outils peut proposer “Copy link” / “Share” avec l'URL courante (tous les paramètres table y sont déjà).
Reset – Réinitialiser l'état de la table efface ces paramètres (ou restaure les valeurs par défaut), donc l'URL est mise à jour en conséquence.

Usage server-side de l'état URL

Si vous rendez la table côté serveur (par ex. dans un Server Component), vous pouvez lire les mêmes paramètres depuis searchParams et passer des données initiales ou les utiliser dans votre Server Action. Le client hydratera avec la même URL et Nuqs restera synchronisé.

Dépendances

nuqs – Requis pour l'état URL. La table utilise useQueryState et des parseurs custom.
Next.js – Utilisez nuqs/adapters/next/app pour l'App Router.

Voir aussi :