@benjosivo/table-query 1.0.3 → 1.2.0

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, }: 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,15 +15,32 @@ 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, }) {
-    const table = useDataTable({ fetchData, advancedFilters, rowsPerPageOptions, defaultRowsPerPage, fetchFilterConfig });
+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,
+        rowsPerPageOptions,
+        defaultRowsPerPage,
+        fetchFilterConfig,
+        selectedIds,
+        onSelectionChange,
+    });
     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, 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, 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[];
@@ -13,10 +13,30 @@ export interface TableProps<T extends Record<string, any>> {
     onImagePreview?: (src: string) => void;
     /** Slot to render your own control in a column header (e.g. your own filter icon/input). Receives the column name. */
     renderHeaderExtra?: (column: string) => ReactNode;
+    /** Add a checkbox column; the header checkbox selects/deselects every displayed row. */
+    selectable?: boolean;
+    /** Where the checkbox column goes among the visible columns: 'start' (default), 'end', or a 0-based index. */
+    selectionColumnPosition?: SelectionColumnPosition;
+    /** Ids (value of each row's first column) of the currently selected rows. */
+    selectedIds?: any[];
+    /** Called when a row checkbox is toggled. */
+    onToggleRow?: (row: T, selected: boolean) => void;
+    /** Called when the header checkbox is toggled; applies to every displayed row. */
+    onToggleAllRows?: (selected: boolean) => void;
+    /** 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).
+ * 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 declare function Table<T extends Record<string, any>>({ items, fieldsType, paramFilter, sortColumn, sortDirection, onSort, sortingEnabled, onRowClick, onImagePreview, renderHeaderExtra, }: 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,19 +1,74 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { Cell } from './Cell.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).
+ * 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, }) {
-    const columns = useMemo(() => (items[0] ? Object.keys(items[0]) : paramFilter && paramFilter.length > 0 ? paramFilter.map((el) => el.nom) : []), [items]);
-    const idKey = items[0] ? Object.keys(items[0])[0] : null;
-    return (_jsxs("table", { children: [_jsx("thead", { className: 'tableHeader', children: _jsx("tr", { children: columns
-                        .filter((col, i) => (paramFilter ? paramFilter[i].type !== 'HIDE' : true))
-                        .map((col, i) => (_jsx("th", { "data-sort": col, children: _jsxs("div", { className: 'flex-row nowrap', style: { justifyContent: 'space-between', alignItems: 'center' }, children: [_jsxs("div", { className: 'flex-row nowrap clickOnSort', style: { cursor: sortingEnabled ? 'pointer' : 'default' }, onClick: () => sortingEnabled && onSort?.(col), children: [_jsx("span", { translate: 'yes', children: col }), sortingEnabled && (_jsx("span", { className: 'sort-icon', children: sortColumn === col ? (sortDirection === 'ASC' ? '\u2B06' : '\u2B07') : '\u2B07\u2B06' }))] }), renderHeaderExtra?.(col)] }) }, i))) }) }), _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) => (_jsx("tr", { style: { cursor: onRowClick ? 'pointer' : 'default' }, onClick: () => idKey && onRowClick?.(row[idKey], row), children: columns.map((col, colIdx) => {
-                            if (paramFilter && paramFilter[colIdx].type.trim() === 'HIDE')
-                                return;
-                            return (_jsx("td", { children: _jsx(Cell, { value: row[col], fieldType: fieldsType[colIdx]?.fieldType, onImagePreview: onImagePreview }) }, colIdx));
-                        }) }, idKey ? String(row[idKey]) : i)))] })] }));
+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]);
+    const allDisplayedSelected = displayedCount > 0 && selectedOnPage === displayedCount;
+    const someDisplayedSelected = selectedOnPage > 0 && !allDisplayedSelected;
+    /** -1 when there is no checkbox column, otherwise its slot among the visible columns. */
+    const selectionIndex = useMemo(() => {
+        if (!selectable)
+            return -1;
+        if (selectionColumnPosition === 'end')
+            return visibleColumns.length;
+        if (typeof selectionColumnPosition === 'number')
+            return Math.min(Math.max(0, Math.trunc(selectionColumnPosition)), visibleColumns.length);
+        return 0;
+    }, [selectable, selectionColumnPosition, visibleColumns.length]);
+    const withSelectionCell = (cells, selectionCell) => {
+        if (selectionIndex < 0)
+            return cells;
+        const next = [...cells];
+        next.splice(selectionIndex, 0, selectionCell);
+        return next;
+    };
+    const headerCells = visibleColumns.map(({ col }) => (_jsx("th", { "data-sort": col, children: _jsxs("div", { className: 'flex-row nowrap', style: { justifyContent: 'space-between', alignItems: 'center' }, children: [_jsxs("div", { className: 'flex-row nowrap clickOnSort', style: { cursor: sortingEnabled ? 'pointer' : 'default' }, onClick: () => sortingEnabled && onSort?.(col), children: [_jsx("span", { translate: 'yes', children: col }), sortingEnabled && (_jsx("span", { className: 'sort-icon', children: sortColumn === col ? (sortDirection === 'ASC' ? '\u2B06' : '\u2B07') : '\u2B07\u2B06' }))] }), renderHeaderExtra?.(col)] }) }, col)));
+    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 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, }) {
+    const ref = useRef(null);
+    // `indeterminate` only exists on the DOM node, not as an attribute.
+    useEffect(() => {
+        if (ref.current)
+            ref.current.indeterminate = indeterminate && !checked;
+    }, [indeterminate, checked]);
+    return (_jsx("input", { ref: ref, type: 'checkbox', className: 'selectionCheckbox', checked: checked, disabled: disabled, "aria-label": label, title: label, style: { cursor: disabled ? 'default' : 'pointer', margin: 0 }, onClick: (e) => e.stopPropagation(), onChange: (e) => onChange(e.target.checked) }));
 }

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;