@benjosivo/table-query 1.0.4 → 1.2.1

package/README.md

@@ -83,6 +83,24 @@ app.post('/api/commandes', wrapRouteHandler(async (req, res) => {
 | `'HIDE'` | Colonne sans filtre |
 | `null` | Colonne sans filtre particulier |
 
+### Règles de mise en forme (`formattingRules`)
+
+`reqTableQuery` peut transporter des règles de couleur jusqu'au client. Elles sont renvoyées **telles quelles** dans `payload.formattingRules` : le serveur ne les évalue jamais et elles ne touchent **jamais** au SQL.
+
+```js
+const { data } = await reqTableQuery({
+    query: `SELECT ...`,
+    req,
+    paramFilter: [null, 'MULTISELECT', 'SLIDER'],
+    formattingRules: [
+        { column: 'statut', operator: '=', value: 'en retard', style: { backgroundColor: '#ffd7d7' } },
+        { column: 'montant', operator: '>', value: 10000, target: 'cell', style: { fontWeight: 'bold' } },
+    ],
+});
+```
+
+Les règles sont indexées **par nom de colonne** (contrairement à `paramFilter`, qui est positionnel). Une règle dont la `column` ne correspond à aucune colonne de la requête est ignorée, avec un `console.warn` — jamais une erreur.
+
 ### Le cache (`useCache`)
 
 Le cache est activé **par appel**, pas globalement :
@@ -140,6 +158,14 @@ function CommandesTable() {
 | `selectionColumnPosition` | `number \| 'start' \| 'end'` (défaut `'start'`) | Position de la colonne de checkbox parmi les colonnes visibles |
 | `selectedIds` | `any[]` | Sélection contrôlée par le parent (voir plus bas) |
 | `onSelectionChange` | `(ids, rows) => void` | Appelée à chaque changement de sélection, avec les ids et les lignes complètes |
+| `formattingRules` | `FormattingRule[]` | Règles de mise en forme conditionnelle (voir « Mise en forme conditionnelle ») |
+| `getRowFormatting` | `(row, i) => {style?, className?}` | Échappatoire : style de ligne calculé en JS, appliqué après toutes les règles |
+| `getCellFormatting` | `(col, value, row, i) => {style?, className?}` | Idem, par cellule |
+| `formattingEditor` | `boolean` (défaut `false`) | Affiche le bouton « Mise en forme » pour l'utilisateur final |
+| `formattingStorageKey` | `string` | Sauvegarde les règles de l'utilisateur dans `localStorage` sous cette clé |
+| `onFormattingRulesChange` | `(rules) => void` | Appelée à chaque modification des règles de l'utilisateur |
+| `initialUserFormattingRules` | `FormattingRule[]` | Réhydrate les règles utilisateur depuis ton backend (prioritaire sur `localStorage`) |
+| `formattingButtonLabel` | `string` (défaut `'Mise en forme'`) | Libellé du bouton de la barre d'outils |
 
 ### Sélection de lignes (checkbox)
 
@@ -185,6 +211,122 @@ const supprimer = async () => {
 />
 ```
 
+### Mise en forme conditionnelle (couleurs)
+
+Colorer des lignes ou des cellules selon leurs valeurs, façon Excel. Les règles sont des objets **sérialisables** : elles peuvent être écrites en dur, stockées en base, ou renvoyées par l'API.
+
+```tsx
+<DataTable
+    fetchData={fetchCommandes}
+    formattingRules={[
+        // Toute la ligne en rouge pâle quand le statut vaut "en retard"
+        { column: 'statut', operator: '=', value: 'en retard', style: { backgroundColor: '#ffd7d7' } },
+        // Seulement la cellule "montant" en gras vert au-dessus de 10 000
+        { column: 'montant', operator: '>', value: 10000, target: 'cell', style: { color: '#0a7d32', fontWeight: 'bold' } },
+        // Deux colonnes précises, via une classe CSS de ton app
+        { column: 'livraison', operator: 'isNull', target: ['livraison', 'transporteur'], className: 'a-completer' },
+    ]}
+/>
+```
+
+La librairie ne livre **aucun CSS** : `style` (inline) fonctionne sans configuration, `className` suppose que ton app définit la classe.
+
+#### Écrire une règle (`FormattingRule`)
+
+| Champ | Type | Description |
+|---|---|---|
+| `column` | `string` | **Obligatoire.** Nom de la colonne testée (une clé des objets de `items`) |
+| `operator` | voir table ci-dessous | **Obligatoire.** |
+| `value` | `any` | L'opérande ; sa forme dépend de l'opérateur |
+| `target` | `'row' \| 'cell' \| string[]` | Ce qui est coloré. Défaut `'row'` |
+| `style` | `CSSProperties` | Style inline appliqué au `<tr>` ou au `<td>` |
+| `className` | `string` | Classe CSS ajoutée au `<tr>` ou au `<td>` |
+| `valueType` | `'auto' \| 'string' \| 'number' \| 'date' \| 'boolean'` | Force le mode de comparaison. Défaut `'auto'` |
+| `stopIfTrue` | `boolean` | Arrête les règles suivantes sur ce que cette règle a coloré |
+| `enabled` | `boolean` | `false` conserve la règle sans l'appliquer. Défaut `true` |
+| `label` | `string` | Libellé affiché dans l'éditeur |
+| `id` | `string` | Généré automatiquement si absent |
+
+| Opérateur | Opérande |
+|---|---|
+| `=` `!=` `<` `<=` `>` `>=` | une valeur |
+| `between` | `[min, max]` ou `{min, max}` — **bornes incluses**, inversées tolérées |
+| `in` | un tableau, ou une chaîne `"a, b, c"` |
+| `contains` `notContains` `startsWith` `endsWith` | une valeur (toujours comparée en texte) |
+| `isNull` `isNotNull` | aucune |
+
+#### Cible d'une règle (`target`)
+
+- `'row'` (défaut) → le `<tr>` entier.
+- `'cell'` → seulement la cellule de la colonne testée.
+- `['col_a', 'col_b']` → ces colonnes-là.
+
+Le style de ligne est **aussi** posé sur chaque `<td>`. Sans cela, le moindre CSS de ton app sur `td` (zébrage, `tbody td { background: #fff }`) recouvrirait le fond du `<tr>` et la couleur semblerait ne pas marcher. Une règle `'cell'` est étalée **par-dessus**, elle l'emporte donc propriété par propriété.
+
+Les `className`, eux, ne descendent **pas** sur les `<td>` : une classe de ligne est un point d'accroche pour ton propre CSS, écris `tr.ma-classe td { ... }`.
+
+#### Ordre, fusion et `stopIfTrue`
+
+Les règles sont évaluées **dans l'ordre**, et cet ordre **est** la priorité :
+
+1. `formattingRules` (props de ton app)
+2. les règles renvoyées par l'API
+3. les règles créées par l'utilisateur dans l'éditeur
+
+Les styles se **cumulent** ; sur une même propriété CSS, **la dernière règle gagne**. Deux règles peuvent donc apporter l'une le fond, l'autre le gras.
+
+`stopIfTrue` gèle exactement ce que la règle a coloré : posé sur une règle `'row'`, il bloque les règles `'row'` suivantes mais **pas** les règles `'cell'` ; posé sur une règle `'cell'`, il ne gèle que cette cellule.
+
+#### Comparaison des valeurs
+
+Les valeurs viennent de MySQL : un `DECIMAL` arrive en chaîne, une `DATE` en objet `Date`. En mode `'auto'`, la comparaison essaie dans cet ordre : **date** (si un `Date` est en jeu) → **nombre** (si les deux côtés sont numériques) → **date ISO** → **texte**.
+
+- Le texte est comparé **sans tenir compte de la casse**.
+- `'007'` et `'7'` sont **égaux** en mode auto (comparaison numérique). Pour une référence ou un code postal, mets `valueType: 'string'`.
+- `'2024'` est traité comme un **nombre**, pas comme une année.
+- Une valeur `'YYYY-MM-DD'` désigne le **jour entier** : `= '2024-01-05'` matche un `DATETIME` du 5 à 14h32, et `between` inclut toute la journée de fin.
+
+**Valeurs nulles** : `isNull` matche `null`, `undefined` et la chaîne vide ; `!=` et `notContains` matchent sur une valeur nulle ; **tous les autres opérateurs ne matchent jamais** sur `null`. Une règle visant une colonne **inexistante** ne matche rien du tout (y compris `isNull`).
+
+#### Échappatoire : `getRowFormatting` / `getCellFormatting`
+
+Pour une logique qui croise plusieurs colonnes, hors de portée d'une règle déclarative :
+
+```tsx
+const getRowFormatting = useCallback(
+    (row) => (row.livree > row.commandee ? { style: { backgroundColor: '#ffe6e6' } } : null),
+    [],
+);
+
+<DataTable fetchData={fetchCommandes} getRowFormatting={getRowFormatting} />
+```
+
+Ces callbacks sont appliqués **en dernier** et ignorent `stopIfTrue` — ils l'emportent toujours. **Enveloppe-les dans `useCallback`**, sinon le calcul des couleurs est refait à chaque rendu.
+
+#### L'éditeur pour l'utilisateur final (`formattingEditor`)
+
+Désactivé par défaut. Avec `formattingEditor`, un bouton « Mise en forme » apparaît au-dessus du tableau et ouvre une modale où l'utilisateur ajoute, réordonne, désactive et supprime ses propres règles.
+
+```tsx
+<DataTable
+    fetchData={fetchCommandes}
+    formattingEditor
+    formattingStorageKey='commandes'            // persistance locale, gérée par la lib
+    onFormattingRulesChange={(rules) => save(rules)}  // ou ta propre persistance serveur
+    initialUserFormattingRules={reglesDeMonBackend}   // prioritaire sur localStorage
+/>
+```
+
+- `formattingStorageKey` écrit sous la clé réelle `tableQuery:formatting:<clé>`, au format `{"v":1,"rules":[...],"disabled":[...]}`. Tout accès au stockage est protégé (SSR, navigation privée, quota dépassé) et une version inconnue est ignorée.
+- L'utilisateur n'édite que **sa** couche. Les règles venues des props et de l'API s'affichent en lecture seule, avec une case pour les désactiver.
+- Sans `formattingEditor`, aucun nœud supplémentaire n'est ajouté au DOM.
+
+#### Limites connues
+
+- Sur une colonne `JSON`, la coloration du texte peut sembler sans effet : le rendu JSON pose ses propres `<span class="key|string|number">`, et le CSS de ton app sur ces classes l'emporte sur la couleur héritée du `<td>`. Le fond, lui, fonctionne.
+- Sur une colonne `FILE`/`BLOB`, le contenu est un `<img>` ou un `<button>` : le fond s'affiche autour, mais la couleur du texte est écrasée par le style de tes boutons.
+- Une règle visant une colonne masquée (`HIDE`) est bien évaluée, mais une cible `'cell'` sur cette colonne n'a aucun effet visible.
+
 ### Utilisation avec ta propre UI de filtre
 
 Si le système de filtre par défaut ne convient pas, utilise le hook et les composants séparément :

package/dist/react/DataTable.d.ts

@@ -6,4 +6,4 @@ import type { DataTableProps } from './types.js';
  * If you want your own filter UI, don't use this component: compose `useDataTable` +
  * `Table` + `Pagination` directly instead (see README "Using the pieces separately").
  */
-export declare function DataTable<T extends Record<string, any>>({ fetchData, onRowClick, filterEnabled, sortingEnabled, advancedFilters, height, rowsPerPageOptions, defaultRowsPerPage, onImagePreview, fetchFilterConfig, selectable, selectionColumnPosition, selectedIds, onSelectionChange, }: DataTableProps<T>): import("react").JSX.Element;
+export declare function DataTable<T extends Record<string, any>>({ fetchData, onRowClick, filterEnabled, sortingEnabled, advancedFilters, height, rowsPerPageOptions, defaultRowsPerPage, onImagePreview, fetchFilterConfig, selectable, selectionColumnPosition, selectedIds, onSelectionChange, formattingRules, getRowFormatting, getCellFormatting, formattingEditor, formattingStorageKey, onFormattingRulesChange, initialUserFormattingRules, formattingButtonLabel, }: DataTableProps<T>): import("react").JSX.Element;

package/dist/react/DataTable.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useDataTable } from './useDataTable.js';
+import { useFormattingRules } from './useFormattingRules.js';
+import { FormattingToolbar } from './FormattingToolbar.js';
+import { columnNamesOf } from './utils.js';
 import { FilterModal } from './FilterModal.js';
 import { FilterPanel } from './FilterPanel.js';
 import { Table } from './Table.js';
@@ -12,7 +15,7 @@ import { Pagination } from './Pagination.js';
  * If you want your own filter UI, don't use this component: compose `useDataTable` +
  * `Table` + `Pagination` directly instead (see README "Using the pieces separately").
  */
-export function DataTable({ fetchData, onRowClick, filterEnabled = true, sortingEnabled = true, advancedFilters = false, height = '76vh', rowsPerPageOptions, defaultRowsPerPage, onImagePreview, fetchFilterConfig, selectable = false, selectionColumnPosition = 'start', selectedIds, onSelectionChange, }) {
+export function DataTable({ fetchData, onRowClick, filterEnabled = true, sortingEnabled = true, advancedFilters = false, height = '76vh', rowsPerPageOptions, defaultRowsPerPage, onImagePreview, fetchFilterConfig, selectable = false, selectionColumnPosition = 'start', selectedIds, onSelectionChange, formattingRules, getRowFormatting, getCellFormatting, formattingEditor = false, formattingStorageKey, onFormattingRulesChange, initialUserFormattingRules, formattingButtonLabel, }) {
     const table = useDataTable({
         fetchData,
         advancedFilters,
@@ -24,11 +27,20 @@ export function DataTable({ fetchData, onRowClick, filterEnabled = true, sorting
     });
     const [openFilterCol, setOpenFilterCol] = useState(null);
     const [filterAnchor, setFilterAnchor] = useState(null);
+    const formatting = useFormattingRules({
+        propsRules: formattingRules,
+        serverRules: table.serverFormattingRules,
+        storageKey: formattingStorageKey,
+        initialUserRules: initialUserFormattingRules,
+        onChange: onFormattingRulesChange,
+    });
+    // Same derivation as Table's, via the shared helper, so the editor's column list can't drift.
+    const columnsForEditor = useMemo(() => columnNamesOf(table.items, table.paramFilter), [table.items, table.paramFilter]);
     const uniqueValuesFor = (column) => {
         const values = table.items.map((row) => String(row[column] ?? ''));
         return Array.from(new Set(values)).sort((a, b) => a.localeCompare(b));
     };
-    return (_jsxs("div", { className: 'flex-row nowrap', style: { alignItems: 'flex-start', maxHeight: height }, children: [advancedFilters && table.filterConfig && (_jsx(FilterPanel, { filterConfig: table.filterConfig, activeFilters: table.filters, onChange: table.setColumnFilter, onClearAll: table.clearAllFilters })), _jsxs("div", { className: 'frame', style: { maxHeight: '-webkit-fill-available', minWidth: '10vw' }, children: [_jsx("div", { style: { maxHeight: '-webkit-fill-available', overflowY: 'auto', overflowX: 'auto' }, children: _jsx(Table, { items: table.items, fieldsType: table.fieldsType, paramFilter: table.paramFilter, sortColumn: table.sortColumn, sortDirection: table.sortDirection, sortingEnabled: sortingEnabled, onSort: (col) => table.toggleSort(col), onRowClick: onRowClick, onImagePreview: onImagePreview, selectable: selectable, selectionColumnPosition: selectionColumnPosition, selectedIds: table.selectedIds, onToggleRow: table.setRowSelected, onToggleAllRows: table.setAllRowsSelected, renderHeaderExtra: filterEnabled && !advancedFilters
+    return (_jsxs("div", { className: 'flex-row nowrap', style: { alignItems: 'flex-start', maxHeight: height }, children: [advancedFilters && table.filterConfig && (_jsx(FilterPanel, { filterConfig: table.filterConfig, activeFilters: table.filters, onChange: table.setColumnFilter, onClearAll: table.clearAllFilters })), _jsxs("div", { className: 'frame', style: { maxHeight: '-webkit-fill-available', minWidth: '10vw' }, children: [formattingEditor && (_jsx("div", { className: 'flex-row', style: { justifyContent: 'flex-end' }, children: _jsx(FormattingToolbar, { columns: columnsForEditor, fieldsType: table.fieldsType, paramFilter: table.paramFilter, label: formattingButtonLabel, ...formatting }) })), _jsx("div", { style: { maxHeight: '-webkit-fill-available', overflowY: 'auto', overflowX: 'auto' }, children: _jsx(Table, { items: table.items, fieldsType: table.fieldsType, paramFilter: table.paramFilter, sortColumn: table.sortColumn, sortDirection: table.sortDirection, sortingEnabled: sortingEnabled, onSort: (col) => table.toggleSort(col), onRowClick: onRowClick, onImagePreview: onImagePreview, selectable: selectable, selectionColumnPosition: selectionColumnPosition, selectedIds: table.selectedIds, onToggleRow: table.setRowSelected, onToggleAllRows: table.setAllRowsSelected, formattingRules: formatting.rules, getRowFormatting: getRowFormatting, getCellFormatting: getCellFormatting, renderHeaderExtra: filterEnabled && !advancedFilters
                                 ? (col) => (_jsx("button", { style: { padding: 5, marginTop: 0 }, className: 'btnDataFilterTable', onClick: (e) => {
                                         setOpenFilterCol(col);
                                         setFilterAnchor(e.currentTarget);

package/dist/react/FormattingModal.d.ts

@@ -0,0 +1,16 @@
+import type { FieldTypeInfo, ParamFilter } from './types.js';
+import type { UseFormattingRulesResult } from './useFormattingRules.js';
+export interface FormattingModalProps extends UseFormattingRulesResult {
+    /** Every column of the table, hidden ones included. */
+    columns: string[];
+    fieldsType?: FieldTypeInfo[];
+    paramFilter?: ParamFilter[];
+    anchorEl: HTMLElement | null;
+    onClose: () => void;
+}
+/**
+ * The end-user editor for conditional formatting rules: list on top, one rule form below.
+ * Shares FilterModal's popover mechanics (anchored positioning, outside-click dismissal)
+ * and the same unstyled class hooks, so a host stylesheet themes both at once.
+ */
+export declare function FormattingModal({ columns, fieldsType, paramFilter, anchorEl, onClose, rules, userRules, inherited, disabledIds, addRule, updateRule, removeRule, moveRule, setRuleDisabled, resetUserRules, }: FormattingModalProps): import("react").JSX.Element;

package/dist/react/FormattingModal.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { FORMATTING_OPERATORS, describeRule, editorStateToStyle, newRuleId, operatorArity, styleToEditorState, } from './formatting.js';
+/**
+ * The end-user editor for conditional formatting rules: list on top, one rule form below.
+ * Shares FilterModal's popover mechanics (anchored positioning, outside-click dismissal)
+ * and the same unstyled class hooks, so a host stylesheet themes both at once.
+ */
+export function FormattingModal({ columns, fieldsType, paramFilter, anchorEl, onClose, rules, userRules, inherited, disabledIds, addRule, updateRule, removeRule, moveRule, setRuleDisabled, resetUserRules, }) {
+    const modalRef = useRef(null);
+    const [style, setStyle] = useState({ visibility: 'hidden' });
+    const [editingId, setEditingId] = useState(null);
+    const hiddenColumns = useMemo(() => {
+        const set = new Set();
+        columns.forEach((col, i) => {
+            if (paramFilter?.[i]?.type?.trim() === 'HIDE')
+                set.add(col);
+        });
+        return set;
+    }, [columns, paramFilter]);
+    // Same anchoring maths as FilterModal.
+    useEffect(() => {
+        if (!anchorEl || !modalRef.current)
+            return;
+        const modalRect = modalRef.current.getBoundingClientRect();
+        const triggerRect = anchorEl.getBoundingClientRect();
+        const left = Math.max(0, triggerRect.left - modalRect.width + triggerRect.width);
+        const top = Math.min(window.scrollY + window.innerHeight - modalRect.height, triggerRect.bottom + 5 + window.scrollY);
+        setStyle({ position: 'absolute', top, left, zIndex: 1000 });
+    }, [anchorEl, editingId, userRules.length, inherited.length]);
+    useEffect(() => {
+        const handler = (e) => {
+            if (modalRef.current && !modalRef.current.contains(e.target) && e.target !== anchorEl)
+                onClose();
+        };
+        window.addEventListener('mousedown', handler);
+        return () => window.removeEventListener('mousedown', handler);
+    }, [anchorEl, onClose]);
+    const editing = userRules.find((r) => r.id === editingId) ?? null;
+    const noColumns = columns.length === 0;
+    const startNewRule = () => {
+        const rule = {
+            id: newRuleId(),
+            column: columns[0] ?? '',
+            operator: '=',
+            value: '',
+            valueType: 'auto',
+            target: 'row',
+            style: { backgroundColor: '#ffe08a' },
+            enabled: true,
+        };
+        addRule(rule);
+        setEditingId(rule.id);
+    };
+    return (_jsxs("div", { ref: modalRef, className: 'modal flex-column', style: { minWidth: '22em', maxWidth: '34em', ...style }, children: [_jsxs("div", { className: 'frame', children: [_jsx("strong", { children: "Mise en forme conditionnelle" }), _jsxs("span", { style: { opacity: 0.7, fontSize: '0.85em' }, children: [rules.length, " r\u00E8gle", rules.length > 1 ? 's' : '', " active", rules.length > 1 ? 's' : ''] })] }), inherited.length > 0 && (_jsxs("div", { className: 'frame flex-column', style: { maxHeight: '18vh', overflowY: 'auto' }, children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "R\u00E8gles de l'application" }), inherited.map((rule) => (_jsxs("div", { className: 'flex-row nowrap', style: { alignItems: 'center', gap: 6, opacity: 0.85 }, children: [_jsx("input", { type: 'checkbox', checked: !disabledIds.includes(rule.id), onChange: (e) => setRuleDisabled(rule.id, !e.target.checked), title: 'Activer / d\u00E9sactiver' }), _jsx(StyleSwatch, { rule: rule }), _jsx("span", { style: { width: '100%' }, children: rule.label || describeRule(rule) })] }, rule.id))), _jsx("span", { style: { opacity: 0.6, fontSize: '0.8em' }, children: "Ces r\u00E8gles ne sont pas modifiables ici." })] })), _jsxs("div", { className: 'frame flex-column', style: { maxHeight: '24vh', overflowY: 'auto' }, children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "Mes r\u00E8gles" }), userRules.length === 0 && _jsx("span", { style: { opacity: 0.6 }, children: "Aucune r\u00E8gle pour l'instant." }), userRules.map((rule, i) => (_jsxs("div", { className: 'flex-row nowrap', style: { alignItems: 'center', gap: 4 }, children: [_jsx("input", { type: 'checkbox', checked: rule.enabled !== false, onChange: (e) => updateRule(rule.id, { enabled: e.target.checked }), title: 'Activer / d\u00E9sactiver' }), _jsx("button", { onClick: () => moveRule(rule.id, -1), disabled: i === 0, title: 'Monter (priorit\u00E9 plus faible)', children: "\u2191" }), _jsx("button", { onClick: () => moveRule(rule.id, 1), disabled: i === userRules.length - 1, title: 'Descendre (priorit\u00E9 plus forte)', children: "\u2193" }), _jsx(StyleSwatch, { rule: rule }), _jsx("span", { style: { width: '100%', cursor: 'pointer' }, onClick: () => setEditingId(rule.id), children: rule.label || describeRule(rule) }), _jsx("button", { onClick: () => setEditingId(editingId === rule.id ? null : rule.id), children: "\u00C9diter" }), _jsx("button", { onClick: () => {
+                                    if (editingId === rule.id)
+                                        setEditingId(null);
+                                    removeRule(rule.id);
+                                }, title: 'Supprimer', children: "\u2715" })] }, rule.id)))] }), editing && (_jsx(RuleEditor, { rule: editing, columns: columns, hiddenColumns: hiddenColumns, fieldsType: fieldsType, onChange: (patch) => updateRule(editing.id, patch), onDone: () => setEditingId(null) })), _jsxs("div", { className: 'flex-row', children: [_jsx("button", { className: 'btn-accent', onClick: startNewRule, disabled: noColumns, children: "Ajouter une r\u00E8gle" }), _jsx("button", { onClick: () => {
+                            setEditingId(null);
+                            resetUserRules();
+                        }, disabled: userRules.length === 0 && disabledIds.length === 0, children: "R\u00E9initialiser" }), _jsx("button", { onClick: onClose, children: "Fermer" })] }), noColumns && _jsx("span", { style: { opacity: 0.6 }, children: "Aucune colonne charg\u00E9e." })] }));
+}
+function StyleSwatch({ rule }) {
+    const s = rule.style ?? {};
+    return (_jsx("span", { "aria-hidden": 'true', style: {
+            display: 'inline-block',
+            width: '1.1em',
+            height: '1.1em',
+            flex: '0 0 auto',
+            border: '1px solid rgba(0,0,0,0.3)',
+            backgroundColor: s.backgroundColor ?? 'transparent',
+            color: s.color ?? 'inherit',
+            fontWeight: s.fontWeight,
+            fontStyle: s.fontStyle,
+            textAlign: 'center',
+            lineHeight: '1.1em',
+            fontSize: '0.8em',
+        }, children: "A" }));
+}
+// ==================== RULE EDITOR ====================
+/** The operand input type follows the column's SQL type, so date rules get a date picker. */
+function inputTypeFor(fieldType) {
+    const t = (fieldType ?? '').trim().toUpperCase();
+    if (t === 'DATE')
+        return 'date';
+    if (t === 'DATETIME' || t === 'TIMESTAMP')
+        return 'datetime-local';
+    return 'text';
+}
+function RuleEditor({ rule, columns, hiddenColumns, fieldsType, onChange, onDone, }) {
+    const arity = operatorArity(rule.operator);
+    const styleState = styleToEditorState(rule.style);
+    const columnIndex = columns.indexOf(rule.column);
+    const inputType = inputTypeFor(fieldsType?.[columnIndex]?.fieldType);
+    const setStyle = (patch) => onChange({ style: editorStateToStyle({ ...styleState, ...patch }) });
+    const pair = Array.isArray(rule.value) ? rule.value : [undefined, undefined];
+    const targetMode = Array.isArray(rule.target) ? 'columns' : rule.target === 'cell' ? 'cell' : 'row';
+    return (_jsxs("div", { className: 'frame flex-column', style: { gap: 6 }, children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "Modifier la r\u00E8gle" }), _jsxs("label", { className: 'flex-row nowrap', style: { alignItems: 'center', gap: 6 }, children: [_jsx("span", { style: { minWidth: '7em' }, children: "Colonne" }), _jsxs("select", { value: rule.column, onChange: (e) => onChange({ column: e.target.value }), style: { width: '100%' }, children: [!columns.includes(rule.column) && _jsxs("option", { value: rule.column, children: [rule.column, " (inconnue)"] }), columns.map((col) => (_jsxs("option", { value: col, children: [col, hiddenColumns.has(col) ? ' (masquée)' : ''] }, col)))] })] }), _jsxs("label", { className: 'flex-row nowrap', style: { alignItems: 'center', gap: 6 }, children: [_jsx("span", { style: { minWidth: '7em' }, children: "Op\u00E9rateur" }), _jsx("select", { value: rule.operator, onChange: (e) => onChange({ operator: e.target.value, value: '' }), style: { width: '100%' }, children: FORMATTING_OPERATORS.map((op) => (_jsx("option", { value: op.value, children: op.label }, op.value))) })] }), arity === 1 && (_jsxs("label", { className: 'flex-row nowrap', style: { alignItems: 'center', gap: 6 }, children: [_jsx("span", { style: { minWidth: '7em' }, children: "Valeur" }), _jsx("input", { type: inputType, value: String(rule.value ?? ''), onChange: (e) => onChange({ value: e.target.value }), style: { width: '100%' } })] })), arity === 2 && (_jsxs("div", { className: 'flex-row nowrap', style: { alignItems: 'center', gap: 6 }, children: [_jsx("span", { style: { minWidth: '7em' }, children: "Entre" }), _jsx("input", { type: inputType, value: String(pair[0] ?? ''), placeholder: 'Min', onChange: (e) => onChange({ value: [e.target.value, pair[1] ?? ''] }) }), _jsx("input", { type: inputType, value: String(pair[1] ?? ''), placeholder: 'Max', onChange: (e) => onChange({ value: [pair[0] ?? '', e.target.value] }) })] })), arity === 'n' && (_jsxs("label", { className: 'flex-row nowrap', style: { alignItems: 'center', gap: 6 }, children: [_jsx("span", { style: { minWidth: '7em' }, children: "Valeurs" }), _jsx("input", { type: 'text', value: Array.isArray(rule.value) ? rule.value.join(', ') : String(rule.value ?? ''), placeholder: 's\u00E9par\u00E9es par des virgules', onChange: (e) => onChange({ value: e.target.value }), style: { width: '100%' } })] })), _jsxs("label", { className: 'flex-row nowrap', style: { alignItems: 'center', gap: 6 }, children: [_jsx("span", { style: { minWidth: '7em' }, children: "Comparer comme" }), _jsxs("select", { value: rule.valueType ?? 'auto', onChange: (e) => onChange({ valueType: e.target.value }), style: { width: '100%' }, children: [_jsx("option", { value: 'auto', children: "Automatique" }), _jsx("option", { value: 'string', children: "Texte" }), _jsx("option", { value: 'number', children: "Nombre" }), _jsx("option", { value: 'date', children: "Date" }), _jsx("option", { value: 'boolean', children: "Bool\u00E9en" })] })] }), _jsxs("label", { className: 'flex-row nowrap', style: { alignItems: 'center', gap: 6 }, children: [_jsx("span", { style: { minWidth: '7em' }, children: "Appliquer \u00E0" }), _jsxs("select", { value: targetMode, onChange: (e) => {
+                            const mode = e.target.value;
+                            onChange({ target: (mode === 'columns' ? [rule.column] : mode) });
+                        }, style: { width: '100%' }, children: [_jsx("option", { value: 'row', children: "Toute la ligne" }), _jsx("option", { value: 'cell', children: "Cette cellule" }), _jsx("option", { value: 'columns', children: "Colonnes choisies\u2026" })] })] }), targetMode === 'columns' && (_jsx("div", { className: 'frame flex-column', style: { maxHeight: '12vh', overflowY: 'auto' }, children: columns.map((col) => {
+                    const list = rule.target ?? [];
+                    return (_jsxs("label", { className: 'flex-row nowrap', style: { alignItems: 'center', gap: 6 }, children: [_jsx("input", { type: 'checkbox', checked: list.includes(col), onChange: (e) => onChange({ target: e.target.checked ? [...list, col] : list.filter((c) => c !== col) }) }), _jsxs("span", { children: [col, hiddenColumns.has(col) ? ' (masquée)' : ''] })] }, col));
+                }) })), _jsxs("div", { className: 'flex-row nowrap', style: { alignItems: 'center', gap: 6 }, children: [_jsx("span", { style: { minWidth: '7em' }, children: "Fond" }), _jsx("input", { type: 'checkbox', checked: !!styleState.background, onChange: (e) => setStyle({ background: e.target.checked ? '#ffe08a' : undefined }) }), _jsx("input", { type: 'color', value: styleState.background ?? '#ffe08a', disabled: !styleState.background, onChange: (e) => setStyle({ background: e.target.value }) }), _jsx("span", { style: { minWidth: '4em' }, children: "Texte" }), _jsx("input", { type: 'checkbox', checked: !!styleState.color, onChange: (e) => setStyle({ color: e.target.checked ? '#000000' : undefined }) }), _jsx("input", { type: 'color', value: styleState.color ?? '#000000', disabled: !styleState.color, onChange: (e) => setStyle({ color: e.target.value }) })] }), _jsxs("div", { className: 'flex-row nowrap', style: { alignItems: 'center', gap: 10 }, children: [_jsxs("label", { className: 'flex-row nowrap', style: { alignItems: 'center', gap: 4 }, children: [_jsx("input", { type: 'checkbox', checked: styleState.bold, onChange: (e) => setStyle({ bold: e.target.checked }) }), _jsx("span", { children: "Gras" })] }), _jsxs("label", { className: 'flex-row nowrap', style: { alignItems: 'center', gap: 4 }, children: [_jsx("input", { type: 'checkbox', checked: styleState.italic, onChange: (e) => setStyle({ italic: e.target.checked }) }), _jsx("span", { children: "Italique" })] }), _jsxs("label", { className: 'flex-row nowrap', style: { alignItems: 'center', gap: 4 }, children: [_jsx("input", { type: 'checkbox', checked: !!rule.stopIfTrue, onChange: (e) => onChange({ stopIfTrue: e.target.checked }) }), _jsx("span", { title: "Les r\u00E8gles suivantes ne s'appliqueront plus \u00E0 ce que celle-ci a color\u00E9", children: "Arr\u00EAter si vrai" })] })] }), _jsxs("label", { className: 'flex-row nowrap', style: { alignItems: 'center', gap: 6 }, children: [_jsx("span", { style: { minWidth: '7em' }, children: "Classe CSS" }), _jsx("input", { type: 'text', value: rule.className ?? '', placeholder: 'optionnel', onChange: (e) => onChange({ className: e.target.value || undefined }), style: { width: '100%' } })] }), _jsxs("label", { className: 'flex-row nowrap', style: { alignItems: 'center', gap: 6 }, children: [_jsx("span", { style: { minWidth: '7em' }, children: "Libell\u00E9" }), _jsx("input", { type: 'text', value: rule.label ?? '', placeholder: describeRule(rule), onChange: (e) => onChange({ label: e.target.value || undefined }), style: { width: '100%' } })] }), _jsx("button", { className: 'btn-accent', onClick: onDone, children: "Termin\u00E9" })] }));
+}

package/dist/react/FormattingToolbar.d.ts

@@ -0,0 +1,13 @@
+import type { FieldTypeInfo, ParamFilter } from './types.js';
+import type { UseFormattingRulesResult } from './useFormattingRules.js';
+export interface FormattingToolbarProps extends UseFormattingRulesResult {
+    columns: string[];
+    fieldsType?: FieldTypeInfo[];
+    paramFilter?: ParamFilter[];
+    label?: string;
+}
+/**
+ * The button that opens the conditional formatting editor. Exported separately so a host
+ * composing `useDataTable` + `Table` by hand can drop it wherever it likes.
+ */
+export declare function FormattingToolbar({ columns, fieldsType, paramFilter, label, ...formatting }: FormattingToolbarProps): import("react").JSX.Element;

package/dist/react/FormattingToolbar.js

@@ -0,0 +1,12 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { FormattingModal } from './FormattingModal.js';
+/**
+ * The button that opens the conditional formatting editor. Exported separately so a host
+ * composing `useDataTable` + `Table` by hand can drop it wherever it likes.
+ */
+export function FormattingToolbar({ columns, fieldsType, paramFilter, label = 'Mise en forme', ...formatting }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const activeCount = formatting.rules.length;
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { className: 'btnDataFilterTable', onClick: (e) => setAnchorEl(anchorEl ? null : e.currentTarget), title: 'Colorer des lignes ou des cellules selon leurs valeurs', children: [label, activeCount > 0 ? ` (${activeCount})` : ''] }), anchorEl && (_jsx(FormattingModal, { columns: columns, fieldsType: fieldsType, paramFilter: paramFilter, anchorEl: anchorEl, onClose: () => setAnchorEl(null), ...formatting }))] }));
+}

package/dist/react/Table.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { FieldTypeInfo, ParamFilter, SelectionColumnPosition, SortDirection } from './types.js';
+import type { FieldTypeInfo, FormattingRule, GetCellFormatting, GetRowFormatting, ParamFilter, SelectionColumnPosition, SortDirection } from './types.js';
 export interface TableProps<T extends Record<string, any>> {
     items: T[];
     fieldsType?: FieldTypeInfo[];
@@ -26,6 +26,12 @@ export interface TableProps<T extends Record<string, any>> {
     /** Labels for the checkboxes (accessibility). */
     selectAllLabel?: string;
     selectRowLabel?: string;
+    /** Conditional formatting rules, already merged and ordered (see useFormattingRules). */
+    formattingRules?: FormattingRule[];
+    /** Escape hatch for logic spanning several columns. Applied after every rule.
+     *  Wrap these in useCallback, or the formatting memo recomputes on each render. */
+    getRowFormatting?: GetRowFormatting<T>;
+    getCellFormatting?: GetCellFormatting<T>;
 }
 /**
  * Just the `<table>` — header, sorting, rows, cell formatting (dates, JSON, lazy images),
@@ -33,4 +39,4 @@ export interface TableProps<T extends Record<string, any>> {
  * No filter UI, no pagination: bring your own and drive `items`/`fieldsType` yourself
  * (e.g. from `useDataTable`, or from any other data source).
  */
-export declare function Table<T extends Record<string, any>>({ items, fieldsType, paramFilter, sortColumn, sortDirection, onSort, sortingEnabled, onRowClick, onImagePreview, renderHeaderExtra, selectable, selectionColumnPosition, selectedIds, onToggleRow, onToggleAllRows, selectAllLabel, selectRowLabel, }: TableProps<T>): import("react").JSX.Element;
+export declare function Table<T extends Record<string, any>>({ items, fieldsType, paramFilter, sortColumn, sortDirection, onSort, sortingEnabled, onRowClick, onImagePreview, renderHeaderExtra, selectable, selectionColumnPosition, selectedIds, onToggleRow, onToggleAllRows, selectAllLabel, selectRowLabel, formattingRules, getRowFormatting, getCellFormatting, }: TableProps<T>): import("react").JSX.Element;

package/dist/react/Table.js

@@ -1,17 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef } from 'react';
 import { Cell } from './Cell.js';
-import { getRowId, selectionKey } from './utils.js';
+import { computeTableFormatting } from './formatting.js';
+import { columnNamesOf, getRowId, selectionKey } from './utils.js';
+/** Stable identity so the formatting memo isn't invalidated on every render. */
+const NO_RULES = [];
 /**
  * Just the `<table>` — header, sorting, rows, cell formatting (dates, JSON, lazy images),
  * optional checkbox column.
  * No filter UI, no pagination: bring your own and drive `items`/`fieldsType` yourself
  * (e.g. from `useDataTable`, or from any other data source).
  */
-export function Table({ items, fieldsType = [], paramFilter, sortColumn, sortDirection, onSort, sortingEnabled = true, onRowClick, onImagePreview, renderHeaderExtra, selectable = false, selectionColumnPosition = 'start', selectedIds, onToggleRow, onToggleAllRows, selectAllLabel = 'Tout sélectionner', selectRowLabel = 'Sélectionner la ligne', }) {
-    const columns = useMemo(() => (items[0] ? Object.keys(items[0]) : paramFilter && paramFilter.length > 0 ? paramFilter.map((el) => el.nom) : []), [items, paramFilter]);
+export function Table({ items, fieldsType = [], paramFilter, sortColumn, sortDirection, onSort, sortingEnabled = true, onRowClick, onImagePreview, renderHeaderExtra, selectable = false, selectionColumnPosition = 'start', selectedIds, onToggleRow, onToggleAllRows, selectAllLabel = 'Tout sélectionner', selectRowLabel = 'Sélectionner la ligne', formattingRules, getRowFormatting, getCellFormatting, }) {
+    const columns = useMemo(() => columnNamesOf(items, paramFilter), [items, paramFilter]);
     /** Columns actually rendered, keeping their original index (fieldsType/paramFilter are indexed on it). */
     const visibleColumns = useMemo(() => columns.map((col, index) => ({ col, index })).filter(({ index }) => paramFilter?.[index]?.type.trim() !== 'HIDE'), [columns, paramFilter]);
+    /**
+     * Computed for the whole page at once rather than inside the render loop: Table re-renders
+     * on every checkbox toggle and every filter popover open, and re-evaluating N rules over up
+     * to 1000 rows on each of those is wasteful. `items` gets a fresh identity on every load(),
+     * so invalidation is automatic. Returns null when there is nothing to format.
+     */
+    const formatting = useMemo(() => computeTableFormatting(items, formattingRules ?? NO_RULES, columns, { getRowFormatting, getCellFormatting }), [items, formattingRules, columns, getRowFormatting, getCellFormatting]);
     const selectedKeys = useMemo(() => new Set((selectedIds ?? []).map(selectionKey)), [selectedIds]);
     const displayedCount = items.length;
     const selectedOnPage = useMemo(() => items.filter((row) => selectedKeys.has(selectionKey(getRowId(row)))).length, [items, selectedKeys]);
@@ -38,9 +48,19 @@ export function Table({ items, fieldsType = [], paramFilter, sortColumn, sortDir
     const headerSelectionCell = (_jsx("th", { className: 'selectionColumn', style: { width: '1%' }, children: _jsx(SelectionCheckbox, { checked: allDisplayedSelected, indeterminate: someDisplayedSelected, disabled: displayedCount === 0, label: selectAllLabel, onChange: (checked) => onToggleAllRows?.(checked) }) }, '__selection__'));
     return (_jsxs("table", { children: [_jsx("thead", { className: 'tableHeader', children: _jsx("tr", { children: withSelectionCell(headerCells, headerSelectionCell) }) }), _jsxs("tbody", { style: { maxHeight: 'stretch', maxWidth: 'stretch', overflow: 'auto' }, children: [items.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: 100, children: "No data found" }) })), items.map((row, i) => {
                         const id = getRowId(row);
-                        const cells = visibleColumns.map(({ col, index }) => (_jsx("td", { children: _jsx(Cell, { value: row[col], fieldType: fieldsType[index]?.fieldType, onImagePreview: onImagePreview }) }, col)));
-                        const selectionCell = (_jsx("td", { className: 'selectionColumn', onClick: (e) => e.stopPropagation(), children: _jsx(SelectionCheckbox, { checked: selectedKeys.has(selectionKey(id)), label: selectRowLabel, onChange: (checked) => onToggleRow?.(row, checked) }) }, '__selection__'));
-                        return (_jsx("tr", { style: { cursor: onRowClick ? 'pointer' : 'default' }, onClick: () => id !== undefined && onRowClick?.(id, row), children: withSelectionCell(cells, selectionCell) }, id !== undefined ? String(id) : i));
+                        const fmt = formatting?.[i];
+                        const cells = visibleColumns.map(({ col, index }) => {
+                            // Keyed by column NAME. `index` stays positional for fieldsType/paramFilter —
+                            // using it here would mis-colour every table that has a HIDE column.
+                            const cf = fmt?.cellStyles[col];
+                            // The row style is re-applied as a base layer on each <td>: host CSS that sets a
+                            // background on td (zebra striping) paints over the <tr>'s own background otherwise.
+                            // Spreading the cell style second makes it win per property, with no JS arbitration.
+                            const style = fmt?.rowStyle || cf?.style ? { ...fmt?.rowStyle, ...cf?.style } : undefined;
+                            return (_jsx("td", { className: cf?.className, style: style, children: _jsx(Cell, { value: row[col], fieldType: fieldsType[index]?.fieldType, onImagePreview: onImagePreview }) }, col));
+                        });
+                        const selectionCell = (_jsx("td", { className: 'selectionColumn', style: fmt?.rowStyle, onClick: (e) => e.stopPropagation(), children: _jsx(SelectionCheckbox, { checked: selectedKeys.has(selectionKey(id)), label: selectRowLabel, onChange: (checked) => onToggleRow?.(row, checked) }) }, '__selection__'));
+                        return (_jsx("tr", { className: fmt?.rowClassName, style: { cursor: onRowClick ? 'pointer' : 'default', ...fmt?.rowStyle }, onClick: () => id !== undefined && onRowClick?.(id, row), children: withSelectionCell(cells, selectionCell) }, id !== undefined ? String(id) : i));
                     })] })] }));
 }
 function SelectionCheckbox({ checked, indeterminate = false, disabled = false, label, onChange, }) {

package/dist/react/formatting.d.ts

@@ -0,0 +1,47 @@
+import type { CSSProperties } from 'react';
+import type { FormattingOperator, FormattingRule, FormattingValueType, GetCellFormatting, GetRowFormatting, RowFormatting } from './types.js';
+/** Operator metadata: the single source of truth for the editor's <select> and its operand inputs. */
+export declare const FORMATTING_OPERATORS: {
+    value: FormattingOperator;
+    label: string;
+    arity: 0 | 1 | 2 | 'n';
+}[];
+export declare function operatorArity(operator: FormattingOperator): 0 | 1 | 2 | 'n';
+/**
+ * Three-way compare. Returns null when the two operands cannot be compared at all,
+ * which callers treat as "does not match" (except '!=', where it means "different").
+ */
+export declare function compareValues(cell: unknown, operand: unknown, valueType?: FormattingValueType): -1 | 0 | 1 | null;
+export declare function evaluateRule(rule: FormattingRule, row: Record<string, any>): boolean;
+export declare function computeRowFormatting<T extends Record<string, any>>(row: T, rules: FormattingRule[], columns: string[], callbacks?: {
+    getRowFormatting?: GetRowFormatting<T>;
+    getCellFormatting?: GetCellFormatting<T>;
+}, rowIndex?: number): RowFormatting;
+/**
+ * Formatting for a whole page of rows. Returns `null` when there is nothing to do, so the
+ * feature costs one boolean check for everyone who does not use it.
+ */
+export declare function computeTableFormatting<T extends Record<string, any>>(items: T[], rules: FormattingRule[], columns: string[], callbacks?: {
+    getRowFormatting?: GetRowFormatting<T>;
+    getCellFormatting?: GetCellFormatting<T>;
+}): RowFormatting[] | null;
+/** Stable-enough id for a rule that arrived without one. randomUUID needs a secure context. */
+export declare function newRuleId(): string;
+/**
+ * Coerce an untrusted rule list (an API payload or localStorage) into valid rules.
+ * Anything malformed is dropped, never thrown on — a bad stored rule must not take the
+ * table down.
+ */
+export declare function sanitizeFormattingRules(input: unknown): FormattingRule[];
+export interface RuleStyleState {
+    background?: string;
+    color?: string;
+    bold: boolean;
+    italic: boolean;
+    /** Every property the editor has no widget for, preserved across an edit. */
+    rest: CSSProperties;
+}
+export declare function styleToEditorState(style?: CSSProperties): RuleStyleState;
+export declare function editorStateToStyle(state: RuleStyleState): CSSProperties | undefined;
+/** Human-readable one-liner for a rule, used when it carries no explicit label. */
+export declare function describeRule(rule: FormattingRule): string;