@zevra/ui 0.42.0 → 0.43.1

package/react/grille.tsx

@@ -0,0 +1,1480 @@
+'use client'
+
+// La grille de données : un tableau qu'on OPÈRE (trier, filtrer, réordonner,
+// élargir, épingler, cocher, exporter), et qui se souvient de sa vue.
+//
+// ⚠️ CE N'EST PAS UN SECOND TABLEAU. TanStack Table calcule, `DataTable`
+// rend (les mêmes .zv-table / .zv-row / .zv-cell que partout), et
+// l'outillage vient des composants du paquet. Ce fichier ne fait que les
+// brancher ensemble. L'arbitrage complet, ce qu'elle fait, ce qu'elle ne
+// fait PAS et pourquoi : DECISIONS.md, « La grille de données ».
+//
+// ⚠️ SOUS-CHEMIN DÉDIÉ, hors du barrel, pour la même raison que
+// `react/table` : TanStack et dnd-kit sont des dépendances OPTIONNELLES.
+//
+//     import { DataGrid } from '@zevra/ui/react/grille'
+
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import type {
+  CSSProperties,
+  KeyboardEvent as EvenementClavier,
+  PointerEvent as EvenementPointeur,
+  ReactNode,
+} from 'react'
+import {
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type Column,
+  type ColumnDef,
+  type ColumnFiltersState,
+  type ColumnOrderState,
+  type ColumnPinningState,
+  type ColumnSizingState,
+  type FilterFn,
+  type OnChangeFn,
+  type PaginationState,
+  type Row,
+  type RowSelectionState,
+  type SortingState,
+  type Table as TableTanstack,
+  type Updater,
+  type VisibilityState,
+} from '@tanstack/react-table'
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useDndMonitor,
+  useSensor,
+  useSensors,
+  type Announcements,
+  type DragEndEvent,
+  type Modifier,
+  type UniqueIdentifier,
+} from '@dnd-kit/core'
+import {
+  SortableContext,
+  arrayMove,
+  horizontalListSortingStrategy,
+  sortableKeyboardCoordinates,
+  useSortable,
+} from '@dnd-kit/sortable'
+import { DataTable, colonnesAffichees, epinglage, type CelluleEnteteProps } from './data-table.js'
+import { usePersistedState } from './use-persisted-state.js'
+import { Button } from './actions.js'
+import { Icon, IconButton } from './icon.js'
+import { Checkbox, Field, Input, Search, SelectAnchor } from './forms.js'
+import { SelectMenu } from './select-menu.js'
+import { Menu, MenuItem, Pager, PagerArrow, Popover } from './navigation.js'
+import { Empty } from './feedback.js'
+import { Meta } from './data.js'
+import { cx } from './cx.js'
+
+export { usePersistedState }
+
+/** Identifiant réservé de la colonne de cases. */
+export const COLONNE_SELECTION = '__selection'
+
+/** Ce que la grille enregistre, par tableau. Les filtres et la sélection
+ *  n'en font PAS partie : retrouver un filtre oublié d'une visite à l'autre
+ *  fait croire que des lignes ont disparu. */
+export interface VueGrille {
+  columnOrder: ColumnOrderState
+  columnVisibility: VisibilityState
+  columnSizing: ColumnSizingState
+  columnPinning: ColumnPinningState
+  sorting: SortingState
+  pageSize: number
+}
+
+/** Les tailles de page proposées au pied. */
+export const TAILLES_PAGE = [25, 50, 100] as const
+
+/** Toute la copie de la grille. Aucun libellé, visible ou annoncé, n'est
+ *  écrit en dur : une app anglaise passe les siens par `textes`, sans quoi
+ *  elle n'aurait AUCUN recours (le CSS ne traduit pas un aria-label). */
+export interface TextesGrille {
+  rechercher: string
+  colonnes: string
+  colonnesAffichees: string
+  exporter: string
+  reinitialiser: string
+  filtrer: string
+  /** Première option d'un filtre à choix : aucune restriction. */
+  tous: string
+  du: string
+  au: string
+  min: string
+  max: string
+  effacer: string
+  /** Raccourcis de période du filtre de dates. */
+  periodes: string
+  aujourdhui: string
+  septJours: string
+  trenteJours: string
+  ceMois: string
+  cetteAnnee: string
+  /** Résumé d'une plage dans son déclencheur (« ≥ 10 », « 01/03 → 15/03 »).
+   *  Les dates arrivent en ISO (AAAA-MM-JJ). */
+  resumeNombres: (min: string, max: string) => string
+  resumeDates: (du: string, au: string) => string
+  filtrerColonne: (nom: string) => string
+  deplacer: (nom: string) => string
+  largeur: (nom: string) => string
+  largeurAide: string
+  epinglerGauche: (nom: string) => string
+  epinglerDroite: (nom: string) => string
+  detacher: (nom: string) => string
+  aGauche: string
+  aDroite: string
+  toutSelectionner: string
+  selectionnerLigne: string
+  choisies: (n: number) => string
+  aucuneDonnee: string
+  aucunResultat: string
+  aucuneLigne: string
+  compte: (debut: number, fin: number, total: number) => string
+  parPage: (n: number) => string
+  lignesParPage: string
+  pagination: string
+  pagePrecedente: string
+  pageSuivante: string
+  page: (page: number, pages: number) => string
+  dndInstructions: string
+  dndSaisie: (nom: string) => string
+  dndSurvol: (nom: string, cible: string) => string
+  dndHors: (nom: string) => string
+  dndPose: (nom: string, cible: string) => string
+  dndReposee: (nom: string) => string
+  dndAnnule: (nom: string) => string
+}
+
+export const TEXTES_GRILLE: TextesGrille = {
+  rechercher: 'Rechercher dans le tableau',
+  colonnes: 'Colonnes',
+  colonnesAffichees: 'Colonnes affichées',
+  exporter: 'Exporter',
+  reinitialiser: 'Réinitialiser la vue',
+  filtrer: 'Filtrer',
+  tous: 'Tous',
+  du: 'Du',
+  au: 'Au',
+  min: 'Min.',
+  max: 'Max.',
+  effacer: 'Effacer le filtre',
+  periodes: 'Périodes',
+  aujourdhui: "Aujourd'hui",
+  septJours: '7 derniers jours',
+  trenteJours: '30 derniers jours',
+  ceMois: 'Ce mois-ci',
+  cetteAnnee: 'Cette année',
+  resumeNombres: (min, max) =>
+    min && max ? `${min} – ${max}` : min ? `≥ ${min}` : max ? `≤ ${max}` : 'Tous',
+  resumeDates: (du, au) => {
+    const fr = (d: string) => d.split('-').reverse().join('/')
+    return du && au ? `${fr(du)} → ${fr(au)}` : du ? `dès le ${fr(du)}` : au ? `jusqu'au ${fr(au)}` : 'Toutes'
+  },
+  filtrerColonne: (nom) => `Filtrer la colonne ${nom}`,
+  deplacer: (nom) => `Déplacer la colonne ${nom}`,
+  largeur: (nom) => `Largeur de la colonne ${nom}`,
+  largeurAide: "Glisser pour élargir. Double-clic : largeur d'origine.",
+  epinglerGauche: (nom) => `Épingler ${nom} à gauche`,
+  epinglerDroite: (nom) => `Épingler ${nom} à droite`,
+  detacher: (nom) => `Détacher ${nom}`,
+  aGauche: 'à gauche',
+  aDroite: 'à droite',
+  toutSelectionner: 'Sélectionner toutes les lignes',
+  selectionnerLigne: 'Sélectionner la ligne',
+  choisies: (n) => (n > 1 ? `${n} lignes choisies` : `${n} ligne choisie`),
+  aucuneDonnee: 'Aucune ligne pour le moment.',
+  aucunResultat: 'Aucune ligne ne correspond à ces filtres.',
+  aucuneLigne: 'Aucune ligne.',
+  compte: (debut, fin, total) => (total === 0 ? '0 ligne' : `${debut} – ${fin} sur ${total}`),
+  parPage: (n) => `${n} par page`,
+  lignesParPage: 'Lignes par page',
+  pagination: 'Pagination du tableau',
+  pagePrecedente: 'Page précédente',
+  pageSuivante: 'Page suivante',
+  page: (page, pages) => `p. ${page} / ${pages}`,
+  dndInstructions:
+    'Pour déplacer la colonne, appuyez sur Espace, puis sur les flèches gauche et droite. Espace pour la poser, Échap pour annuler.',
+  dndSaisie: (nom) => `Colonne ${nom} saisie.`,
+  dndSurvol: (nom, cible) => `Colonne ${nom} à la place de ${cible}.`,
+  dndHors: (nom) => `Colonne ${nom} hors des colonnes.`,
+  dndPose: (nom, cible) => `Colonne ${nom} posée à la place de ${cible}.`,
+  dndReposee: (nom) => `Colonne ${nom} reposée.`,
+  dndAnnule: (nom) => `Déplacement annulé : la colonne ${nom} reprend sa place.`,
+}
+
+export interface DataGridProps<T> {
+  /** Identifiant STABLE du tableau : il nomme la vue enregistrée
+   *  (`table:<tableId>:v1`). Deux tableaux qui le partagent partagent leur
+   *  vue ; le changer fait oublier celle de tous les utilisateurs. */
+  tableId: string
+  data: T[]
+  /** Colonnes TanStack. Chacune doit avoir un `id` ou un `accessorKey`
+   *  textuel : c'est lui que la vue enregistre. `size` est la largeur
+   *  PLANCHER en pixels (150 par défaut) : la colonne s'étire au-delà tant
+   *  qu'on ne l'a pas réglée. `meta.registre`, `meta.label`, `meta.unite`
+   *  sont ceux de `DataTable`. */
+  columns: ColumnDef<T, any>[]
+  /** Clic (ou Entrée) sur une ligne. Sans lui, la ligne n'est pas
+   *  cliquable, et elle n'en a pas l'air. */
+  onRowClick?: (ligne: T) => void
+  /** La ligne dont l'aperçu est ouvert : filet d'accent à gauche. */
+  ligneActive?: (ligne: T) => boolean
+  /** Identifiant de ligne. Indispensable avec `selection` dès que les
+   *  données se rechargent : par défaut c'est l'INDEX, et une ligne cochée
+   *  deviendrait une autre ligne après un tri côté serveur. */
+  getRowId?: (ligne: T, index: number) => string
+  /** Une colonne de cases, épinglée à gauche. */
+  selection?: boolean
+  onSelectionChange?: (lignes: T[]) => void
+  /** Lignes par page (25, 50 ou 100), ou `false` pour tout afficher. */
+  parPage?: (typeof TAILLES_PAGE)[number] | false
+  /** Champ de recherche sur toutes les colonnes. Par défaut : oui. */
+  recherche?: boolean
+  /** Rangée de filtres sous les intitulés. Par défaut : oui. */
+  filtres?: boolean
+  /** Bouton d'export CSV des lignes filtrées et triées, colonnes visibles.
+   *  Une chaîne nomme le fichier (sans extension). Par défaut : oui. */
+  exportCsv?: boolean | string
+  /** Vue par défaut : colonnes masquées, épinglées, tri. C'est elle que
+   *  « Réinitialiser la vue » rétablit. */
+  vueInitiale?: {
+    masquees?: string[]
+    epingleesGauche?: string[]
+    epingleesDroite?: string[]
+    tri?: SortingState
+  }
+  /** Ligne d'absence quand aucune ligne ne correspond. */
+  vide?: ReactNode
+  /** Actions propres à l'app, posées dans la barre avant les réglages de
+   *  vue. ⚠️ Un seul bouton plein par page : la grille n'en pose aucun, le
+   *  vôtre peut être celui-là. */
+  outils?: ReactNode
+  /** Copie de la grille, à remplacer en tout ou partie (traduction). */
+  textes?: Partial<TextesGrille>
+  className?: string
+}
+
+/* ─── Fonctions pures (testées) ──────────────────────────────────────── */
+
+/** L'identifiant d'une définition de colonne, tel que TanStack le dérive. */
+export function idDeColonne<T>(c: ColumnDef<T, any>): string | undefined {
+  if (c.id) return c.id
+  const cle = (c as { accessorKey?: unknown }).accessorKey
+  return typeof cle === 'string' ? cle.replace(/\./g, '_') : undefined
+}
+
+const estObjet = (v: unknown): v is Record<string, unknown> =>
+  typeof v === 'object' && v !== null && !Array.isArray(v)
+
+const listeIds = (v: unknown, connus: Set<string>): string[] =>
+  Array.isArray(v)
+    ? [...new Set(v.filter((x): x is string => typeof x === 'string' && connus.has(x)))]
+    : []
+
+/**
+ * Adapte une vue LUE (d'une version précédente du code, ou abîmée) aux
+ * colonnes d'aujourd'hui : un identifiant qui n'existe plus est ignoré, une
+ * colonne nouvelle s'ajoute en FIN d'ordre. Sans cela, ajouter une colonne
+ * au code la ferait disparaître chez tous ceux qui avaient déplacé une
+ * colonne avant. Rend `undefined` si rien n'est exploitable.
+ */
+export function reconcilierVue(
+  lu: unknown,
+  defaut: VueGrille,
+  ids: string[],
+): VueGrille | undefined {
+  if (!estObjet(lu)) return undefined
+  const connus = new Set(ids)
+
+  const ordreLu = listeIds(lu.columnOrder, connus)
+  const columnOrder = ordreLu.length
+    ? [...ordreLu, ...ids.filter((id) => !ordreLu.includes(id))]
+    : defaut.columnOrder
+
+  const filtrer = <V,>(objet: unknown, garder: (v: unknown) => v is V): Record<string, V> => {
+    const sortie: Record<string, V> = {}
+    if (estObjet(objet)) {
+      for (const [k, v] of Object.entries(objet)) if (connus.has(k) && garder(v)) sortie[k] = v
+    }
+    return sortie
+  }
+  const columnVisibility = estObjet(lu.columnVisibility)
+    ? filtrer(lu.columnVisibility, (v): v is boolean => typeof v === 'boolean')
+    : defaut.columnVisibility
+  const columnSizing = filtrer(
+    lu.columnSizing,
+    (v): v is number => typeof v === 'number' && Number.isFinite(v) && v > 0,
+  )
+
+  let columnPinning = defaut.columnPinning
+  if (estObjet(lu.columnPinning)) {
+    const left = listeIds(lu.columnPinning.left, connus)
+    const right = listeIds(lu.columnPinning.right, connus).filter((id) => !left.includes(id))
+    columnPinning = { left, right }
+  }
+
+  const sorting = Array.isArray(lu.sorting)
+    ? lu.sorting
+        .filter(
+          (s): s is { id: string; desc: boolean } =>
+            estObjet(s) && typeof s.id === 'string' && connus.has(s.id) && typeof s.desc === 'boolean',
+        )
+        .map((s) => ({ id: s.id, desc: s.desc }))
+    : defaut.sorting
+
+  const pageSize = (TAILLES_PAGE as readonly unknown[]).includes(lu.pageSize)
+    ? (lu.pageSize as number)
+    : defaut.pageSize
+
+  return { columnOrder, columnVisibility, columnSizing, columnPinning, sorting, pageSize }
+}
+
+/** Les quatre familles de filtre. Elles se DÉDUISENT des données (voir
+ *  `typeDeFiltre`) ; une colonne peut l'imposer par `meta.filtre`. */
+export type TypeFiltre = 'texte' | 'nombre' | 'date' | 'choix'
+
+/** La valeur d'un filtre de colonne, telle que TanStack la tient. */
+export type ValeurFiltre =
+  | { type: 'texte'; valeur: string }
+  | { type: 'choix'; valeur: string }
+  | { type: 'nombre'; min: string; max: string }
+  | { type: 'date'; du: string; au: string }
+
+/** Une valeur ramenée au jour, `AAAA-MM-JJ`, dans le fuseau du NAVIGATEUR :
+ *  une échéance au 3 mars à 23 h 30 à Paris est le 3 mars, pas le 4 qu'en
+ *  dirait `toISOString()`. Rend `null` pour ce qui n'est pas une date. */
+export function versJour(v: unknown): string | null {
+  if (v instanceof Date) {
+    if (Number.isNaN(v.getTime())) return null
+    const deux = (n: number) => String(n).padStart(2, '0')
+    return `${v.getFullYear()}-${deux(v.getMonth() + 1)}-${deux(v.getDate())}`
+  }
+  if (typeof v === 'string' && /^\d{4}-\d{2}-\d{2}/.test(v)) return v.slice(0, 10)
+  return null
+}
+
+/** Au-delà, une liste déroulante devient plus longue à parcourir qu'un mot
+ *  à taper : la colonne reste en texte libre. */
+export const CHOIX_MAX = 20
+
+/**
+ * La famille de filtre d'une colonne, d'après ses valeurs : `meta.filtre`
+ * d'abord, puis un nombre (registre `num`, ou valeurs numériques), une date
+ * (objets `Date` ou chaînes ISO), un CHOIX quand les valeurs distinctes sont
+ * peu nombreuses ET se répètent (sinon chaque ligne serait une option), du
+ * texte enfin.
+ */
+export function typeDeFiltre(
+  meta: { filtre?: TypeFiltre | false; registre?: 'nom' | 'num' } | undefined,
+  valeurs: unknown[],
+): TypeFiltre | false {
+  if (meta?.filtre !== undefined) return meta.filtre
+  if (meta?.registre === 'num') return 'nombre'
+  const presentes = valeurs.filter((v) => v != null && v !== '')
+  if (presentes.length === 0) return 'texte'
+  if (presentes.every((v) => typeof v === 'number')) return 'nombre'
+  if (presentes.every((v) => versJour(v) !== null)) return 'date'
+  if (meta?.registre !== 'nom' && presentes.every((v) => typeof v === 'string' || typeof v === 'boolean')) {
+    const distinctes = new Set(presentes.map(String)).size
+    if (distinctes <= CHOIX_MAX && distinctes < presentes.length) return 'choix'
+  }
+  return 'texte'
+}
+
+const nombre = (s: string): number | null => {
+  if (s.trim() === '') return null
+  const n = Number(s.replace(',', '.'))
+  return Number.isFinite(n) ? n : null
+}
+
+/** Le filtre de toutes les colonnes de la grille : il lit la FORME de la
+ *  valeur, pas la colonne. Bornes comprises. */
+export const filtreGrille: FilterFn<any> = (ligne, colonne, filtre: ValeurFiltre) => {
+  const brut = ligne.getValue(colonne)
+  switch (filtre?.type) {
+    case 'texte':
+      return String(brut ?? '').toLowerCase().includes(filtre.valeur.trim().toLowerCase())
+    case 'choix':
+      return String(brut ?? '') === filtre.valeur
+    case 'nombre': {
+      const v = typeof brut === 'number' ? brut : nombre(String(brut ?? ''))
+      const min = nombre(filtre.min)
+      const max = nombre(filtre.max)
+      if (v == null) return min == null && max == null
+      return (min == null || v >= min) && (max == null || v <= max)
+    }
+    case 'date': {
+      const jourLigne = versJour(brut)
+      if (jourLigne == null) return !filtre.du && !filtre.au
+      return (!filtre.du || jourLigne >= filtre.du) && (!filtre.au || jourLigne <= filtre.au)
+    }
+    default:
+      return true
+  }
+}
+filtreGrille.autoRemove = (f: ValeurFiltre | undefined) =>
+  !f ||
+  (f.type === 'texte' && f.valeur.trim() === '') ||
+  (f.type === 'choix' && f.valeur === '') ||
+  (f.type === 'nombre' && f.min === '' && f.max === '') ||
+  (f.type === 'date' && f.du === '' && f.au === '')
+
+/** Ne garde d'une saisie que ce qui peut faire un nombre : chiffres, un
+ *  signe moins en tête, un séparateur décimal. Les lettres ne s'écrivent
+ *  pas, plutôt que de s'écrire puis d'être refusées. */
+export function saisieNombre(texte: string): string {
+  const signe = texte.trimStart().startsWith('-') ? '-' : ''
+  const [entier, ...reste] = texte.replace(/[^\d.,]/g, '').split(/[.,]/)
+  return signe + entier + (reste.length ? ',' + reste.join('') : '')
+}
+
+/** Une date saisie est-elle COMPLÈTE ? Le champ date natif rend une valeur
+ *  dès que les trois segments sont remplis, y compris pendant qu'on tape
+ *  l'année : « 0002 », puis « 0020 », puis « 0202 ». Filtrer sur ces états
+ *  intermédiaires faisait disparaître puis revenir toutes les lignes à
+ *  chaque chiffre. On n'applique qu'une année plausible. */
+export function dateComplete(v: string): boolean {
+  return v === '' || (/^\d{4}-\d{2}-\d{2}$/.test(v) && Number(v.slice(0, 4)) >= 1900)
+}
+
+/** Les raccourcis de période, en jours ISO, calculés depuis `maintenant`. */
+export function periodes(maintenant: Date): Record<
+  'aujourdhui' | 'septJours' | 'trenteJours' | 'ceMois' | 'cetteAnnee',
+  [string, string]
+> {
+  const jour = (d: Date) => versJour(d) as string
+  const decale = (n: number) => {
+    const d = new Date(maintenant)
+    d.setDate(d.getDate() - n)
+    return jour(d)
+  }
+  const aujourdhui = jour(maintenant)
+  return {
+    aujourdhui: [aujourdhui, aujourdhui],
+    septJours: [decale(6), aujourdhui],
+    trenteJours: [decale(29), aujourdhui],
+    ceMois: [jour(new Date(maintenant.getFullYear(), maintenant.getMonth(), 1)), aujourdhui],
+    cetteAnnee: [jour(new Date(maintenant.getFullYear(), 0, 1)), aujourdhui],
+  }
+}
+
+/** L'intitulé lisible d'une colonne : pour les menus, l'export, les annonces. */
+export function libelleColonne<T>(c: Column<T, unknown>): string {
+  const h = c.columnDef.header
+  return typeof h === 'string' ? h : (c.columnDef.meta?.label ?? c.id)
+}
+
+/** Les lignes filtrées et triées, colonnes visibles, en CSV : point-virgule
+ *  (le séparateur qu'Excel attend en français), guillemets doublés, dates en
+ *  ISO. Les VALEURS, pas le rendu : une pastille d'état s'exporte par son
+ *  libellé de données, pas par son HTML. */
+export function versCsv<T>(table: TableTanstack<T>): string {
+  const colonnes = colonnesAffichees(table).filter((c) => c.id !== COLONNE_SELECTION)
+  const echapper = (v: unknown): string => {
+    const s =
+      v == null ? '' : v instanceof Date ? v.toISOString().slice(0, 10) : String(v)
+    return /[";\r\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s
+  }
+  const lignes = table.getPrePaginationRowModel().rows
+  return [
+    colonnes.map((c) => echapper(libelleColonne(c))).join(';'),
+    ...lignes.map((l) => colonnes.map((c) => echapper(l.getValue(c.id))).join(';')),
+  ].join('\r\n')
+}
+
+function telecharger(texte: string, nom: string) {
+  // BOM UTF-8 : sans lui, Excel ouvre le fichier en Windows-1252 et
+  // « Déposé » devient « Déposé ».
+  const url = URL.createObjectURL(new Blob(['' + texte], { type: 'text/csv;charset=utf-8' }))
+  const lien = document.createElement('a')
+  lien.href = url
+  lien.download = `${nom}.csv`
+  lien.click()
+  setTimeout(() => URL.revokeObjectURL(url), 0)
+}
+
+const appliquer = <V,>(u: Updater<V>, ancien: V): V =>
+  typeof u === 'function' ? (u as (o: V) => V)(ancien) : u
+
+/* ─── En-tête : poignée de déplacement et poignée de largeur ─────────── */
+
+// Le glisser-déposer ne bouge que sur l'axe des colonnes : sans ce
+// modificateur, l'en-tête saisi suit le pointeur en hauteur et sort du cadre.
+const axeHorizontal: Modifier = ({ transform }) => ({ ...transform, y: 0 })
+
+function EnteteColonne<T>(p: CelluleEnteteProps<T> & { t: TextesGrille }) {
+  const colonne = p.entete.column
+  const table = p.entete.getContext().table
+  const nom = libelleColonne(colonne)
+  const t = p.t
+  // Ni la colonne de cases ni une colonne épinglée ne se déplacent : elles
+  // ont une place fixe, et TanStack les rend hors de l'ordre de toute façon.
+  const deplacable = colonne.id !== COLONNE_SELECTION && !colonne.getIsPinned()
+  const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } =
+    useSortable({ id: colonne.id, disabled: !deplacable })
+
+  // Tout l'en-tête se saisit, comme dans un tableur : viser une poignée de
+  // dix pixels n'est pas un geste qu'on devine. Le clic simple TRIE toujours,
+  // le seuil de 4 px du capteur les départage. Le CLAVIER, lui, passe par la
+  // poignée : c'est le seul élément focusable qui porte ce rôle.
+  const { onPointerDown, onKeyDown } = (listeners ?? {}) as {
+    onPointerDown?: (e: EvenementPointeur<HTMLElement>) => void
+    onKeyDown?: (e: EvenementClavier<HTMLElement>) => void
+  }
+
+  // Au lâcher, le navigateur émet un clic sur ce qui est sous le pointeur :
+  // un intitulé, qui trierait. On l'avale pendant un instant, sur TOUS les
+  // en-têtes, puisque la colonne peut être posée sur n'importe lequel.
+  const finDeplacement = useRef(0)
+  useDndMonitor({
+    onDragEnd: () => {
+      finDeplacement.current = Date.now()
+    },
+    onDragCancel: () => {
+      finDeplacement.current = Date.now()
+    },
+  })
+
+  const style: CSSProperties = {
+    ...p.style,
+    transform: transform ? `translate3d(${Math.round(transform.x)}px, 0, 0)` : undefined,
+    transition,
+  }
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cx(
+        p.className,
+        'zv-colhead',
+        deplacable && 'zv-colhead--deplacable',
+        isDragging && 'zv-colhead--drag',
+        colonne.columnDef.meta?.classe,
+      )}
+      style={style}
+      aria-sort={p['aria-sort']}
+      onPointerDown={deplacable ? onPointerDown : undefined}
+      onClickCapture={(e) => {
+        if (Date.now() - finDeplacement.current < 250) {
+          e.preventDefault()
+          e.stopPropagation()
+        }
+      }}
+    >
+      {deplacable && (
+        <button
+          type="button"
+          ref={setActivatorNodeRef}
+          className="zv-colhead__grip"
+          {...attributes}
+          onKeyDown={onKeyDown}
+          aria-label={t.deplacer(nom)}
+        >
+          <Icon nom="menu" taille="sm" />
+        </button>
+      )}
+      {p.children}
+      {colonne.getCanResize() && <PoigneeLargeur colonne={colonne} table={table} nom={nom} t={t} />}
+    </div>
+  )
+}
+
+/**
+ * Le redimensionnement est ÉCRIT ICI, pas confié à `header.getResizeHandler()` :
+ * celui-ci part de `getSize()`, qui vaut le plancher (150 px) pour une colonne
+ * souple quelle que soit sa largeur à l'écran, et le premier geste faisait
+ * sauter la colonne. On mesure la largeur RÉELLE à l'appui, puis on écrit
+ * `columnSizing` à chaque mouvement : c'est le mode `onChange`.
+ */
+function PoigneeLargeur<T>({
+  colonne,
+  table,
+  nom,
+  t,
+}: {
+  colonne: Column<T, unknown>
+  table: TableTanstack<T>
+  nom: string
+  t: TextesGrille
+}) {
+  const ref = useRef<HTMLSpanElement>(null)
+  const depart = useRef<{ x: number; largeur: number } | null>(null)
+  const [actif, setActif] = useState(false)
+  const min = colonne.columnDef.minSize ?? 60
+  const max = colonne.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER
+
+  const largeurActuelle = () =>
+    table.getState().columnSizing[colonne.id] ??
+    ref.current?.parentElement?.getBoundingClientRect().width ??
+    colonne.getSize()
+
+  const regler = (largeur: number) => {
+    const l = Math.round(Math.min(max, Math.max(min, largeur)))
+    table.setColumnSizing((ancien) => ({ ...ancien, [colonne.id]: l }))
+  }
+  const rendre = () =>
+    table.setColumnSizing((ancien) => {
+      const { [colonne.id]: _retire, ...reste } = ancien
+      return reste
+    })
+
+  const appui = (e: EvenementPointeur<HTMLSpanElement>) => {
+    if (e.button !== 0) return
+    e.preventDefault()
+    e.stopPropagation()
+    e.currentTarget.setPointerCapture(e.pointerId)
+    depart.current = { x: e.clientX, largeur: largeurActuelle() }
+    setActif(true)
+  }
+  const mouvement = (e: EvenementPointeur<HTMLSpanElement>) => {
+    if (!depart.current) return
+    regler(depart.current.largeur + e.clientX - depart.current.x)
+  }
+  const fin = (e: EvenementPointeur<HTMLSpanElement>) => {
+    if (!depart.current) return
+    depart.current = null
+    setActif(false)
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) e.currentTarget.releasePointerCapture(e.pointerId)
+  }
+  const clavier = (e: EvenementClavier<HTMLSpanElement>) => {
+    const pas = e.shiftKey ? 50 : 10
+    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+      e.preventDefault()
+      regler(largeurActuelle() + (e.key === 'ArrowRight' ? pas : -pas))
+    } else if (e.key === 'Enter' || e.key === 'Delete' || e.key === 'Backspace') {
+      e.preventDefault()
+      rendre()
+    }
+  }
+
+  const reglee = table.getState().columnSizing[colonne.id]
+  return (
+    <span
+      ref={ref}
+      // Le motif ARIA du séparateur DÉPLAÇABLE (window splitter) : focusable,
+      // une valeur, et les flèches pour la changer.
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={t.largeur(nom)}
+      aria-valuenow={Math.round(reglee ?? colonne.getSize())}
+      aria-valuemin={min}
+      tabIndex={0}
+      title={t.largeurAide}
+      className={cx('zv-colhead__resize', actif && 'zv-colhead__resize--actif')}
+      onPointerDown={appui}
+      onPointerMove={mouvement}
+      onPointerUp={fin}
+      onPointerCancel={fin}
+      onDoubleClick={rendre}
+      onKeyDown={clavier}
+      onClick={(e) => e.stopPropagation()}
+    />
+  )
+}
+
+/* ─── Cases de sélection ─────────────────────────────────────────────── */
+
+function CaseTout<T>({ table, t }: { table: TableTanstack<T>; t: TextesGrille }) {
+  // Une enveloppe plutôt qu'une ref sur la case : `Checkbox` ne transmet
+  // pas de ref sous React 18, que le paquet accepte encore.
+  const ref = useRef<HTMLSpanElement>(null)
+  const partiel = table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()
+  // `indeterminate` n'a pas d'attribut HTML : seule la propriété DOM existe.
+  useEffect(() => {
+    const caseTout = ref.current?.querySelector('input')
+    if (caseTout) caseTout.indeterminate = partiel
+  }, [partiel])
+  return (
+    <span ref={ref} className="zv-cell--case">
+    <Checkbox
+      checked={table.getIsAllRowsSelected()}
+      onChange={table.getToggleAllRowsSelectedHandler()}
+      aria-label={t.toutSelectionner}
+    />
+    </span>
+  )
+}
+
+function colonneSelection<T>(t: TextesGrille): ColumnDef<T, any> {
+  return {
+    id: COLONNE_SELECTION,
+    size: 40,
+    minSize: 40,
+    enableSorting: false,
+    enableHiding: false,
+    enableResizing: false,
+    enableColumnFilter: false,
+    enableGlobalFilter: false,
+    enablePinning: false,
+    header: ({ table }) => <CaseTout table={table} t={t} />,
+    cell: ({ row }: { row: Row<T> }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        disabled={!row.getCanSelect()}
+        onChange={row.getToggleSelectedHandler()}
+        // La case vit dans une ligne cliquable : sans ces deux arrêts, cocher
+        // ouvrirait aussi la ligne, et Espace l'ouvrirait au clavier.
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => e.stopPropagation()}
+        aria-label={t.selectionnerLigne}
+      />
+    ),
+    meta: { classe: 'zv-cell--case' },
+  }
+}
+
+/* ─── Menu des colonnes : visibilité et épinglage ────────────────────── */
+
+function MenuColonnes<T>({ table, t }: { table: TableTanstack<T>; t: TextesGrille }) {
+  const [ouvert, setOuvert] = useState(false)
+  const ancre = useRef<HTMLDivElement>(null)
+
+  // Fermeture au clic extérieur et à Échap, focus rendu au déclencheur :
+  // c'est à l'appelant de le faire, le Menu du paquet ne fait qu'afficher.
+  useEffect(() => {
+    if (!ouvert) return
+    const document_ = ancre.current?.ownerDocument ?? document
+    const dehors = (e: MouseEvent) => {
+      if (!ancre.current?.contains(e.target as Node)) setOuvert(false)
+    }
+    const echap = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setOuvert(false)
+        ancre.current?.querySelector('button')?.focus()
+      }
+    }
+    document_.addEventListener('mousedown', dehors)
+    document_.addEventListener('keydown', echap)
+    return () => {
+      document_.removeEventListener('mousedown', dehors)
+      document_.removeEventListener('keydown', echap)
+    }
+  }, [ouvert])
+
+  const colonnes = table.getAllLeafColumns().filter((c) => c.id !== COLONNE_SELECTION)
+  return (
+    <div ref={ancre}>
+      <SelectAnchor>
+        <Button
+          variante="fantome"
+          compact
+          icone="reglages"
+          aria-expanded={ouvert}
+          aria-haspopup="true"
+          onClick={() => setOuvert((o) => !o)}
+        >
+          {t.colonnes}
+        </Button>
+        {ouvert && (
+          <Menu role="group" aria-label={t.colonnesAffichees} className="zv-grille__menu">
+            {colonnes.map((c) => {
+              const nom = libelleColonne(c)
+              const cote = c.getIsPinned()
+              const suivant = cote === false ? 'left' : cote === 'left' ? 'right' : false
+              return (
+                <div key={c.id} className="zv-grille__menu-ligne">
+                  <label className="zv-menu__item zv-grille__menu-case">
+                    <Checkbox
+                      checked={c.getIsVisible()}
+                      disabled={!c.getCanHide()}
+                      onChange={c.getToggleVisibilityHandler()}
+                    />
+                    <span>{nom}</span>
+                    {cote && (
+                      <Meta taille="sm">{cote === 'left' ? t.aGauche : t.aDroite}</Meta>
+                    )}
+                  </label>
+                  {c.getCanPin() && (
+                    <IconButton
+                      icone="epingle"
+                      taille="sm"
+                      className="zv-grille__epingle"
+                      aria-pressed={cote !== false}
+                      label={
+                        suivant === 'left'
+                          ? t.epinglerGauche(nom)
+                          : suivant === 'right'
+                            ? t.epinglerDroite(nom)
+                            : t.detacher(nom)
+                      }
+                      onClick={() => c.pin(suivant)}
+                    />
+                  )}
+                </div>
+              )
+            })}
+          </Menu>
+        )}
+      </SelectAnchor>
+    </div>
+  )
+}
+
+/* ─── Filtres de colonne ────────────────────────────────────────────── */
+
+function FiltreColonne<T>({
+  colonne,
+  type,
+  t,
+}: {
+  colonne: Column<T, unknown>
+  type: TypeFiltre
+  t: TextesGrille
+}) {
+  const nom = libelleColonne(colonne)
+  const filtre = colonne.getFilterValue() as ValeurFiltre | undefined
+
+  if (type === 'choix') return <FiltreChoix colonne={colonne} nom={nom} t={t} />
+  if (type === 'nombre' || type === 'date') {
+    return <FiltrePlage colonne={colonne} type={type} nom={nom} t={t} />
+  }
+  return (
+    <Input
+      className="zv-table__filtre"
+      value={filtre?.type === 'texte' ? filtre.valeur : ''}
+      onChange={(e) => colonne.setFilterValue({ type: 'texte', valeur: e.target.value })}
+      placeholder={t.filtrer}
+      aria-label={t.filtrerColonne(nom)}
+    />
+  )
+}
+
+/**
+ * Un filtre qui s'ouvre : le champ de la rangée RÉSUME la valeur, et ouvre
+ * un panneau (une liste de choix, une plage) sous lui.
+ *
+ * ⚠️ LE PANNEAU SORT DU CADRE, par un portail. `.zv-table` défile
+ * horizontalement, et `overflow-x: auto` force `overflow-y` : un panneau
+ * posé dans la cellule serait rogné par le bas du tableau, invisible sur un
+ * tableau de trois lignes. Il est rendu dans le <body> et placé sous son
+ * déclencheur, en coordonnées d'écran.
+ *
+ * ⚠️ AUCUN <select> NATIF ICI : sa liste est peinte par le SYSTÈME, hors
+ * charte (menu noir sous macOS sombre), et certaines apps l'interdisent.
+ */
+function FiltreFlottant({
+  libelle,
+  resume,
+  vide,
+  icone,
+  role,
+  panneau: contenu,
+}: {
+  libelle: string
+  resume: string
+  vide: boolean
+  icone: 'calendrier' | 'filtre' | 'chevron-bas'
+  role: 'dialog' | 'listbox'
+  /** Le contenu ; reçoit de quoi refermer le panneau. */
+  panneau: (fermer: () => void) => ReactNode
+}) {
+  const [ouvert, setOuvert] = useState(false)
+  const [position, setPosition] = useState<{ top: number; left: number } | null>(null)
+  const declencheur = useRef<HTMLButtonElement>(null)
+  const panneau = useRef<HTMLDivElement>(null)
+
+  const fermer = useCallback(() => {
+    setOuvert(false)
+    declencheur.current?.focus()
+  }, [])
+
+  // Placé AVANT l'affichage (layout effect) : sinon le panneau apparaît un
+  // instant en haut à gauche de la page.
+  useLayoutEffect(() => {
+    if (!ouvert) {
+      setPosition(null)
+      return
+    }
+    const placer = () => {
+      const r = declencheur.current?.getBoundingClientRect()
+      if (!r) return
+      // Le panneau est absolu dans son enveloppe fixe : c'est LUI qu'on
+      // mesure, l'enveloppe n'a pas de largeur.
+      const largeur = (panneau.current?.firstElementChild as HTMLElement | null)?.offsetWidth ?? 0
+      const vue = declencheur.current?.ownerDocument.defaultView
+      const droite = vue ? vue.innerWidth : r.right + largeur
+      // Le décalage de 5 px sous le déclencheur est celui de .zv-popover et
+      // de .zv-menu (top: calc(100% + 5px)) : l'enveloppe se pose au ras.
+      setPosition({ top: r.bottom, left: Math.max(0, Math.min(r.left, droite - largeur - 8)) })
+    }
+    placer()
+    const vue = declencheur.current?.ownerDocument.defaultView
+    vue?.addEventListener('resize', placer)
+    // `true` : le défilement du CADRE du tableau, pas seulement de la page.
+    vue?.addEventListener('scroll', placer, true)
+    return () => {
+      vue?.removeEventListener('resize', placer)
+      vue?.removeEventListener('scroll', placer, true)
+    }
+  }, [ouvert])
+
+  useEffect(() => {
+    if (!ouvert) return
+    const doc = declencheur.current?.ownerDocument ?? document
+    const dehors = (e: MouseEvent) => {
+      const cible = e.target as Node
+      if (!panneau.current?.contains(cible) && !declencheur.current?.contains(cible)) setOuvert(false)
+    }
+    const echap = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') fermer()
+    }
+    doc.addEventListener('mousedown', dehors)
+    doc.addEventListener('keydown', echap)
+    return () => {
+      doc.removeEventListener('mousedown', dehors)
+      doc.removeEventListener('keydown', echap)
+    }
+  }, [ouvert, fermer])
+
+  // Le focus entre dans le panneau une fois PLACÉ : avant, il est en
+  // `visibility: hidden`, et le navigateur refuse le focus à un élément
+  // invisible. La frappe partait alors dans le vide. L'option choisie
+  // d'abord, sinon le premier champ ou la première option.
+  const place = position !== null
+  useEffect(() => {
+    if (!ouvert || !place) return
+    const p = panneau.current
+    ;(p?.querySelector<HTMLElement>('[aria-selected="true"]') ?? p?.querySelector<HTMLElement>('input, button'))?.focus()
+  }, [ouvert, place])
+
+  return (
+    <>
+      <button
+        ref={declencheur}
+        type="button"
+        className="zv-input zv-input--trigger zv-table__filtre"
+        data-vide={vide ? 'oui' : undefined}
+        aria-expanded={ouvert}
+        aria-haspopup={role}
+        aria-label={`${libelle} : ${resume}`}
+        onClick={() => setOuvert((o) => !o)}
+      >
+        <span className="zv-colhead__label">{resume}</span>
+        <Icon nom={icone} taille="sm" discret />
+      </button>
+      {ouvert &&
+        createPortal(
+          <div
+            ref={panneau}
+            className="zv-grille__flottant"
+            style={position ? { top: position.top, left: position.left } : { visibility: 'hidden' }}
+          >
+            {contenu(fermer)}
+          </div>,
+          declencheur.current?.ownerDocument.body ?? document.body,
+        )}
+    </>
+  )
+}
+
+/** Les flèches promènent le focus d'une option à l'autre, Origine et Fin
+ *  vont aux extrémités : le parcours clavier d'une liste, que le <select>
+ *  natif donnait et qu'une liste dessinée doit rendre. */
+function parcourirListe(e: EvenementClavier<HTMLElement>) {
+  const options = [...e.currentTarget.querySelectorAll<HTMLElement>('[role="option"]')]
+  const i = options.indexOf(e.target as HTMLElement)
+  const vers =
+    e.key === 'ArrowDown' ? i + 1 : e.key === 'ArrowUp' ? i - 1 : e.key === 'Home' ? 0 : e.key === 'End' ? options.length - 1 : null
+  if (vers === null) return
+  e.preventDefault()
+  options[Math.max(0, Math.min(options.length - 1, vers))]?.focus()
+}
+
+function FiltreChoix<T>({ colonne, nom, t }: { colonne: Column<T, unknown>; nom: string; t: TextesGrille }) {
+  const filtre = colonne.getFilterValue() as ValeurFiltre | undefined
+  // Les valeurs du modèle FACETTÉ : celles que les autres filtres laissent
+  // encore passer. Une option qui ne rendrait aucune ligne n'est pas offerte.
+  const options = [...colonne.getFacetedUniqueValues().keys()]
+    .filter((v) => v != null && v !== '')
+    .map(String)
+    .sort((a, b) => a.localeCompare(b, 'fr'))
+  const valeur = filtre?.type === 'choix' ? filtre.valeur : ''
+  // L'option choisie reste dans la liste même si un autre filtre l'a fait
+  // disparaître : sinon la liste afficherait « Tous » en mentant.
+  if (valeur && !options.includes(valeur)) options.unshift(valeur)
+
+  return (
+    <FiltreFlottant
+      libelle={t.filtrerColonne(nom)}
+      resume={valeur || t.tous}
+      vide={!valeur}
+      icone="chevron-bas"
+      role="listbox"
+      panneau={(fermer) => (
+        <Menu role="listbox" aria-label={t.filtrerColonne(nom)} className="zv-grille__liste" onKeyDown={parcourirListe}>
+          {['', ...options].map((o) => (
+            <MenuItem
+              key={o || '\u0000'}
+              actif={o === valeur}
+              onClick={() => {
+                colonne.setFilterValue({ type: 'choix', valeur: o })
+                fermer()
+              }}
+            >
+              {o || t.tous}
+            </MenuItem>
+          ))}
+        </Menu>
+      )}
+    />
+  )
+}
+
+function FiltrePlage<T>({
+  colonne,
+  type,
+  nom,
+  t,
+}: {
+  colonne: Column<T, unknown>
+  type: 'nombre' | 'date'
+  nom: string
+  t: TextesGrille
+}) {
+  const idChamp = useId()
+  const filtre = colonne.getFilterValue() as ValeurFiltre | undefined
+  const [a, b] =
+    filtre?.type === 'nombre' ? [filtre.min, filtre.max] : filtre?.type === 'date' ? [filtre.du, filtre.au] : ['', '']
+  const ecrire = (bas: string, haut: string) =>
+    colonne.setFilterValue(
+      type === 'nombre' ? { type, min: bas, max: haut } : { type, du: bas, au: haut },
+    )
+
+  // Ce qui est TAPÉ, distinct de ce qui est APPLIQUÉ : une date en cours de
+  // saisie s'affiche dans le champ sans filtrer le tableau. Resynchronisé
+  // quand le filtre change d'ailleurs (« Réinitialiser la vue »).
+  const [brouillon, setBrouillon] = useState<[string, string]>([a, b])
+  useEffect(() => {
+    setBrouillon([a, b])
+  }, [a, b])
+  const saisir = (bas: string, haut: string) => {
+    setBrouillon([bas, haut])
+    if (type === 'nombre' || (dateComplete(bas) && dateComplete(haut))) ecrire(bas, haut)
+  }
+  const resume = type === 'nombre' ? t.resumeNombres(a, b) : t.resumeDates(a, b)
+  const vide = !a && !b
+
+  const champ = (
+    valeur: string,
+    changer: (v: string) => void,
+    suffixe: string,
+    bornes: { min?: string; max?: string },
+  ) =>
+    type === 'date' ? (
+      <Input
+        id={idChamp + suffixe}
+        type="date"
+        value={valeur}
+        // Le calendrier natif grise ce qui rendrait la plage incohérente :
+        // « Au » ne peut pas précéder « Du ».
+        min={bornes.min || undefined}
+        max={bornes.max || undefined}
+        onChange={(e) => changer(e.target.value)}
+      />
+    ) : (
+      <Input
+        id={idChamp + suffixe}
+        // Pas `type="number"` : il accepte « e », « + » et refuse la virgule
+        // française selon la langue du système. Le clavier numérique vient
+        // d'`inputMode`, le refus des lettres de `saisieNombre`.
+        inputMode="decimal"
+        autoComplete="off"
+        value={valeur}
+        onChange={(e) => changer(saisieNombre(e.target.value))}
+      />
+    )
+
+  return (
+    <FiltreFlottant
+      libelle={t.filtrerColonne(nom)}
+      resume={resume}
+      vide={vide}
+      icone={type === 'date' ? 'calendrier' : 'filtre'}
+      role="dialog"
+      panneau={() => (
+        <Popover className="zv-grille__plage" role="dialog" aria-label={t.filtrerColonne(nom)}>
+          {type === 'date' && (
+            <div className="zv-grille__periodes" role="group" aria-label={t.periodes}>
+              {(['aujourdhui', 'septJours', 'trenteJours', 'ceMois', 'cetteAnnee'] as const).map((cle) => {
+                const [du, au] = periodes(new Date())[cle]
+                return (
+                  // `role="button"` : ces raccourcis sont des ACTIONS, pas
+                  // les options d'une liste (le rôle par défaut de MenuItem).
+                  <MenuItem
+                    key={cle}
+                    role="button"
+                    actif={a === du && b === au}
+                    aria-selected={undefined}
+                    aria-pressed={a === du && b === au}
+                    onClick={() => saisir(du, au)}
+                  >
+                    {t[cle]}
+                  </MenuItem>
+                )
+              })}
+            </div>
+          )}
+          <div className="zv-grille__bornes">
+            <Field label={type === 'date' ? t.du : t.min} htmlFor={idChamp + 'a'}>
+              {champ(brouillon[0], (v) => saisir(v, brouillon[1]), 'a', { max: brouillon[1] })}
+            </Field>
+            <Field label={type === 'date' ? t.au : t.max} htmlFor={idChamp + 'b'}>
+              {champ(brouillon[1], (v) => saisir(brouillon[0], v), 'b', { min: brouillon[0] })}
+            </Field>
+          </div>
+          {!vide && (
+            <Button variante="fantome" compact icone="fermer" onClick={() => saisir('', '')}>
+              {t.effacer}
+            </Button>
+          )}
+        </Popover>
+      )}
+    />
+  )
+}
+
+/* ─── La grille ──────────────────────────────────────────────────────── */
+
+export function DataGrid<T>({
+  tableId,
+  data,
+  columns,
+  onRowClick,
+  ligneActive,
+  getRowId,
+  selection = false,
+  onSelectionChange,
+  parPage = 25,
+  recherche = true,
+  filtres = true,
+  exportCsv = true,
+  vueInitiale,
+  vide,
+  outils,
+  textes,
+  className,
+}: DataGridProps<T>) {
+  const t: TextesGrille = { ...TEXTES_GRILLE, ...textes }
+  const ids = useMemo(
+    () => columns.map((c) => idDeColonne(c)).filter((id): id is string => id != null),
+    [columns],
+  )
+  const cleIds = ids.join('\u0000')
+
+  // La vue par défaut ne change qu'avec les colonnes : stable sinon, pour
+  // que le hook ne la prenne pas pour une vue nouvelle à chaque rendu.
+  const defaut = useMemo<VueGrille>(
+    () => ({
+      columnOrder: ids,
+      columnVisibility: Object.fromEntries((vueInitiale?.masquees ?? []).map((id) => [id, false])),
+      columnSizing: {},
+      columnPinning: {
+        left: vueInitiale?.epingleesGauche ?? [],
+        right: vueInitiale?.epingleesDroite ?? [],
+      },
+      sorting: vueInitiale?.tri ?? [],
+      pageSize: parPage || TAILLES_PAGE[0],
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [cleIds, JSON.stringify(vueInitiale ?? null), parPage],
+  )
+
+  const reconcilier = useCallback(
+    (lu: unknown, d: VueGrille) => reconcilierVue(lu, d, ids),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [cleIds],
+  )
+  const [vue, setVue, reinitialiserVue] = usePersistedState<VueGrille>(
+    `table:${tableId}:v1`,
+    defaut,
+    reconcilier,
+  )
+
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+  const [globalFilter, setGlobalFilter] = useState('')
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [pageIndex, setPageIndex] = useState(0)
+
+  const champ =
+    <K extends keyof VueGrille>(k: K): OnChangeFn<VueGrille[K]> =>
+    (u) =>
+      setVue((v) => ({ ...v, [k]: appliquer(u, v[k]) }))
+
+  // La colonne de cases est épinglée à gauche, toujours, et n'entre pas dans
+  // la vue enregistrée : elle dépend de la prop, pas de l'utilisateur.
+  const pinning: ColumnPinningState = {
+    left: selection ? [COLONNE_SELECTION, ...(vue.columnPinning.left ?? [])] : vue.columnPinning.left,
+    right: vue.columnPinning.right,
+  }
+  const pagination: PaginationState = {
+    pageIndex,
+    pageSize: parPage === false ? Math.max(data.length, 1) : vue.pageSize,
+  }
+
+  const colonnes = useMemo<ColumnDef<T, any>[]>(() => {
+    const avecFiltre = columns.map((c) => (c.filterFn ? c : { ...c, filterFn: filtreGrille }))
+    return selection ? [colonneSelection<T>(t), ...avecFiltre] : avecFiltre
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [columns, selection, t.toutSelectionner, t.selectionnerLigne])
+
+  const table = useReactTable<T>({
+    data,
+    columns: colonnes,
+    getRowId,
+    state: {
+      columnOrder: vue.columnOrder,
+      columnVisibility: vue.columnVisibility,
+      columnSizing: vue.columnSizing,
+      columnPinning: pinning,
+      sorting: vue.sorting,
+      columnFilters,
+      globalFilter,
+      rowSelection,
+      pagination,
+    },
+    defaultColumn: { size: 150, minSize: 60 },
+    onColumnOrderChange: champ('columnOrder'),
+    onColumnVisibilityChange: champ('columnVisibility'),
+    onColumnSizingChange: champ('columnSizing'),
+    onSortingChange: champ('sorting'),
+    onColumnPinningChange: (u) =>
+      setVue((v) => {
+        const actuel = {
+          left: selection ? [COLONNE_SELECTION, ...(v.columnPinning.left ?? [])] : v.columnPinning.left,
+          right: v.columnPinning.right,
+        }
+        const n = appliquer(u, actuel)
+        return {
+          ...v,
+          columnPinning: {
+            left: (n.left ?? []).filter((id) => id !== COLONNE_SELECTION),
+            right: (n.right ?? []).filter((id) => id !== COLONNE_SELECTION),
+          },
+        }
+      }),
+    onColumnFiltersChange: setColumnFilters,
+    onGlobalFilterChange: setGlobalFilter,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: (u) => {
+      const n = appliquer(u, pagination)
+      setPageIndex(n.pageIndex)
+      if (parPage !== false && n.pageSize !== vue.pageSize) {
+        setVue((v) => ({ ...v, pageSize: n.pageSize }))
+      }
+    },
+    enableRowSelection: selection,
+    enableMultiSort: true,
+    enableColumnResizing: true,
+    columnResizeMode: 'onChange',
+    enableColumnPinning: true,
+    globalFilterFn: 'includesString',
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+  })
+
+  // La sélection se remonte en LIGNES, pas en identifiants : c'est ce que
+  // l'app veut traiter (supprimer, exporter, assigner).
+  const surSelection = useRef(onSelectionChange)
+  surSelection.current = onSelectionChange
+  useEffect(() => {
+    surSelection.current?.(table.getSelectedRowModel().rows.map((r) => r.original))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rowSelection])
+
+  // Une page au-delà de la dernière (filtre resserré, données rechargées)
+  // afficherait la ligne d'absence alors que des lignes existent.
+  const nbPages = table.getPageCount()
+  useEffect(() => {
+    if (pageIndex > 0 && pageIndex >= nbPages) setPageIndex(Math.max(0, nbPages - 1))
+  }, [pageIndex, nbPages])
+
+  const reinitialiser = () => {
+    reinitialiserVue()
+    setColumnFilters([])
+    setGlobalFilter('')
+    setPageIndex(0)
+  }
+
+  /* Glisser-déposer des en-têtes. */
+  const idDnd = useId()
+  const capteurs = useSensors(
+    // 4 px avant de saisir : sans ce seuil, un simple clic sur la poignée
+    // démarre un déplacement.
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  )
+  const deplacables = table.getCenterVisibleLeafColumns().map((c) => c.id)
+  const nomDe = (id: UniqueIdentifier) => {
+    const c = table.getColumn(String(id))
+    return c ? libelleColonne(c) : String(id)
+  }
+  const annonces: Announcements = {
+    onDragStart: ({ active }) => t.dndSaisie(nomDe(active.id)),
+    onDragOver: ({ active, over }) =>
+      over ? t.dndSurvol(nomDe(active.id), nomDe(over.id)) : t.dndHors(nomDe(active.id)),
+    onDragEnd: ({ active, over }) =>
+      over ? t.dndPose(nomDe(active.id), nomDe(over.id)) : t.dndReposee(nomDe(active.id)),
+    onDragCancel: ({ active }) => t.dndAnnule(nomDe(active.id)),
+  }
+  const finDeplacement = ({ active, over }: DragEndEvent) => {
+    if (!over || active.id === over.id) return
+    table.setColumnOrder((ordre) => {
+      const depuis = ordre.indexOf(String(active.id))
+      const vers = ordre.indexOf(String(over.id))
+      return depuis < 0 || vers < 0 ? ordre : arrayMove(ordre, depuis, vers)
+    })
+  }
+
+  /* Rangée de filtres. La famille de chaque colonne se déduit des données
+   * BRUTES (le modèle de base, pas le filtré) : sinon un filtre qui ne laisse
+   * qu'une valeur ferait changer la colonne de famille sous le doigt. */
+  const lignesBase = table.getCoreRowModel().flatRows
+  const types = useMemo(() => {
+    const sortie: Record<string, TypeFiltre | false> = {}
+    for (const c of table.getAllLeafColumns()) {
+      if (c.id === COLONNE_SELECTION) continue
+      sortie[c.id] = typeDeFiltre(
+        c.columnDef.meta,
+        lignesBase.map((l) => l.getValue(c.id)),
+      )
+    }
+    return sortie
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lignesBase, colonnes])
+  const filtrables = table.getVisibleLeafColumns().some((c) => c.getCanFilter() && types[c.id])
+  const rangeeFiltres =
+    filtres && filtrables ? (
+      <div className="zv-table__head zv-table__head--filtres">
+        {colonnesAffichees(table).map((c) => {
+          const pin = epinglage(c, table)
+          const type = c.getCanFilter() ? types[c.id] : false
+          return (
+            <div key={c.id} className={cx('zv-cell', pin.classes)} style={pin.style}>
+              {type && <FiltreColonne colonne={c} type={type} t={t} />}
+            </div>
+          )
+        })}
+      </div>
+    ) : null
+
+  const total = table.getPrePaginationRowModel().rows.length
+  const { pageIndex: page, pageSize } = table.getState().pagination
+  const debut = total === 0 ? 0 : page * pageSize + 1
+  const fin = Math.min(total, (page + 1) * pageSize)
+  const nbChoisies = Object.keys(rowSelection).length
+  const filtre = columnFilters.length > 0 || globalFilter !== ''
+
+  return (
+    <div className={cx('zv-grille', className)}>
+      <div className="zv-grille__outils">
+        {recherche ? (
+          <Search
+            value={globalFilter}
+            onChange={(e) => setGlobalFilter(e.target.value)}
+            placeholder={t.rechercher}
+            aria-label={t.rechercher}
+          />
+        ) : (
+          <span />
+        )}
+        <div className="zv-grille__actions">
+          {selection && nbChoisies > 0 && (
+            <Meta>{t.choisies(nbChoisies)}</Meta>
+          )}
+          {outils}
+          <MenuColonnes table={table} t={t} />
+          {exportCsv !== false && (
+            <Button
+              variante="fantome"
+              compact
+              icone="telecharger"
+              onClick={() => telecharger(versCsv(table), typeof exportCsv === 'string' ? exportCsv : tableId)}
+            >
+              {t.exporter}
+            </Button>
+          )}
+          <Button variante="fantome" compact icone="rembobiner" onClick={reinitialiser}>
+            {t.reinitialiser}
+          </Button>
+        </div>
+      </div>
+
+      <DndContext
+        id={idDnd}
+        sensors={capteurs}
+        collisionDetection={closestCenter}
+        modifiers={[axeHorizontal]}
+        onDragEnd={finDeplacement}
+        accessibility={{
+          announcements: annonces,
+          screenReaderInstructions: {
+            draggable: t.dndInstructions,
+          },
+        }}
+      >
+        <SortableContext items={deplacables} strategy={horizontalListSortingStrategy}>
+          <DataTable
+            table={table}
+            className="zv-table--grille"
+            celluleEntete={(p) => <EnteteColonne {...p} t={t} />}
+            sousEntete={rangeeFiltres}
+            onRowClick={onRowClick}
+            ligneActive={ligneActive}
+            vide={
+              vide ?? (
+                <Empty>
+                  {data.length === 0 ? t.aucuneDonnee : filtre ? t.aucunResultat : t.aucuneLigne}
+                </Empty>
+              )
+            }
+          />
+        </SortableContext>
+      </DndContext>
+
+      {parPage !== false && (
+        <Pager pied aria-label={t.pagination}>
+          <Meta>{t.compte(debut, fin, total)}</Meta>
+          <div className="zv-grille__pied">
+            <SelectMenu
+              className="zv-grille__taille"
+              label={t.lignesParPage}
+              valeur={String(pageSize)}
+              options={TAILLES_PAGE.map((taille) => ({ valeur: String(taille), label: t.parPage(taille) }))}
+              onChange={(v) => table.setPageSize(Number(v))}
+            />
+            <PagerArrow
+              aria-label={t.pagePrecedente}
+              desactive={!table.getCanPreviousPage()}
+              onClick={() => table.getCanPreviousPage() && table.previousPage()}
+            >
+              ‹
+            </PagerArrow>
+            <Meta>{t.page(nbPages === 0 ? 0 : page + 1, nbPages)}</Meta>
+            <PagerArrow
+              aria-label={t.pageSuivante}
+              desactive={!table.getCanNextPage()}
+              onClick={() => table.getCanNextPage() && table.nextPage()}
+            >
+              ›
+            </PagerArrow>
+          </div>
+        </Pager>
+      )}
+    </div>
+  )
+}