useTableSort

Ce hook facilite la gestion du tri dans les tableaux (utilisant TanStack React Table) en synchronisant automatiquement l'état du tri avec l'URL. Cela permet de conserver l'état de tri lors de la navigation et de partager des liens avec le tri appliqué.

Retour du hook

Le hook retourne un objet contenant :

Propriété	Type	Description
sorting	string	L'identifiant de la colonne triée
sortingDirection	string	La direction du tri ("asc" ou "desc")
sortingState	SortingState	L'état du tri au format TanStack React Table
onSortingChange	Function	Callback à passer à la table pour mettre à jour le tri

Types

interface IUseTableSort {
  sorting: string;
  sortingDirection: string;
  sortingState: SortingState;
  onSortingChange: (updater: Updater<SortingState>) => void;
}

Utilisation basique

import { useTableSort } from '@/hooks/use-table-sort';
import { useReactTable, getCoreRowModel } from '@tanstack/react-table';

export function UserTable() {
  const { sortingState, onSortingChange } = useTableSort();

  const table = useReactTable({
    data: users,
    columns: userColumns,
    state: {
      sorting: sortingState,
    },
    onSortingChange,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <th key={header.id}>
                <button onClick={header.column.getToggleSortingHandler()}>
                  {header.column.columnDef.header}
                  {header.column.getIsSorted() && (
                    <span>{header.column.getIsSorted() === 'desc' ? '↓' : '↑'}</span>
                  )}
                </button>
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <td key={cell.id}>{cell.getValue()}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Paramètres

Le hook ne prend aucun paramètre obligatoire. Il utilise automatiquement :

• useSearchParams() pour lire les paramètres d'URL
• useRouter() pour mettre à jour l'URL
• usePathname() pour conserver le chemin actuel

Fonctionnement

1. Lecture des paramètres : Récupère les valeurs de tri depuis l'URL (sort et sortDirection)
2. Construction de l'état : Crée l'état de tri au format TanStack React Table
3. Gestion des changements : Lors d'un changement de tri, met à jour les paramètres d'URL
4. Persistance : Le tri est sauvegardé dans l'URL pour être partageable et persistant

Paramètres d'URL

Le hook utilise deux paramètres de requête :

Paramètre	Valeur	Exemple
sort	ID de la colonne	?sort=email
sortDirection	asc ou desc	?sortDirection=desc

URL complète : ?sort=email&sortDirection=desc

Points importants

• ⚠️ Le tri est synchronisé avec l'URL, il persiste lors de la navigation
• ⚠️ Les valeurs par défaut proviennent de defaultValues.query
• ℹ️ Compatible avec TanStack React Table v8+
• ℹ️ Les paramètres d'URL sont supprimés s'il n'y a pas de tri actif
• ✅ Permet de partager des liens avec le tri appliqué
• ✅ Facilite la pagination avec tri

Sources

• Documentation TanStack React Table : https://tanstack.com/table/v8/docs/guide/sorting
• Next.js Navigation : https://nextjs.org/docs/app/api-reference/functions/use-search-params