@zevra/ui 0.43.0 → 0.44.0

package/react/grille.tsx

@@ -18,6 +18,7 @@ import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useSta
 import { createPortal } from 'react-dom'
 import type {
   CSSProperties,
+  DragEvent as EvenementGlisser,
   KeyboardEvent as EvenementClavier,
   PointerEvent as EvenementPointeur,
   ReactNode,
@@ -39,12 +40,12 @@ import {
   type FilterFn,
   type OnChangeFn,
   type PaginationState,
-  type Row,
   type RowSelectionState,
   type SortingState,
   type Table as TableTanstack,
   type Updater,
   type VisibilityState,
+  type Row,
 } from '@tanstack/react-table'
 import {
   DndContext,
@@ -70,10 +71,12 @@ import { DataTable, colonnesAffichees, epinglage, type CelluleEnteteProps } from
 import { usePersistedState } from './use-persisted-state.js'
 import { Button } from './actions.js'
 import { Icon, IconButton } from './icon.js'
-import { Checkbox, Field, Input, Search, Select, SelectAnchor } from './forms.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 { Mono } from './typography.js'
 import { cx } from './cx.js'
 
 export { usePersistedState }
@@ -93,6 +96,25 @@ export interface VueGrille {
   pageSize: number
 }
 
+/** La sélection tenue par l'APP : les clés cochées lui appartiennent, elles
+ *  survivent au changement de filtre, et ce sont elles que ses actions
+ *  consomment. La case maîtresse porte sur les lignes AFFICHÉES, jamais sur
+ *  ce qu'un filtre garde hors de l'écran, qui reste coché tel quel. */
+export interface SelectionGrille<T> {
+  choisies: ReadonlySet<string>
+  onChoisir: (cles: Set<string>) => void
+  /** La clé retenue pour une ligne. Par défaut : son identifiant
+   *  (`getRowId`). */
+  cle?: (ligne: T) => string
+  /** Ce que le lecteur d'écran annonce pour la case d'une ligne. */
+  label?: (ligne: T) => string
+  /** Les lignes qui ont une case ; les autres n'en ont pas, et la case
+   *  maîtresse les ignore. */
+  selectionnable?: (ligne: T) => boolean
+  /** Cases inertes le temps d'une opération en cours. */
+  desactivee?: boolean
+}
+
 /** Les tailles de page proposées au pied. */
 export const TAILLES_PAGE = [25, 50, 100] as const
 
@@ -113,6 +135,11 @@ export interface TextesGrille {
   min: string
   max: string
   effacer: string
+  effacerFiltres: string
+  toutAfficher: string
+  aucun: string
+  rechercherValeur: string
+  aucuneValeur: string
   /** Raccourcis de période du filtre de dates. */
   periodes: string
   aujourdhui: string
@@ -168,6 +195,11 @@ export const TEXTES_GRILLE: TextesGrille = {
   min: 'Min.',
   max: 'Max.',
   effacer: 'Effacer le filtre',
+  effacerFiltres: 'Effacer les filtres',
+  toutAfficher: 'Tout afficher',
+  aucun: 'Aucun',
+  rechercherValeur: 'Rechercher une valeur',
+  aucuneValeur: 'Aucune valeur.',
   periodes: 'Périodes',
   aujourdhui: "Aujourd'hui",
   septJours: '7 derniers jours',
@@ -227,17 +259,71 @@ export interface DataGridProps<T> {
   /** 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
+  /** Une colonne de cases, épinglée à gauche. `true` : la grille tient les
+   *  cases et remonte les lignes par `onSelectionChange`. Un objet : l'APP
+   *  tient l'ensemble des clés cochées (elles survivent à un filtre, à une
+   *  page, à un rechargement), voir `SelectionGrille`. */
+  selection?: boolean | SelectionGrille<T>
   onSelectionChange?: (lignes: T[]) => void
+  /** Tri délégué au SERVEUR : sur une liste paginée côté serveur, trier dans
+   *  le navigateur ne trierait que la page affichée. La grille n'ordonne
+   *  plus rien, elle dit seulement quel tri est demandé. */
+  triServeur?: { tri: SortingState; onTri: (tri: SortingState) => void }
+  /** Clic droit sur une ligne : l'app ouvre son menu contextuel. */
+  onRowContextMenu?: (ligne: T, x: number, y: number) => void
+  /** Double clic sur une ligne : « ouvrir pour de bon ». */
+  onRowDoubleClick?: (ligne: T) => void
+  /** La ligne se glisse (glisser-déposer natif) : l'app remplit le
+   *  `dataTransfer`. */
+  onRowDragStart?: (ligne: T, e: EvenementGlisser<HTMLDivElement>) => void
+  /** Une ligne de SAISIE en tête du corps : un contenu par identifiant de
+   *  colonne. Elle suit l'ordre, la visibilité et l'épinglage des colonnes. */
+  ligneSaisie?: Partial<Record<string, ReactNode>>
+  /** Des intitulés intercalés quand la clé change d'une ligne à l'autre (une
+   *  année, un mois). N'a de sens que si le tri suit cette clé. */
+  groupe?: { de: (ligne: T) => string; rendu?: (cle: string, lignes: T[]) => ReactNode }
+  /** Des lignes qui restent en tête QUEL QUE SOIT le tri : le rang 0 d'abord,
+   *  puis 1, etc., chacun trié comme le reste (les pièces épinglées). */
+  rang?: (ligne: T) => number
+  /** Une rangée de totaux sous les lignes, calculée sur les lignes
+   *  AFFICHÉES (après recherche et filtres) : un contenu par colonne. */
+  pied?: (lignes: T[]) => Partial<Record<string, ReactNode>>
+  /** Rangées resserrées : un tableau secondaire dans une fiche. */
+  dense?: boolean
+  /** La grille REMPLIT son parent (colonne flex à hauteur bornée) : seules
+   *  les lignes défilent, la barre, les intitulés et les filtres restent. */
+  remplir?: boolean
+  /** Sous les lignes, dans la zone qui défile : le déclencheur d'une liste
+   *  infinie, qui charge la suite en entrant dans l'écran. */
+  apresLignes?: ReactNode
+  /** Enveloppe le CADRE du tableau seul (pas la barre) : un voile de
+   *  rechargement qui laisse la recherche et les filtres utilisables. */
+  envelopperTableau?: (tableau: ReactNode) => ReactNode
+  /** La barre d'outils (recherche, colonnes, export). Par défaut : oui.
+   *  Sans elle, les filtres de colonne restent. */
+  barre?: boolean
+  /** Un champ de recherche fourni par l'app, à la place de celui de la
+   *  grille : une recherche faite par le serveur, par exemple. */
+  champRecherche?: ReactNode
+  /** Visibilité des colonnes TENUE PAR L'APP, quand son bouton « Colonnes »
+   *  vit hors de la grille. Sinon, la vue enregistrée la tient. */
+  visibilite?: VisibilityState
+  onVisibilite?: (u: Updater<VisibilityState>) => void
+  /** Les lignes affichées (après recherche, filtres et tri) et si un filtre
+   *  est actif : ce qu'un téléchargement de l'app doit reprendre. Appelé
+   *  quand leur ensemble change, pas à chaque rendu. */
+  onLignesAffichees?: (lignes: T[], filtre: boolean) => 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
+  /** Champ de recherche sur toutes les colonnes. Par défaut : oui. Une
+   *  chaîne en est le texte d'invite. */
+  recherche?: boolean | string
   /** 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.
@@ -344,7 +430,7 @@ 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: 'choix'; valeurs: string[] }
   | { type: 'nombre'; min: string; max: string }
   | { type: 'date'; du: string; au: string }
 
@@ -395,15 +481,23 @@ const nombre = (s: string): number | null => {
   return Number.isFinite(n) ? n : null
 }
 
+/** Sans casse ni accents : « decision » trouve « Décision ». */
+export function normaliser(v: unknown): string {
+  return String(v ?? '')
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+}
+
 /** 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())
+      return normaliser(brut).includes(normaliser(filtre.valeur.trim()))
     case 'choix':
-      return String(brut ?? '') === filtre.valeur
+      return filtre.valeurs.includes(String(brut ?? ''))
     case 'nombre': {
       const v = typeof brut === 'number' ? brut : nombre(String(brut ?? ''))
       const min = nombre(filtre.min)
@@ -423,7 +517,7 @@ export const filtreGrille: FilterFn<any> = (ligne, colonne, filtre: ValeurFiltre
 filtreGrille.autoRemove = (f: ValeurFiltre | undefined) =>
   !f ||
   (f.type === 'texte' && f.valeur.trim() === '') ||
-  (f.type === 'choix' && f.valeur === '') ||
+  (f.type === 'choix' && f.valeurs.length === 0) ||
   (f.type === 'nombre' && f.min === '' && f.max === '') ||
   (f.type === 'date' && f.du === '' && f.au === '')
 
@@ -682,28 +776,34 @@ function PoigneeLargeur<T>({
 
 /* ─── Cases de sélection ─────────────────────────────────────────────── */
 
-function CaseTout<T>({ table, t }: { table: TableTanstack<T>; t: TextesGrille }) {
+type OptionsCases<T> = { current: SelectionGrille<T> | null }
+
+function CaseTout<T>({ table, t, options }: { table: TableTanstack<T>; t: TextesGrille; options: OptionsCases<T> }) {
   // 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.
+  // Sans elle, « 3 sur 40 cochées » ressemble à « aucune ».
   useEffect(() => {
     const caseTout = ref.current?.querySelector('input')
     if (caseTout) caseTout.indeterminate = partiel
   }, [partiel])
+  const aucune = !table.getPrePaginationRowModel().rows.some((r) => r.getCanSelect())
   return (
     <span ref={ref} className="zv-cell--case">
-    <Checkbox
-      checked={table.getIsAllRowsSelected()}
-      onChange={table.getToggleAllRowsSelectedHandler()}
-      aria-label={t.toutSelectionner}
-    />
+      <Checkbox
+        checked={table.getIsAllRowsSelected()}
+        disabled={aucune || options.current?.desactivee}
+        onChange={table.getToggleAllRowsSelectedHandler()}
+        aria-label={t.toutSelectionner}
+        title={t.toutSelectionner}
+      />
     </span>
   )
 }
 
-function colonneSelection<T>(t: TextesGrille): ColumnDef<T, any> {
+function colonneSelection<T>(t: TextesGrille, options: OptionsCases<T>): ColumnDef<T, any> {
   return {
     id: COLONNE_SELECTION,
     size: 40,
@@ -714,19 +814,22 @@ function colonneSelection<T>(t: TextesGrille): ColumnDef<T, any> {
     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}
-      />
-    ),
+    header: ({ table }) => <CaseTout table={table} t={t} options={options} />,
+    // Une ligne qui ne se sélectionne pas n'a PAS de case : une case grisée
+    // promettrait une action qui n'existe pas pour elle.
+    cell: ({ row }: { row: Row<T> }) =>
+      row.getCanSelect() ? (
+        <Checkbox
+          checked={row.getIsSelected()}
+          disabled={options.current?.desactivee}
+          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={options.current?.label?.(row.original) ?? t.selectionnerLigne}
+        />
+      ) : null,
     meta: { classe: 'zv-cell--case' },
   }
 }
@@ -775,6 +878,15 @@ function MenuColonnes<T>({ table, t }: { table: TableTanstack<T>; t: TextesGrill
         </Button>
         {ouvert && (
           <Menu role="group" aria-label={t.colonnesAffichees} className="zv-grille__menu">
+            {colonnes.some((c) => !c.getIsVisible()) && (
+              <Button
+                variante="fantome"
+                compact
+                onClick={() => table.setColumnVisibility((v) => Object.fromEntries(Object.keys(v).map((k) => [k, true])))}
+              >
+                {t.toutAfficher}
+              </Button>
+            )}
             {colonnes.map((c) => {
               const nom = libelleColonne(c)
               const cote = c.getIsPinned()
@@ -832,38 +944,10 @@ function FiltreColonne<T>({
   const nom = libelleColonne(colonne)
   const filtre = colonne.getFilterValue() as ValeurFiltre | undefined
 
-  if (type === 'choix') {
-    // 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 le <select> afficherait « Tous » en mentant.
-    if (valeur && !options.includes(valeur)) options.unshift(valeur)
-    return (
-      <Select
-        className="zv-table__filtre"
-        value={valeur}
-        onChange={(e) => colonne.setFilterValue({ type: 'choix', valeur: e.target.value })}
-        aria-label={t.filtrerColonne(nom)}
-      >
-        <option value="">{t.tous}</option>
-        {options.map((o) => (
-          <option key={o} value={o}>
-            {o}
-          </option>
-        ))}
-      </Select>
-    )
-  }
-
+  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"
@@ -876,55 +960,45 @@ function FiltreColonne<T>({
 }
 
 /**
- * Une plage (deux bornes) ne tient pas dans une cellule de 90 px : le champ
- * de la rangée RÉSUME la plage, et l'ouvre dans un popover.
+ * 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 POPOVER SORT DU CADRE, par un portail. `.zv-table` défile
- * horizontalement, et `overflow-x: auto` force `overflow-y` : un popover
+ * ⚠️ 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 donc rendu dans le <body> et placé sous
- * son déclencheur, en coordonnées d'écran.
+ * 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 FiltrePlage<T>({
-  colonne,
-  type,
-  nom,
-  t,
+function FiltreFlottant({
+  libelle,
+  resume,
+  vide,
+  icone,
+  role,
+  panneau: contenu,
 }: {
-  colonne: Column<T, unknown>
-  type: 'nombre' | 'date'
-  nom: string
-  t: TextesGrille
+  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 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 },
-    )
+  const fermer = useCallback(() => {
+    setOuvert(false)
+    declencheur.current?.focus()
+  }, [])
 
-  // 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
-
-  // Placé AVANT l'affichage (layout effect) : sinon le popover apparaît un
+  // Placé AVANT l'affichage (layout effect) : sinon le panneau apparaît un
   // instant en haut à gauche de la page.
   useLayoutEffect(() => {
     if (!ouvert) {
@@ -939,8 +1013,8 @@ function FiltrePlage<T>({
       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
-      // (top: calc(100% + 5px)) : l'enveloppe se pose au ras du champ.
+      // 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()
@@ -962,10 +1036,7 @@ function FiltrePlage<T>({
       if (!panneau.current?.contains(cible) && !declencheur.current?.contains(cible)) setOuvert(false)
     }
     const echap = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        setOuvert(false)
-        declencheur.current?.focus()
-      }
+      if (e.key === 'Escape') fermer()
     }
     doc.addEventListener('mousedown', dehors)
     doc.addEventListener('keydown', echap)
@@ -973,16 +1044,171 @@ function FiltrePlage<T>({
       doc.removeEventListener('mousedown', dehors)
       doc.removeEventListener('keydown', echap)
     }
-  }, [ouvert])
+  }, [ouvert, fermer])
 
-  // Le focus entre dans le premier champ une fois le panneau PLACÉ : avant,
-  // il est en `visibility: hidden`, et le navigateur refuse le focus à un
-  // élément invisible. La frappe partait alors dans le vide.
+  // 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) panneau.current?.querySelector('input')?.focus()
+    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,
+        )}
+    </>
+  )
+}
+
+function FiltreChoix<T>({ colonne, nom, t }: { colonne: Column<T, unknown>; nom: string; t: TextesGrille }) {
+  const filtre = colonne.getFilterValue() as ValeurFiltre | undefined
+  const choisies = filtre?.type === 'choix' ? filtre.valeurs : []
+  // Les valeurs du modèle FACETTÉ, avec leur nombre de lignes : celles que
+  // les autres filtres laissent encore passer. Une option qui ne rendrait
+  // aucune ligne n'est pas offerte, sauf si elle est déjà cochée : sinon
+  // la liste mentirait sur ce qui filtre.
+  const comptes = colonne.getFacetedUniqueValues()
+  const options = [...comptes.keys()]
+    .filter((v) => v != null && v !== '')
+    .map(String)
+    .sort((a, b) => a.localeCompare(b, 'fr', { numeric: true }))
+  for (const c of choisies) if (!options.includes(c)) options.unshift(c)
+  const ecrire = (valeurs: string[]) => colonne.setFilterValue({ type: 'choix', valeurs })
+  const resume = choisies.length === 0 ? t.tous : choisies.length === 1 ? (choisies[0] ?? t.tous) : `${choisies.length} / ${options.length}`
+
+  return (
+    <FiltreFlottant
+      libelle={t.filtrerColonne(nom)}
+      resume={resume}
+      vide={choisies.length === 0}
+      icone="chevron-bas"
+      role="dialog"
+      panneau={() => <ListeChoix options={options} comptes={comptes} choisies={choisies} ecrire={ecrire} nom={nom} t={t} />}
+    />
+  )
+}
+
+/** Plusieurs valeurs à la fois (« Acte » OU « Contrat ») : des cases, avec
+ *  le nombre de lignes de chacune, une recherche au-delà de huit options,
+ *  et « Tout » / « Aucun » sur ce que la recherche montre. */
+function ListeChoix({
+  options,
+  comptes,
+  choisies,
+  ecrire,
+  nom,
+  t,
+}: {
+  options: string[]
+  comptes: Map<unknown, number>
+  choisies: string[]
+  ecrire: (valeurs: string[]) => void
+  nom: string
+  t: TextesGrille
+}) {
+  const [q, setQ] = useState('')
+  const vues = q.trim() ? options.filter((o) => normaliser(o).includes(normaliser(q.trim()))) : options
+  return (
+    <Popover className="zv-grille__plage" role="dialog" aria-label={t.filtrerColonne(nom)}>
+      {options.length > 8 && (
+        <Search value={q} onChange={(e) => setQ(e.target.value)} placeholder={t.rechercherValeur} aria-label={t.rechercherValeur} />
+      )}
+      <div className="zv-grille__menu-ligne">
+        <Button variante="fantome" compact onClick={() => ecrire([...new Set([...choisies, ...vues])])}>
+          {t.tous}
+        </Button>
+        <Button variante="fantome" compact onClick={() => ecrire(choisies.filter((c) => !vues.includes(c)))}>
+          {t.aucun}
+        </Button>
+      </div>
+      <div className="zv-grille__liste" role="group" aria-label={t.filtrerColonne(nom)}>
+        {vues.map((o) => {
+          const pris = choisies.includes(o)
+          return (
+            <label key={o} className="zv-menu__item zv-grille__menu-case">
+              <Checkbox
+                checked={pris}
+                onChange={() => ecrire(pris ? choisies.filter((c) => c !== o) : [...choisies, o])}
+              />
+              <span className="zv-colhead__label">{o}</span>
+              <Meta taille="sm" discret className="zv-grille__compte">
+                {comptes.get(o) ?? 0}
+              </Meta>
+            </label>
+          )
+        })}
+        {vues.length === 0 && <Meta taille="sm">{t.aucuneValeur}</Meta>}
+      </div>
+      {choisies.length > 0 && (
+        <Button variante="fantome" compact icone="fermer" onClick={() => ecrire([])}>
+          {t.effacer}
+        </Button>
+      )}
+    </Popover>
+  )
+}
+
+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,
@@ -1014,61 +1240,51 @@ function FiltrePlage<T>({
     )
 
   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="dialog"
-        aria-label={`${t.filtrerColonne(nom)} : ${resume}`}
-        onClick={() => setOuvert((o) => !o)}
-      >
-        <span className="zv-colhead__label">{resume}</span>
-        <Icon nom={type === 'date' ? 'calendrier' : 'filtre'} taille="sm" discret />
-      </button>
-      {ouvert &&
-        createPortal(
-          <div
-            ref={panneau}
-            role="dialog"
-            aria-label={t.filtrerColonne(nom)}
-            className="zv-grille__flottant"
-            style={position ? { top: position.top, left: position.left } : { visibility: 'hidden' }}
-          >
-            <Popover className="zv-grille__plage">
-              {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]
-                    const actif = a === du && b === au
-                    return (
-                      <MenuItem key={cle} actif={actif} 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>
-          </div>,
-          declencheur.current?.ownerDocument.body ?? document.body,
-        )}
-    </>
+    <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>
+      )}
+    />
   )
 }
 
@@ -1079,9 +1295,27 @@ export function DataGrid<T>({
   data,
   columns,
   onRowClick,
+  ligneActive,
   getRowId,
   selection = false,
   onSelectionChange,
+  triServeur,
+  onRowContextMenu,
+  onRowDoubleClick,
+  onRowDragStart,
+  ligneSaisie,
+  groupe,
+  rang,
+  pied,
+  dense,
+  remplir,
+  apresLignes,
+  envelopperTableau,
+  barre = true,
+  champRecherche,
+  visibilite,
+  onVisibilite,
+  onLignesAffichees,
   parPage = 25,
   recherche = true,
   filtres = true,
@@ -1130,7 +1364,7 @@ export function DataGrid<T>({
 
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
   const [globalFilter, setGlobalFilter] = useState('')
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [selectionInterne, setSelectionInterne] = useState<RowSelectionState>({})
   const [pageIndex, setPageIndex] = useState(0)
 
   const champ =
@@ -1138,10 +1372,44 @@ export function DataGrid<T>({
     (u) =>
       setVue((v) => ({ ...v, [k]: appliquer(u, v[k]) }))
 
+  /* Sélection. Tenue par la grille (`true`) ou par l'app (un objet) : dans le
+   * second cas, l'état de TanStack se DÉDUIT des clés de l'app à chaque rendu,
+   * et chaque changement lui est rendu en clés. */
+  const avecCases = selection !== false
+  const externe = typeof selection === 'object' ? selection : null
+  const idLigne = (l: T, i: number) => getRowId?.(l, i) ?? String(i)
+  const cleDe = (l: T, i: number) => externe?.cle?.(l) ?? idLigne(l, i)
+  const rowSelection: RowSelectionState = externe
+    ? Object.fromEntries(
+        // Une ligne sans case ne se peint pas cochée, même si sa clé est
+        // dans l'ensemble de l'app : on la verrait choisie sans pouvoir
+        // la décocher.
+        data.flatMap((l, i) =>
+          externe.choisies.has(cleDe(l, i)) && externe.selectionnable?.(l) !== false
+            ? [[idLigne(l, i), true]]
+            : [],
+        ),
+      )
+    : selectionInterne
+  const surSelectionLignes: OnChangeFn<RowSelectionState> = (u) => {
+    if (!externe) return setSelectionInterne(u)
+    const n = appliquer(u, rowSelection)
+    const suite = new Set(externe.choisies)
+    // Seules les clés des lignes PRÉSENTES changent : une ligne cochée puis
+    // filtrée hors de l'écran, ou sur une autre page, reste cochée.
+    data.forEach((l, i) => {
+      if (externe.selectionnable?.(l) === false) return
+      const cle = cleDe(l, i)
+      if (n[idLigne(l, i)]) suite.add(cle)
+      else suite.delete(cle)
+    })
+    externe.onChoisir(suite)
+  }
+
   // 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,
+    left: avecCases ? [COLONNE_SELECTION, ...(vue.columnPinning.left ?? [])] : vue.columnPinning.left,
     right: vue.columnPinning.right,
   }
   const pagination: PaginationState = {
@@ -1149,11 +1417,17 @@ export function DataGrid<T>({
     pageSize: parPage === false ? Math.max(data.length, 1) : vue.pageSize,
   }
 
+  // L'option de sélection est lue AU RENDU par les cases : les colonnes n'ont
+  // pas à se recalculer à chaque case cochée.
+  const optionsCases = useRef(externe)
+  optionsCases.current = externe
   const colonnes = useMemo<ColumnDef<T, any>[]>(() => {
     const avecFiltre = columns.map((c) => (c.filterFn ? c : { ...c, filterFn: filtreGrille }))
-    return selection ? [colonneSelection<T>(t), ...avecFiltre] : avecFiltre
+    return avecCases ? [colonneSelection<T>(t, optionsCases), ...avecFiltre] : avecFiltre
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [columns, selection, t.toutSelectionner, t.selectionnerLigne])
+  }, [columns, avecCases, t.toutSelectionner, t.selectionnerLigne])
+
+  const visibiliteCourante = visibilite ?? vue.columnVisibility
 
   const table = useReactTable<T>({
     data,
@@ -1161,10 +1435,10 @@ export function DataGrid<T>({
     getRowId,
     state: {
       columnOrder: vue.columnOrder,
-      columnVisibility: vue.columnVisibility,
+      columnVisibility: visibiliteCourante,
       columnSizing: vue.columnSizing,
       columnPinning: pinning,
-      sorting: vue.sorting,
+      sorting: triServeur ? triServeur.tri : vue.sorting,
       columnFilters,
       globalFilter,
       rowSelection,
@@ -1172,13 +1446,18 @@ export function DataGrid<T>({
     },
     defaultColumn: { size: 150, minSize: 60 },
     onColumnOrderChange: champ('columnOrder'),
-    onColumnVisibilityChange: champ('columnVisibility'),
+    onColumnVisibilityChange: onVisibilite
+      ? (u) => onVisibilite((v) => appliquer(u, v))
+      : champ('columnVisibility'),
     onColumnSizingChange: champ('columnSizing'),
-    onSortingChange: champ('sorting'),
+    onSortingChange: triServeur
+      ? (u) => triServeur.onTri(appliquer(u, triServeur.tri))
+      : champ('sorting'),
+    manualSorting: Boolean(triServeur),
     onColumnPinningChange: (u) =>
       setVue((v) => {
         const actuel = {
-          left: selection ? [COLONNE_SELECTION, ...(v.columnPinning.left ?? [])] : v.columnPinning.left,
+          left: avecCases ? [COLONNE_SELECTION, ...(v.columnPinning.left ?? [])] : v.columnPinning.left,
           right: v.columnPinning.right,
         }
         const n = appliquer(u, actuel)
@@ -1192,7 +1471,7 @@ export function DataGrid<T>({
       }),
     onColumnFiltersChange: setColumnFilters,
     onGlobalFilterChange: setGlobalFilter,
-    onRowSelectionChange: setRowSelection,
+    onRowSelectionChange: surSelectionLignes,
     onPaginationChange: (u) => {
       const n = appliquer(u, pagination)
       setPageIndex(n.pageIndex)
@@ -1200,14 +1479,17 @@ export function DataGrid<T>({
         setVue((v) => ({ ...v, pageSize: n.pageSize }))
       }
     },
-    enableRowSelection: selection,
+    enableRowSelection: externe?.selectionnable
+      ? (r: Row<T>) => externe.selectionnable!(r.original)
+      : avecCases,
     enableMultiSort: true,
     enableColumnResizing: true,
     columnResizeMode: 'onChange',
     enableColumnPinning: true,
-    globalFilterFn: 'includesString',
+    // Sans casse ni accents, comme les filtres de colonne.
+    globalFilterFn: (ligne, colonne, q) => normaliser(ligne.getValue(colonne)).includes(normaliser(String(q).trim())),
     getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
+    getSortedRowModel: triServeur ? undefined : getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     getFacetedRowModel: getFacetedRowModel(),
@@ -1219,9 +1501,10 @@ export function DataGrid<T>({
   const surSelection = useRef(onSelectionChange)
   surSelection.current = onSelectionChange
   useEffect(() => {
+    if (externe) return
     surSelection.current?.(table.getSelectedRowModel().rows.map((r) => r.original))
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rowSelection])
+  }, [selectionInterne])
 
   // Une page au-delà de la dernière (filtre resserré, données rechargées)
   // afficherait la ligne d'absence alors que des lignes existent.
@@ -1230,18 +1513,22 @@ export function DataGrid<T>({
     if (pageIndex > 0 && pageIndex >= nbPages) setPageIndex(Math.max(0, nbPages - 1))
   }, [pageIndex, nbPages])
 
-  const reinitialiser = () => {
-    reinitialiserVue()
+  const effacerFiltres = () => {
     setColumnFilters([])
     setGlobalFilter('')
+  }
+  const reinitialiser = () => {
+    reinitialiserVue()
+    if (onVisibilite) onVisibilite(() => defaut.columnVisibility)
+    effacerFiltres()
     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.
+    // 4 px avant de saisir : sans ce seuil, un simple clic sur l'en-tête
+    // démarre un déplacement au lieu de trier.
     useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
   )
@@ -1284,110 +1571,182 @@ export function DataGrid<T>({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [lignesBase, colonnes])
   const filtrables = table.getVisibleLeafColumns().some((c) => c.getCanFilter() && types[c.id])
+
+  /** Une rangée qui suit les colonnes affichées (ordre, épinglage) : les
+   *  filtres, la ligne de saisie, le pied. */
+  const rangee = (classe: string, contenu: (c: Column<T, unknown>) => ReactNode) => (
+    <div className={classe}>
+      {colonnesAffichees(table).map((c) => {
+        const pin = epinglage(c, table)
+        const registre = c.columnDef.meta?.registre
+        return (
+          <div
+            key={c.id}
+            className={cx('zv-cell', registre === 'num' && 'zv-cell--num', registre === 'nom' && 'zv-cell--name', pin.classes)}
+            style={pin.style}
+          >
+            {contenu(c)}
+          </div>
+        )
+      })}
+    </div>
+  )
   const rangeeFiltres =
-    filtres && filtrables ? (
-      <div className="zv-table__head zv-table__head--filtres">
-        {colonnesAffichees(table).map((c) => {
-          const pin = epinglage(c, table)
+    filtres && filtrables
+      ? rangee('zv-table__head zv-table__head--filtres', (c) => {
           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
+          return type ? <FiltreColonne colonne={c} type={type} t={t} /> : null
+        })
+      : null
+
+  /* Lignes : le rang (des lignes gardées en tête), puis les intitulés de
+   * groupe et le pied, calculés sur ce qui est AFFICHÉ. */
+  const lignesTriees = table.getRowModel().rows
+  const lignesRendues = useMemo(() => {
+    if (!rang) return lignesTriees
+    return lignesTriees
+      .map((r, i) => ({ r, i, k: rang(r.original) }))
+      .sort((a, b) => a.k - b.k || a.i - b.i)
+      .map((x) => x.r)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lignesTriees, rang])
+  const affichees = table.getPrePaginationRowModel().rows.map((r) => r.original)
+  const filtre = columnFilters.length > 0 || globalFilter.trim() !== ''
 
-  const total = table.getPrePaginationRowModel().rows.length
+  const surAffichees = useRef(onLignesAffichees)
+  surAffichees.current = onLignesAffichees
+  const signatureAffichees = `${filtre}|${lignesRendues.map((r) => r.id).join('\u0001')}`
+  useEffect(() => {
+    surAffichees.current?.(lignesRendues.map((r) => r.original), filtre)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [signatureAffichees])
+
+  const intercalaire = groupe
+    ? (ligne: Row<T>, precedente: Row<T> | undefined) => {
+        const cle = groupe.de(ligne.original)
+        if (precedente && groupe.de(precedente.original) === cle) return null
+        const membres = lignesRendues.filter((r) => groupe.de(r.original) === cle).map((r) => r.original)
+        return (
+          <div className="zv-row zv-row--groupe">
+            {groupe.rendu ? groupe.rendu(cle, membres) : <Mono ton="label">{cle}</Mono>}
+          </div>
+        )
+      }
+    : undefined
+
+  const casesPied = pied && lignesRendues.length > 0 ? pied(affichees) : null
+  const total = affichees.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 !== ''
+  const nbChoisies = externe ? externe.choisies.size : Object.keys(selectionInterne).length
+
+  const tableau = (
+    <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}
+          onRowContextMenu={onRowContextMenu}
+          onRowDoubleClick={onRowDoubleClick}
+          onRowDragStart={onRowDragStart}
+          lignes={rang ? lignesRendues : undefined}
+          intercalaire={intercalaire}
+          avantLignes={
+            ligneSaisie ? rangee('zv-row zv-row--saisie', (c) => ligneSaisie[c.id] ?? null) : undefined
+          }
+          apresLignes={
+            <>
+              {casesPied && rangee('zv-row zv-row--pied', (c) => casesPied[c.id] ?? null)}
+              {apresLignes}
+            </>
+          }
+          dense={dense}
+          remplir={remplir}
+          vide={
+            vide && !filtre ? (
+              vide
+            ) : (
+              <Empty>
+                {data.length === 0 ? t.aucuneDonnee : filtre ? t.aucunResultat : t.aucuneLigne}{' '}
+                {filtre && (
+                  <Button variante="fantome" compact onClick={effacerFiltres}>
+                    {t.effacerFiltres}
+                  </Button>
+                )}
+              </Empty>
+            )
+          }
+        />
+      </SortableContext>
+    </DndContext>
+  )
 
   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}
+    <div className={cx('zv-grille', remplir && 'zv-grille--remplir', className)}>
+      {barre && (
+        <div className="zv-grille__outils">
+          {champRecherche ??
+            (recherche !== false ? (
+              <Search
+                value={globalFilter}
+                onChange={(e) => setGlobalFilter(e.target.value)}
+                placeholder={typeof recherche === 'string' ? recherche : t.rechercher}
+                aria-label={t.rechercher}
+              />
+            ) : (
+              <span />
+            ))}
+          <div className="zv-grille__actions">
+            {avecCases && nbChoisies > 0 && <Meta>{t.choisies(nbChoisies)}</Meta>}
+            {outils}
+            {!onVisibilite && <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>
-          )}
-          <Button variante="fantome" compact icone="rembobiner" onClick={reinitialiser}>
-            {t.reinitialiser}
-          </Button>
+          </div>
         </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}
-            vide={
-              vide ?? (
-                <Empty>
-                  {data.length === 0 ? t.aucuneDonnee : filtre ? t.aucunResultat : t.aucuneLigne}
-                </Empty>
-              )
-            }
-          />
-        </SortableContext>
-      </DndContext>
+      {envelopperTableau ? envelopperTableau(tableau) : tableau}
 
       {parPage !== false && (
         <Pager pied aria-label={t.pagination}>
           <Meta>{t.compte(debut, fin, total)}</Meta>
           <div className="zv-grille__pied">
-            <Select
+            <SelectMenu
               className="zv-grille__taille"
-              aria-label={t.lignesParPage}
-              value={pageSize}
-              onChange={(e) => table.setPageSize(Number(e.target.value))}
-            >
-              {TAILLES_PAGE.map((taille) => (
-                <option key={taille} value={taille}>
-                  {t.parPage(taille)}
-                </option>
-              ))}
-            </Select>
+              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()}