@zevra/ui 0.43.1 → 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,
@@ -75,6 +76,7 @@ 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 }
@@ -94,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
 
@@ -114,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
@@ -169,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',
@@ -234,13 +265,65 @@ export interface DataGridProps<T> {
    *  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.
@@ -347,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 }
 
@@ -398,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)
@@ -426,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 === '')
 
@@ -685,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,
@@ -717,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' },
   }
 }
@@ -778,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()
@@ -978,59 +1087,94 @@ function FiltreFlottant({
   )
 }
 
-/** 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()]
+  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'))
-  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)
+    .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={valeur || t.tous}
-      vide={!valeur}
+      resume={resume}
+      vide={choisies.length === 0}
       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>
-      )}
+      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,
@@ -1155,6 +1299,23 @@ export function DataGrid<T>({
   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,
@@ -1203,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 =
@@ -1211,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 = {
@@ -1222,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,
@@ -1234,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,
@@ -1245,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)
@@ -1265,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)
@@ -1273,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(),
@@ -1292,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.
@@ -1303,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 }),
   )
@@ -1357,94 +1571,170 @@ 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 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 total = table.getPrePaginationRowModel().rows.length
+  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}
-            ligneActive={ligneActive}
-            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}>