@zevra/ui 0.42.0 → 0.43.1

package/react/data-table.tsx

@@ -15,9 +15,11 @@
 // variables. Aucune classe nouvelle n'entre par cette porte : ce sont les
 // mêmes .zv-table / .zv-row / .zv-cell que le tableau écrit à la main.
 
-import type { ReactNode } from 'react'
+import { Fragment, type CSSProperties, type ReactNode } from 'react'
 import {
   flexRender,
+  type Column,
+  type Header,
   type RowData,
   type Table as TableTanstack,
 } from '@tanstack/react-table'
@@ -40,11 +42,38 @@ declare module '@tanstack/react-table' {
     /** Largeur de la colonne dans la grille (syntaxe grid-template-columns).
      *  Par défaut : `minmax(0, 1fr)`. */
     largeur?: string
+    /** Famille du filtre de colonne dans la grille (`DataGrid`). Déduite
+     *  des valeurs si absente : nombre, date (Date ou ISO), choix (peu de
+     *  valeurs qui se répètent), texte. `false` retire le filtre. */
+    filtre?: 'texte' | 'nombre' | 'date' | 'choix' | false
+    /** Classe de cellule supplémentaire, réservée au paquet (la case de
+     *  sélection de la grille). Une app n'y écrit rien : le CSS du paquet
+     *  est hors couche, une classe d'app y serait inerte. */
+    classe?: string
   }
 }
 
+/** Ce que reçoit un rendu d'en-tête substitué (`celluleEntete`) : la cellule
+ *  telle que le tableau l'aurait rendue, classes, style et contenu compris.
+ *  Le substitut l'ENVELOPPE (une poignée, un comportement), il ne la refait
+ *  pas : c'est ce qui garde l'en-tête identique d'un tableau à l'autre. */
+export interface CelluleEnteteProps<T> {
+  entete: Header<T, unknown>
+  className: string
+  style?: CSSProperties
+  'aria-sort'?: 'ascending' | 'descending'
+  children: ReactNode
+}
+
 export interface DataTableProps<T> {
   table: TableTanstack<T>
+  /** Remplace le rendu de chaque cellule d'en-tête. Sert à la grille
+   *  (poignées de déplacement et de largeur) ; un tableau simple n'en a
+   *  pas besoin. */
+  celluleEntete?: (props: CelluleEnteteProps<T>) => ReactNode
+  /** Rangée posée SOUS les intitulés, avant les lignes : les filtres de
+   *  colonne de la grille. */
+  sousEntete?: ReactNode
   /** Rendu à la place des lignes quand le modèle est vide. ⚠️ C'est la LIGNE
    *  d'absence qu'on attend ici (filtre trop étroit), pas l'écran d'absence :
    *  l'en-tête doit rester visible pour qu'on puisse élargir le filtre. */
@@ -52,20 +81,90 @@ export interface DataTableProps<T> {
   /** Appelé au clic sur une ligne. Sans lui, la ligne n'est pas cliquable :
    *  et elle ne doit pas en avoir l'air. */
   onRowClick?: (ligne: T) => void
+  /** La ligne dont on regarde le détail (l'aperçu ouvert à côté de la
+   *  liste). Elle porte un filet d'accent à gauche, distinct de la ligne
+   *  COCHÉE, qui est une sélection pour agir. */
+  ligneActive?: (ligne: T) => boolean
   className?: string
 }
 
-export function DataTable<T>({ table, vide, onRowClick, className }: DataTableProps<T>) {
-  const colonnes = table.getVisibleLeafColumns()
+/** MODE GRILLE : activé par `enableColumnResizing`. Les largeurs viennent
+ *  alors de TanStack en pixels (`size` = plancher, `columnSizing` = réglage
+ *  de l'utilisateur), et les colonnes épinglées collent au bord du cadre.
+ *  Sans ce réglage, le tableau rend exactement ce qu'il rendait avant. */
+function piste<T>(c: Column<T, unknown>, regle: boolean): string {
+  const taille = c.getSize()
+  // Réglée ou épinglée : fixe. Sinon : un plancher, et une part de l'espace
+  // libre PROPORTIONNELLE au plancher, pour que les colonnes larges restent
+  // larges en s'étirant.
+  return regle || c.getIsPinned() ? `${taille}px` : `minmax(${taille}px, ${taille}fr)`
+}
+
+/** Classes et décalage d'une cellule épinglée (en-tête, filtres ou corps).
+ *  Exporté pour la rangée de filtres de la grille, qui doit coller avec ses
+ *  colonnes. */
+export function epinglage<T>(
+  c: Column<T, unknown>,
+  table: TableTanstack<T>,
+): { classes: string | false; style?: CSSProperties } {
+  const cote = c.getIsPinned()
+  if (!cote) return { classes: false }
+  const voisines = cote === 'left' ? table.getLeftVisibleLeafColumns() : table.getRightVisibleLeafColumns()
+  const rang = voisines.findIndex((v) => v.id === c.id)
+  // Le bord : la dernière à gauche, la première à droite, celle qui touche
+  // ce qui défile.
+  const bord = cote === 'left' ? rang === voisines.length - 1 : rang === 0
+  const decalage =
+    cote === 'left'
+      ? { px: c.getStart('left'), gouttieres: rang }
+      : { px: c.getAfter('right'), gouttieres: voisines.length - 1 - rang }
+  const valeur = `calc(${decalage.px}px + ${decalage.gouttieres} * var(--zv-grille-gap))`
+  return {
+    classes: cx('zv-cell--pin', cote === 'right' && 'zv-cell--pin-droite', bord && 'zv-cell--pin-bord'),
+    style: cote === 'left' ? { left: valeur } : { right: valeur },
+  }
+}
+
+/** Les colonnes visibles DANS L'ORDRE DU RENDU : épinglées à gauche,
+ *  centrales, épinglées à droite. C'est l'ordre des en-têtes et des cellules ;
+ *  `getVisibleLeafColumns()`, lui, ignore l'épinglage, et un gabarit bâti
+ *  dessus donne à la première colonne la largeur d'une autre. */
+export function colonnesAffichees<T>(table: TableTanstack<T>): Column<T, unknown>[] {
+  return [
+    ...table.getLeftVisibleLeafColumns(),
+    ...table.getCenterVisibleLeafColumns(),
+    ...table.getRightVisibleLeafColumns(),
+  ]
+}
+
+export function DataTable<T>({
+  table,
+  vide,
+  onRowClick,
+  celluleEntete,
+  sousEntete,
+  ligneActive,
+  className,
+}: DataTableProps<T>) {
+  const grille = table.options.enableColumnResizing === true
+  const reglages = table.getState().columnSizing
+  const colonnes = colonnesAffichees(table)
   const gabarit = colonnes
-    .map((c) => c.columnDef.meta?.largeur ?? 'minmax(0, 1fr)')
+    .map((c) =>
+      grille ? piste(c, reglages[c.id] != null) : (c.columnDef.meta?.largeur ?? 'minmax(0, 1fr)'),
+    )
     .join(' ')
   const lignes = table.getRowModel().rows
+  const style: Record<string, string> = { '--zv-cols': gabarit }
+  if (grille) {
+    style['--zv-cols-somme'] = `${colonnes.reduce((s, c) => s + c.getSize(), 0)}px`
+    style['--zv-cols-n'] = String(colonnes.length)
+  }
 
   return (
     <div
       className={cx('zv-table', className)}
-      style={{ ['--zv-cols']: gabarit } as React.CSSProperties}
+      style={style as CSSProperties}
     >
       {table.getHeaderGroups().map((groupe) => (
         <div className="zv-table__head" key={groupe.id}>
@@ -76,42 +175,61 @@ export function DataTable<T>({ table, vide, onRowClick, className }: DataTablePr
             const contenu = entete.isPlaceholder
               ? null
               : flexRender(entete.column.columnDef.header, entete.getContext())
+            const pin = grille ? epinglage(entete.column, table) : { classes: false as const }
+            const ariaSort =
+              sens === 'asc' ? ('ascending' as const) : sens === 'desc' ? ('descending' as const) : undefined
+            const props: CelluleEnteteProps<T> = {
+              entete,
+              className: cx('zv-cell', registre === 'num' && 'zv-cell--num', pin.classes),
+              style: pin.style,
+              // La colonne triée est annoncée : sans aria-sort, le tri est
+              // une information purement visuelle.
+              'aria-sort': ariaSort,
+              children: triable ? (
+                <button
+                  type="button"
+                  className="zv-sort"
+                  onClick={entete.column.getToggleSortingHandler()}
+                >
+                  {celluleEntete ? <span className="zv-colhead__label">{contenu}</span> : contenu}
+                  <span className="zv-sort__mark" aria-hidden="true">
+                    {sens === 'asc' ? '↑' : sens === 'desc' ? '↓' : '↕'}
+                  </span>
+                </button>
+              ) : celluleEntete ? (
+                <span className="zv-colhead__label">{contenu}</span>
+              ) : (
+                contenu
+              ),
+            }
+            if (celluleEntete) return <Fragment key={entete.id}>{celluleEntete(props)}</Fragment>
             return (
               <div
                 key={entete.id}
-                className={cx('zv-cell', registre === 'num' && 'zv-cell--num')}
-                // La colonne triée est annoncée : sans aria-sort, le tri est
-                // une information purement visuelle.
-                aria-sort={
-                  sens === 'asc' ? 'ascending' : sens === 'desc' ? 'descending' : undefined
-                }
+                className={props.className}
+                style={props.style}
+                aria-sort={props['aria-sort']}
               >
-                {triable ? (
-                  <button
-                    type="button"
-                    className="zv-sort"
-                    onClick={entete.column.getToggleSortingHandler()}
-                  >
-                    {contenu}
-                    <span className="zv-sort__mark" aria-hidden="true">
-                      {sens === 'asc' ? '↑' : sens === 'desc' ? '↓' : '↕'}
-                    </span>
-                  </button>
-                ) : (
-                  contenu
-                )}
+                {props.children}
               </div>
             )
           })}
         </div>
       ))}
 
+      {sousEntete}
+
       {lignes.length === 0
         ? vide
         : lignes.map((ligne) => (
             <div
               key={ligne.id}
-              className="zv-row"
+              className={cx(
+                'zv-row',
+                ligne.getIsSelected() && 'zv-row--selected',
+                ligneActive?.(ligne.original) && 'zv-row--on',
+              )}
+              aria-current={ligneActive?.(ligne.original) || undefined}
               // Le clavier suit le clic : une ligne cliquable qui n'est pas
               // atteignable au clavier est une action inaccessible.
               role={onRowClick ? 'button' : undefined}
@@ -131,6 +249,7 @@ export function DataTable<T>({ table, vide, onRowClick, className }: DataTablePr
             >
               {ligne.getVisibleCells().map((cellule) => {
                 const meta = cellule.column.columnDef.meta
+                const pin = grille ? epinglage(cellule.column, table) : { classes: false as const }
                 return (
                   <div
                     key={cellule.id}
@@ -138,7 +257,10 @@ export function DataTable<T>({ table, vide, onRowClick, className }: DataTablePr
                       'zv-cell',
                       meta?.registre === 'nom' && 'zv-cell--name',
                       meta?.registre === 'num' && 'zv-cell--num',
+                      meta?.classe,
+                      pin.classes,
                     )}
+                    style={pin.style}
                   >
                     {meta?.label && <span className="zv-cell__label">{meta.label}</span>}
                     {flexRender(cellule.column.columnDef.cell, cellule.getContext())}