@benjosivo/table-query 1.0.0

package/README.md

@@ -0,0 +1,87 @@
+# @benjosivo/table-query
+
+Table triable/filtrable/paginée : hook + composants React d'un côté (`/react`), logique
+SQL de pagination/tri/filtres côté serveur de l'autre (`/server`). Un projet peut
+n'utiliser qu'un des deux côtés.
+
+```
+src/
+  react/    → DataTable, Table, Pagination, useDataTable, FilterModal, FilterPanel, Cell, utils, types
+  server/   → createTableQueryModule (router Express + reqTableQuery)
+```
+
+## Installation
+
+```bash
+npm install @benjosivo/table-query
+```
+
+Peer dependencies : `react` (si tu utilises `/react`), `express` et `@benjosivo/mysql`
+(si tu utilises `/server`) — ce sont des `peerDependencies` optionnelles, donc pas
+besoin des trois si tu n'utilises qu'un des deux côtés.
+
+## Côté serveur
+
+```ts
+import { createTableQueryModule } from '@benjosivo/table-query/server';
+import { convertToMySQLDateTime, wrapRouteHandler } from './functions.js';
+import { getSQLCache, setSQLCache, deleteSQLCache } from './redis.js';
+
+const { router, reqTableQuery } = createTableQueryModule({
+    convertToMySQLDateTime,
+    wrapRouteHandler,
+    // Optionnel : à fournir seulement si tu veux pouvoir utiliser le cache quelque part.
+    cache: { getSQLCache, setSQLCache, deleteSQLCache },
+});
+
+app.use('/tableCreation/api', router);
+
+app.post('/api/commandes', wrapRouteHandler(async (req, res) => {
+    const result = await reqTableQuery({
+        query: `SELECT c.*, COUNT(*) OVER() AS TotalCount FROM commandes c`,
+        req,
+        paramFilter: ['MULTISELECT', 'HIDE', 'DATE', 'MULTISELECT'],
+        useCache: true, // voir plus bas
+    });
+    if (result.error) return res.status(result.status ?? 500).send(result.error);
+    res.json(result.data);
+}));
+```
+
+### Le paramètre `useCache`
+
+`reqTableQuery({ ..., useCache })` :
+
+- **`useCache: true`** (ou omis, si `cache` a été fourni à `createTableQueryModule`) —
+  comportement d'origine : résultats de requête et filtres mis en cache Redis, filtres
+  calculés en tâche de fond et récupérés via `/getFiltres` (polling).
+- **`useCache: false`** — aucune lecture/écriture Redis, requête toujours fraîche, filtres
+  calculés et renvoyés directement dans la même réponse (pas de round-trip `/getFiltres`).
+  Utile pour un écran qui doit toujours montrer les données à l'instant T, ou pour un
+  projet qui n'a pas (encore) de Redis configuré.
+- Si tu passes `useCache: true` sans avoir fourni `cache` à `createTableQueryModule`,
+  une erreur explicite est levée au lieu d'échouer silencieusement.
+
+Le cache est donc décidé **par appel** (`reqTableQuery`), pas globalement pour tout le
+module — tu peux avoir certains endpoints en cache et d'autres non avec le même module.
+
+## Côté React
+
+```tsx
+import { DataTable } from '@benjosivo/table-query/react';
+
+<DataTable
+    fetchData={(params) => fetch('/api/commandes', { method: 'POST', body: JSON.stringify(params) }).then((r) => r.ok ? r.json() : null)}
+    advancedFilters
+/>
+```
+
+Ou en composant seulement `useDataTable` + `Table` + `Pagination` avec ta propre UI de
+filtre (voir la conversation précédente pour l'exemple complet).
+
+## Build & publish
+
+```bash
+npm run build     # tsc → dist/react + dist/server
+npm publish       # même config GitHub Packages que @benjosivo/mysql
+```

package/dist/react/Cell.d.ts

@@ -0,0 +1,8 @@
+import type { FieldTypeName } from './types.js';
+interface CellProps {
+    value: unknown;
+    fieldType: FieldTypeName;
+    onImagePreview?: (src: string) => void;
+}
+export declare function Cell({ value, fieldType, onImagePreview }: CellProps): import("react").JSX.Element;
+export {};

package/dist/react/Cell.js

@@ -0,0 +1,37 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { formattedDate, isImage, looksLikeFile, truncatedJSON } from './utils.js';
+export function Cell({ value, fieldType, onImagePreview }) {
+    fieldType = fieldType.trim();
+    if (fieldType === 'DATE')
+        return _jsx(_Fragment, { children: formattedDate(value, true) });
+    if (fieldType === 'DATETIME' || fieldType === 'TIMESTAMP')
+        return _jsx(_Fragment, { children: formattedDate(value) });
+    if (fieldType === 'JSON' && value)
+        return _jsx("span", { dangerouslySetInnerHTML: { __html: truncatedJSON(value) } });
+    if ((fieldType === 'BLOB' || fieldType === 'FILE') && typeof value === 'string' && looksLikeFile(value)) {
+        return (_jsx("div", { className: 'flex-row', children: value.split(';').map((file) => isImage(file) ? (_jsx(LazyImage, { src: file, onClick: () => (onImagePreview ? onImagePreview(file) : window.open(file, '_blank')) }, file)) : (_jsx("button", { onClick: () => window.open(file, '_blank'), children: file.split('/').pop() }, file))) }));
+    }
+    return _jsx(_Fragment, { children: value == null ? '' : String(value) });
+}
+function LazyImage({ src, onClick }) {
+    const ref = useRef(null);
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting) {
+                setVisible(true);
+                observer.disconnect();
+            }
+        }, { rootMargin: '500px' });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+    return (_jsx("img", { ref: ref, src: visible ? src : undefined, style: { maxWidth: '3.75rem', maxHeight: '3.75rem', display: 'block', cursor: 'pointer' }, onClick: (e) => {
+            e.stopPropagation();
+            onClick();
+        } }));
+}

package/dist/react/DataTable.d.ts

@@ -0,0 +1,9 @@
+import type { DataTableProps } from './types.js';
+/**
+ * Batteries-included table: sorting, per-column quick filter, optional advanced filter
+ * panel, pagination and lazy-loaded image cells — all wired to `useDataTable` for you.
+ *
+ * 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;

package/dist/react/DataTable.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useDataTable } from './useDataTable.js';
+import { FilterModal } from './FilterModal.js';
+import { FilterPanel } from './FilterPanel.js';
+import { Table } from './Table.js';
+import { Pagination } from './Pagination.js';
+/**
+ * Batteries-included table: sorting, per-column quick filter, optional advanced filter
+ * panel, pagination and lazy-loaded image cells — all wired to `useDataTable` for you.
+ *
+ * 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 });
+    const [openFilterCol, setOpenFilterCol] = useState(null);
+    const [filterAnchor, setFilterAnchor] = useState(null);
+    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
+                                ? (col) => (_jsx("button", { style: { padding: 5, marginTop: 0 }, className: 'btnDataFilterTable', onClick: (e) => {
+                                        setOpenFilterCol(col);
+                                        setFilterAnchor(e.currentTarget);
+                                    }, children: "\uD83D\uDF83" }))
+                                : undefined }) }), _jsx(Pagination, { page: table.page, totalPages: table.totalPages, perPage: table.perPage, count: table.count, rowsPerPageOptions: table.rowsPerPageOptions, onChangePerPage: table.changePerPage, onFirst: table.firstPage, onPrevious: table.previousPage, onNext: table.nextPage, onLast: table.lastPage })] }), openFilterCol && (_jsx(FilterModal, { column: openFilterCol, values: uniqueValuesFor(openFilterCol), anchorEl: filterAnchor, onSort: (dir) => table.toggleSort(openFilterCol, dir), onApply: (selected) => table.setColumnFilter(openFilterCol, selected ?? undefined), onClose: () => setOpenFilterCol(null) })), table.loading && _jsx("div", { className: 'table-loading-overlay', children: "Chargement..." })] }));
+}

package/dist/react/FilterModal.d.ts

@@ -0,0 +1,18 @@
+import type { SortDirection } from './types.js';
+interface FilterModalProps {
+    column: string;
+    /** Unique values found in the currently loaded rows for this column. */
+    values: string[];
+    anchorEl: HTMLElement | null;
+    onSort: (direction: SortDirection) => void;
+    onApply: (selected: string[] | null) => void;
+    onClose: () => void;
+}
+/**
+ * Quick filter popover shown when clicking the magnifier button in a column header.
+ * Mirrors the original modal: sort shortcuts + a searchable checkbox list of values
+ * seen on the current page (this is inherently page-scoped, same as the source code —
+ * pair it with the advanced FilterPanel for filters over the full dataset).
+ */
+export declare function FilterModal({ column, values, anchorEl, onSort, onApply, onClose }: FilterModalProps): import("react").JSX.Element;
+export {};

package/dist/react/FilterModal.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+/**
+ * Quick filter popover shown when clicking the magnifier button in a column header.
+ * Mirrors the original modal: sort shortcuts + a searchable checkbox list of values
+ * seen on the current page (this is inherently page-scoped, same as the source code —
+ * pair it with the advanced FilterPanel for filters over the full dataset).
+ */
+export function FilterModal({ column, values, anchorEl, onSort, onApply, onClose }) {
+    const [search, setSearch] = useState('');
+    const [checked, setChecked] = useState(new Set(values));
+    const modalRef = useRef(null);
+    const [style, setStyle] = useState({ visibility: 'hidden' });
+    useEffect(() => setChecked(new Set(values)), [values]);
+    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, values]);
+    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 visibleValues = useMemo(() => ['Vide', ...values.filter((v) => v !== 'Vide' && v.toLowerCase().includes(search.toLowerCase()))], [values, search]);
+    const allChecked = visibleValues.every((v) => checked.has(v));
+    const toggleAll = (next) => {
+        setChecked((prev) => {
+            const copy = new Set(prev);
+            visibleValues.forEach((v) => (next ? copy.add(v) : copy.delete(v)));
+            return copy;
+        });
+    };
+    const toggleOne = (v) => {
+        setChecked((prev) => {
+            const copy = new Set(prev);
+            copy.has(v) ? copy.delete(v) : copy.add(v);
+            return copy;
+        });
+    };
+    return (_jsxs("div", { ref: modalRef, className: "modal flex-column", style: { minWidth: '5em', ...style }, children: [_jsxs("div", { className: "frame", children: [_jsx("button", { onClick: () => {
+                            onSort('ASC');
+                            onClose();
+                        }, children: "Sort A to Z" }), _jsx("button", { onClick: () => {
+                            onSort('DESC');
+                            onClose();
+                        }, children: "Sort Z to A" })] }), _jsxs("div", { className: "frame", style: { maxWidth: '33vh', minWidth: 100 }, children: [_jsx("button", { onClick: () => {
+                            onApply(null);
+                            onClose();
+                        }, children: "Clear Filter" }), _jsx("input", { type: "text", placeholder: "Search", value: search, onChange: (e) => setSearch(e.target.value) }), _jsxs("div", { className: "frame", style: { maxHeight: '20vh', overflowY: 'auto', overflowX: 'hidden', gap: 5 }, children: [_jsxs("div", { className: "flex-row nowrap", style: { alignItems: 'center' }, children: [_jsx("input", { type: "checkbox", checked: allChecked, onChange: (e) => toggleAll(e.target.checked) }), _jsx("label", { style: { width: '100%' }, children: "Tout S\u00E9lectionner" })] }), visibleValues.map((v) => (_jsxs("div", { className: "flex-row nowrap", style: { alignItems: 'center' }, children: [_jsx("input", { type: "checkbox", checked: checked.has(v), onChange: () => toggleOne(v) }), _jsx("label", { style: { width: '100%' }, children: v === 'Vide' ? 'Vide' : v })] }, v || '(empty)')))] })] }), _jsxs("div", { className: "flex-row", children: [_jsx("button", { onClick: () => {
+                            onApply(Array.from(checked));
+                            onClose();
+                        }, children: "OK" }), _jsx("button", { onClick: onClose, children: "Annuler" })] })] }));
+}

package/dist/react/FilterPanel.d.ts

@@ -0,0 +1,9 @@
+import type { FilterConfig } from './types.js';
+interface FilterPanelProps {
+    filterConfig: FilterConfig;
+    activeFilters: Record<string, unknown>;
+    onChange: (key: string, value: unknown) => void;
+    onClearAll: () => void;
+}
+export declare function FilterPanel({ filterConfig, activeFilters, onChange, onClearAll }: FilterPanelProps): import("react").JSX.Element;
+export {};

package/dist/react/FilterPanel.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+export function FilterPanel({ filterConfig, activeFilters, onChange, onClearAll }) {
+    const [open, setOpen] = useState(false);
+    const hasActive = Object.keys(activeFilters).length > 0;
+    return (_jsxs("div", { className: 'flex-column nowrap', style: { height: '-webkit-fill-available' }, children: [_jsx("button", { style: { maxWidth: '18rem' }, onClick: () => setOpen((o) => !o), children: "Filtres" }), open && (_jsxs("div", { className: 'responsive-panel frame nowrap active', style: { minWidth: 'min-content' }, children: [hasActive && _jsx("button", { onClick: onClearAll, children: "R\u00E9initialiser les filtres" }), Object.entries(filterConfig).map(([key, info]) => {
+                        if (!info.type || info.type === 'HIDE')
+                            return null;
+                        return (_jsxs("div", { className: 'flex-column frame', children: [_jsx("span", { children: key }), activeFilters[key] !== undefined && (_jsx("button", { onClick: () => onChange(key, undefined), children: "R\u00E9initialiser le filtre" })), _jsxs("div", { className: 'filterOption', style: { maxWidth: '-webkit-fill-available' }, children: [['MULTISELECT', 'UNGROUP_MULTISELECT'].includes(info.type) && (_jsx(MultiSelectFilter, { filterKey: key, values: info.values, ungroup: info.type === 'UNGROUP_MULTISELECT', active: activeFilters[key], onApply: (vals) => onChange(key, vals.length ? vals : undefined) })), info.type === 'SLIDER' && (_jsx(SliderFilter, { values: info.values, onApply: (min, max) => onChange(key, { min, max }) })), ['DATE', 'DATETIME'].includes(info.type) && (_jsx(DateFilter, { type: info.type, values: info.values, onApply: (min, max) => onChange(key, { min, max, date: true }) }))] })] }, key));
+                    })] }))] }));
+}
+// ==================== MULTISELECT ====================
+function MultiSelectFilter({ values, active, ungroup, onApply, }) {
+    const [search, setSearch] = useState('');
+    // null = "everything selected" (no filter applied yet)
+    const [selected, setSelected] = useState(active ?? null);
+    const items = useMemo(() => {
+        const base = search ? values.filter((v) => v.toLowerCase().includes(search.toLowerCase())).slice(0, 400) : values.slice(0, 400);
+        const withActive = selected ? Array.from(new Set([...base, ...selected])) : base;
+        return ['Vide', ...withActive.filter((v) => v !== 'Vide')];
+    }, [values, search, selected]);
+    const allChecked = selected === null || items.every((v) => selected.includes(v));
+    const someChecked = selected !== null && items.some((v) => selected.includes(v));
+    const toggleAll = (checked) => setSelected(checked ? (search ? [...items] : null) : []);
+    const toggleOne = (val) => {
+        setSelected((prev) => {
+            const base = prev === null ? [...items] : prev;
+            const next = base.includes(val) ? base.filter((v) => v !== val) : [...base, val];
+            return !search && next.length === items.length ? null : next;
+        });
+    };
+    const apply = () => {
+        const toSend = (selected ?? items).map((v) => (v === 'Vide' || v === 'Non Vide' ? v : ungroup ? `/*/${v}/*/` : v));
+        onApply(selected === null ? [] : toSend);
+    };
+    return (_jsxs("div", { className: 'predefinedInfos frame', children: [_jsx("div", { className: 'input-field', children: _jsx("input", { type: 'text', placeholder: 'Rechercher', autoComplete: 'off', value: search, onChange: (e) => setSearch(e.target.value) }) }), _jsxs("div", { className: 'selectAllRow flex-row nowrap', style: { padding: '4px 0', borderBottom: '1px solid #ccc' }, children: [_jsx("input", { type: 'checkbox', checked: allChecked, ref: (el) => el && (el.indeterminate = !allChecked && someChecked), onChange: (e) => toggleAll(e.target.checked) }), _jsx("label", { style: { fontWeight: 'bold' }, children: "(S\u00E9lectionner tout)" })] }), _jsx("div", { style: { overflowY: 'auto', maxHeight: '20vh', maxWidth: '25rem' }, className: 'listPredefinedInfos flex-column nowrap', children: items.map((val) => (_jsxs("div", { className: 'flex-row nowrap', children: [_jsx("input", { type: 'checkbox', checked: selected === null || selected.includes(val), onChange: () => toggleOne(val) }), _jsx("label", { style: { cursor: 'pointer' }, onClick: () => toggleOne(val), children: val })] }, val || '(empty)'))) }), _jsx("button", { className: 'btn-accent', onClick: apply, children: "Appliquer" })] }));
+}
+// ==================== SLIDER (min/max range, no external dependency) ====================
+function SliderFilter({ values, onApply }) {
+    const [min, setMin] = useState(values[0]);
+    const [max, setMax] = useState(values[1]);
+    const commit = (nextMin, nextMax) => {
+        setMin(nextMin);
+        setMax(nextMax);
+        onApply(nextMin, nextMax);
+    };
+    return (_jsxs("div", { style: { padding: '0 1rem 1rem 0' }, children: [_jsxs("div", { className: 'flex-row nowrap', style: { justifyContent: 'space-between' }, children: [_jsx("input", { type: 'number', className: 'inputSlider', value: min, min: values[0], max: max, onChange: (e) => commit(Number(e.target.value), max) }), _jsx("input", { type: 'number', className: 'inputSlider', value: max, min: min, max: values[1], onChange: (e) => commit(min, Number(e.target.value)) })] }), _jsx("input", { type: 'range', min: values[0], max: values[1], value: min, onChange: (e) => commit(Number(e.target.value), max) }), _jsx("input", { type: 'range', min: values[0], max: values[1], value: max, onChange: (e) => commit(min, Number(e.target.value)) })] }));
+}
+// ==================== DATE RANGE ====================
+function DateFilter({ type, values, onApply }) {
+    const inputType = type === 'DATE' ? 'date' : 'datetime-local';
+    const fmt = (d) => {
+        const dt = new Date(d);
+        const iso = dt.toISOString().slice(0, -1);
+        return type === 'DATE' ? iso.split('T')[0] : iso.slice(0, 16);
+    };
+    const [min, setMin] = useState(fmt(values[0]));
+    const [max, setMax] = useState(fmt(values[1]));
+    const canApply = Boolean(min && max);
+    const apply = () => {
+        const maxDate = new Date(max);
+        if (type === 'DATE')
+            maxDate.setDate(maxDate.getDate() + 1);
+        onApply(new Date(min), maxDate);
+    };
+    return (_jsxs("div", { className: 'flex-column nowrap', children: [_jsxs("div", { className: 'flex-row nowrap', style: { justifyContent: 'space-between' }, children: [_jsx("input", { type: inputType, value: min, min: fmt(values[0]), max: fmt(values[1]), onChange: (e) => setMin(e.target.value) }), _jsx("input", { type: inputType, value: max, min: fmt(values[0]), max: fmt(values[1]), onChange: (e) => setMax(e.target.value) })] }), canApply && (_jsx("button", { className: 'btn-accent', onClick: apply, children: "Appliquer" }))] }));
+}

package/dist/react/Pagination.d.ts

@@ -0,0 +1,18 @@
+export interface PaginationProps {
+    page: number;
+    totalPages: number;
+    perPage: number;
+    count: number;
+    rowsPerPageOptions?: number[];
+    onChangePerPage?: (n: number) => void;
+    onFirst: () => void;
+    onPrevious: () => void;
+    onNext: () => void;
+    onLast: () => void;
+}
+/**
+ * Page controls + rows-per-page select + "x → y / total" counter.
+ * Works with `useDataTable`'s return value, or with your own pagination state —
+ * it only needs plain numbers and callbacks.
+ */
+export declare function Pagination({ page, totalPages, perPage, count, rowsPerPageOptions, onChangePerPage, onFirst, onPrevious, onNext, onLast, }: PaginationProps): import("react").JSX.Element;

package/dist/react/Pagination.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Page controls + rows-per-page select + "x → y / total" counter.
+ * Works with `useDataTable`'s return value, or with your own pagination state —
+ * it only needs plain numbers and callbacks.
+ */
+export function Pagination({ page, totalPages, perPage, count, rowsPerPageOptions = [10, 25, 50, 100, 250, 500, 1000], onChangePerPage, onFirst, onPrevious, onNext, onLast, }) {
+    return (_jsxs("div", { className: "flex-row", style: { alignItems: 'center', justifyContent: 'space-between' }, children: [onChangePerPage && (_jsxs("div", { className: "divSelectRowPerPage flex-row", style: { alignItems: 'center', gap: 1, display: totalPages <= 1 ? 'none' : 'flex' }, children: [_jsx("select", { className: "row-per-page", value: perPage, onChange: (e) => onChangePerPage(Number(e.target.value)), children: rowsPerPageOptions.map((v) => (_jsx("option", { value: v, children: v }, v))) }), _jsx("div", { children: "/page" })] })), _jsxs("span", { className: "totalLinesTable", children: [(page - 1) * perPage + 1, " \u279D ", Math.min(page * perPage, count), " / ", count] }), totalPages > 1 && (_jsxs("div", { className: "pagination", children: [_jsx("button", { className: "pagination-button", onClick: onFirst, disabled: page === 1, children: "\u00AB" }), _jsx("button", { className: "pagination-button", onClick: onPrevious, disabled: page === 1, children: "\u2039" }), _jsxs("span", { className: "current-page", children: ["Page ", page, "/", totalPages] }), _jsx("button", { className: "pagination-button", onClick: onNext, disabled: page === totalPages, children: "\u203A" }), _jsx("button", { className: "pagination-button", onClick: onLast, disabled: page === totalPages, children: "\u00BB" })] }))] }));
+}

package/dist/react/Table.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import type { FieldTypeInfo, ParamFilter, SortDirection } from './types.js';
+export interface TableProps<T extends Record<string, any>> {
+    items: T[];
+    fieldsType?: FieldTypeInfo[];
+    paramFilter?: ParamFilter[];
+    sortColumn?: string;
+    sortDirection?: SortDirection;
+    /** Called with the column name when its header is clicked (only if sortingEnabled). */
+    onSort?: (column: string) => void;
+    sortingEnabled?: boolean;
+    onRowClick?: (id: any, row: T) => void;
+    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;
+}
+/**
+ * Just the `<table>` — header, sorting, rows, cell formatting (dates, JSON, lazy images).
+ * 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;

package/dist/react/Table.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Cell } from './Cell.js';
+/**
+ * Just the `<table>` — header, sorting, rows, cell formatting (dates, JSON, lazy images).
+ * 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)))] })] }));
+}

package/dist/react/index.d.ts

@@ -0,0 +1,9 @@
+export { DataTable } from './DataTable.js';
+export { Table } from './Table.js';
+export type { TableProps } from './Table.js';
+export { Pagination } from './Pagination.js';
+export type { PaginationProps } from './Pagination.js';
+export { useDataTable } from './useDataTable.js';
+export { FilterModal } from './FilterModal.js';
+export { FilterPanel } from './FilterPanel.js';
+export type { DataTableProps, FetchParams, FetchResult, FieldTypeInfo, FilterConfig, FilterFieldConfig, SortDirection } from './types.js';

package/dist/react/index.js

@@ -0,0 +1,6 @@
+export { DataTable } from './DataTable.js';
+export { Table } from './Table.js';
+export { Pagination } from './Pagination.js';
+export { useDataTable } from './useDataTable.js';
+export { FilterModal } from './FilterModal.js';
+export { FilterPanel } from './FilterPanel.js';

package/dist/react/types.d.ts

@@ -0,0 +1,57 @@
+export type SortDirection = 'ASC' | 'DESC';
+/** Matches the "fieldType" info your API already returns per column. */
+export type FieldTypeName = 'DATE' | 'DATETIME' | 'TIMESTAMP' | 'JSON' | 'BLOB' | 'FILE' | string;
+export interface FieldTypeInfo {
+    fieldType: FieldTypeName;
+}
+/** Body sent to your fetchData callback on every load. */
+export interface FetchParams {
+    limit: number;
+    offset: number;
+    sorting?: string;
+    filtre?: Record<string, unknown>;
+    /** Ask the backend to (re)send the advanced filter definitions (filtre config). */
+    setFilter?: boolean;
+}
+export interface FetchResult<T> {
+    items: T[];
+    count: number;
+    /** One entry per column, in the same order as Object.keys(items[0]). */
+    fieldsType?: FieldTypeInfo[];
+    /** Advanced filter definitions, sent back by the API (see FilterFieldConfig). */
+    paramFilter?: ParamFilter[];
+    filtre?: FilterConfig;
+    /** Key to re-fetch filter definitions later via a dedicated endpoint. */
+    cleRecupFiltre?: string;
+}
+export type FilterFieldType = 'MULTISELECT' | 'UNGROUP_MULTISELECT' | 'SLIDER' | 'DATE' | 'DATETIME' | 'HIDE';
+export interface FilterFieldConfig {
+    type: FilterFieldType;
+    /** MULTISELECT: string[]. SLIDER: [number, number]. DATE/DATETIME: [string, string]. */
+    values: any;
+}
+export type ParamFilter = {
+    nom: string;
+    type: FilterFieldType;
+};
+export type FilterConfig = Record<string, FilterFieldConfig>;
+export interface DataTableProps<T extends Record<string, any>> {
+    /** Called every time the table needs data (page change, sort, filter, page size). */
+    fetchData: (params: FetchParams) => Promise<FetchResult<T> | null>;
+    /** Called when a row is clicked, with the value of the row's first column as id. */
+    onRowClick?: (id: any, row: T) => void;
+    /** Enable the per-column quick filter button (magnifier icon) in the header. Default true. */
+    filterEnabled?: boolean;
+    /** Enable click-to-sort on column headers. Default true. */
+    sortingEnabled?: boolean;
+    /** Enable the advanced filter side panel (multiselect / slider / date), driven by fieldsType.filtre. Default false. */
+    advancedFilters?: boolean;
+    /** CSS max-height for the scroll area, e.g. "76vh". */
+    height?: string;
+    rowsPerPageOptions?: number[];
+    defaultRowsPerPage?: number;
+    /** Called instead of the default new-tab preview when an image cell is clicked. */
+    onImagePreview?: (src: string) => void;
+    /** Optional endpoint to lazily fetch filter definitions using cleRecupFiltre. */
+    fetchFilterConfig?: (cleRecupFiltre: string) => Promise<FilterConfig>;
+}

package/dist/react/types.js

@@ -0,0 +1,2 @@
+// ==================== TYPES ====================
+export {};

package/dist/react/useDataTable.d.ts

@@ -0,0 +1,28 @@
+import type { DataTableProps, FieldTypeInfo, FilterConfig, SortDirection, ParamFilter } from './types.js';
+export declare function useDataTable<T extends Record<string, any>>({ fetchData, advancedFilters, rowsPerPageOptions, defaultRowsPerPage, fetchFilterConfig, }: Pick<DataTableProps<T>, 'fetchData' | 'advancedFilters' | 'rowsPerPageOptions' | 'defaultRowsPerPage' | 'fetchFilterConfig'>): {
+    items: T[];
+    count: number;
+    fieldsType: FieldTypeInfo[];
+    paramFilter: ParamFilter[];
+    loading: boolean;
+    page: number;
+    perPage: number;
+    rowsPerPageOptions: number[];
+    totalPages: number;
+    sortColumn: string;
+    sortDirection: SortDirection;
+    filters: Record<string, unknown>;
+    filterConfig: FilterConfig | null;
+    toggleSort: (column: string, forceDirection?: SortDirection) => void;
+    setColumnFilter: (key: string, value: unknown) => void;
+    replaceFilters: (next: Record<string, unknown>) => void;
+    clearFilter: (key: string) => void;
+    clearAllFilters: () => void;
+    changePerPage: (n: number) => void;
+    goToPage: (p: number) => Promise<void>;
+    nextPage: () => Promise<void>;
+    previousPage: () => Promise<void>;
+    firstPage: () => Promise<void>;
+    lastPage: () => Promise<void>;
+    refresh: () => Promise<void>;
+};

package/dist/react/useDataTable.js

@@ -0,0 +1,127 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+export function useDataTable({ fetchData, advancedFilters, rowsPerPageOptions = [10, 25, 50, 100, 250, 500, 1000], defaultRowsPerPage = 100, fetchFilterConfig, }) {
+    const [items, setItems] = useState([]);
+    const [count, setCount] = useState(0);
+    const [fieldsType, setFieldsType] = useState([]);
+    const [paramFilter, setParamFilter] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [page, setPage] = useState(1);
+    const [perPage, setPerPage] = useState(defaultRowsPerPage);
+    const [sortColumn, setSortColumn] = useState('');
+    const [sortDirection, setSortDirection] = useState('ASC');
+    const [filters, setFilters] = useState({});
+    const [filterConfig, setFilterConfig] = useState(null);
+    const [cleRecupFiltre, setCleRecupFiltre] = useState();
+    // Guards against a slow, stale request overwriting a newer one.
+    const requestId = useRef(0);
+    const sorting = useMemo(() => (sortColumn ? `\`${sortColumn}\` ${sortDirection}` : ''), [sortColumn, sortDirection]);
+    const totalPages = useMemo(() => Math.max(1, Math.ceil(count / perPage)), [count, perPage]);
+    const load = useCallback(async (targetPage) => {
+        const id = ++requestId.current;
+        setLoading(true);
+        try {
+            const offset = (targetPage - 1) * perPage;
+            const result = await fetchData({
+                limit: perPage,
+                offset,
+                sorting: sorting || undefined,
+                filtre: Object.keys(filters).length > 0 ? filters : undefined,
+                setFilter: advancedFilters || undefined,
+            });
+            if (id !== requestId.current)
+                return; // a newer request already landed
+            if (!result) {
+                setItems([]);
+                setCount(0);
+                return;
+            }
+            setItems(result.items || []);
+            setCount(result.count ?? 0);
+            setFieldsType(result.fieldsType || []);
+            setParamFilter(result.paramFilter || []);
+            setPage(targetPage);
+            if (result.filtre)
+                setFilterConfig(result.filtre);
+            if (result.cleRecupFiltre)
+                setCleRecupFiltre(result.cleRecupFiltre);
+        }
+        finally {
+            if (id === requestId.current)
+                setLoading(false);
+        }
+    }, [fetchData, perPage, sorting, filters, advancedFilters]);
+    // Re-fetch whenever page size, sorting or filters change (always resets to page 1).
+    useEffect(() => {
+        load(1);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [perPage, sorting, filters]);
+    // Lazily resolve filter definitions if the API only gave us a lookup key.
+    useEffect(() => {
+        if (!advancedFilters || filterConfig || !cleRecupFiltre || !fetchFilterConfig)
+            return;
+        let cancelled = false;
+        fetchFilterConfig(cleRecupFiltre).then((cfg) => {
+            if (!cancelled) {
+                setFilterConfig(cfg);
+                setCleRecupFiltre(undefined);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [advancedFilters, filterConfig, cleRecupFiltre, fetchFilterConfig]);
+    const goToPage = useCallback((p) => load(Math.min(Math.max(1, p), totalPages)), [load, totalPages]);
+    const nextPage = useCallback(() => goToPage(page + 1), [goToPage, page]);
+    const previousPage = useCallback(() => goToPage(page - 1), [goToPage, page]);
+    const firstPage = useCallback(() => goToPage(1), [goToPage]);
+    const lastPage = useCallback(() => goToPage(totalPages), [goToPage, totalPages]);
+    const toggleSort = useCallback((column, forceDirection) => {
+        setSortColumn((prevCol) => {
+            setSortDirection((prevDir) => forceDirection ?? (prevCol === column ? (prevDir === 'ASC' ? 'DESC' : 'ASC') : 'ASC'));
+            return column;
+        });
+    }, []);
+    const setColumnFilter = useCallback((key, value) => {
+        setFilters((prev) => {
+            const next = { ...prev };
+            if (value === undefined || (Array.isArray(value) && value.length === 0))
+                delete next[key];
+            else
+                next[key] = value;
+            return next;
+        });
+    }, []);
+    const clearFilter = useCallback((key) => setColumnFilter(key, undefined), [setColumnFilter]);
+    const clearAllFilters = useCallback(() => setFilters({}), []);
+    /** Replace the whole filter object at once — handy for a custom search UI that
+     * doesn't reason "per column" and just wants to hand over its own `filtre` payload. */
+    const replaceFilters = useCallback((next) => setFilters(next), []);
+    const changePerPage = useCallback((n) => setPerPage(n), []);
+    return {
+        items,
+        count,
+        fieldsType,
+        paramFilter,
+        loading,
+        page,
+        perPage,
+        rowsPerPageOptions,
+        totalPages,
+        sortColumn,
+        sortDirection,
+        filters,
+        filterConfig,
+        toggleSort,
+        setColumnFilter,
+        replaceFilters,
+        clearFilter,
+        clearAllFilters,
+        changePerPage,
+        goToPage,
+        nextPage,
+        previousPage,
+        firstPage,
+        lastPage,
+        refresh: () => load(page),
+    };
+}

package/dist/react/utils.d.ts

@@ -0,0 +1,6 @@
+export declare function formattedDate(value: unknown, dateOnly?: boolean): string;
+export declare function isImage(path: string): boolean;
+export declare function looksLikeFile(str: string): boolean;
+/** Returns HTML with <span class="..."> wrapping each JSON token, for use with dangerouslySetInnerHTML. */
+export declare function syntaxHighlightJSON(json: string): string;
+export declare function truncatedJSON(value: unknown, maxLen?: number): string;

package/dist/react/utils.js

@@ -0,0 +1,40 @@
+// ==================== UTILS ====================
+export function formattedDate(value, dateOnly = false) {
+    if (!value)
+        return '';
+    const d = new Date(value);
+    if (Number.isNaN(d.getTime()))
+        return String(value);
+    const date = d.toLocaleDateString();
+    if (dateOnly)
+        return date;
+    return `${date} ${d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
+}
+export function isImage(path) {
+    return /\.(png|jpg|jpeg|svg|webp|gif)$/i.test(path);
+}
+export function looksLikeFile(str) {
+    if (!str)
+        return false;
+    const ext = /\.(txt|pdf|csv|json|xml|yaml|yml|ts|js|tsx|jsx|html|css|png|jpg|jpeg|gif|svg|zip|tar|gz|md|docx?|xlsx?|pptx?)$/i;
+    return str.split(';').every((f) => ext.test(f.trim()));
+}
+/** Returns HTML with <span class="..."> wrapping each JSON token, for use with dangerouslySetInnerHTML. */
+export function syntaxHighlightJSON(json) {
+    const escaped = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    return escaped.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, (m) => {
+        let cls = 'number';
+        if (/^"/.test(m))
+            cls = /:$/.test(m) ? 'key' : 'string';
+        else if (/true|false/.test(m))
+            cls = 'boolean';
+        else if (/null/.test(m))
+            cls = 'null';
+        return `<span class="${cls}">${m}</span>`;
+    });
+}
+export function truncatedJSON(value, maxLen = 200) {
+    const str = JSON.stringify(value, null, 2);
+    const truncated = str.length > maxLen ? `${str.slice(0, maxLen)}...` : str;
+    return syntaxHighlightJSON(truncated);
+}

package/dist/server/index.d.ts

@@ -0,0 +1,41 @@
+import type { CacheDeps, ParamFilterType, ReqTableQueryOptions, TableQueryDeps } from './types.js';
+export type { CacheDeps, ParamFilterType, ReqTableQueryOptions, TableQueryDeps } from './types.js';
+/**
+ * Creates the table-query module (router + query helpers) bound to this project's own
+ * date formatting / route-wrapping / cache implementations. Nothing here is hardcoded to
+ * a specific project — pass whatever you already have in `functions.js` / `redis.js`.
+ *
+ * Caching is opt-in per call (see `useCache` on `reqTableQuery`): if you never pass
+ * `deps.cache`, the module works exactly the same but always computes fresh.
+ */
+export declare function createTableQueryModule(deps: TableQueryDeps): {
+    router: import("express-serve-static-core").Router;
+    reqTableQuery: (opt: ReqTableQueryOptions) => Promise<{
+        error: string;
+        status: number;
+        empty?: undefined;
+        data?: undefined;
+    } | {
+        empty: true;
+        data: any;
+        error?: undefined;
+        status?: undefined;
+    } | {
+        data: any;
+        error?: undefined;
+        status?: undefined;
+        empty?: undefined;
+    }>;
+    getFiltersOfQuery: (opt: {
+        payload: any;
+        baseQuery: string;
+        argsQuery?: any[];
+        paramFilter: ParamFilterType[];
+        cleRecupFiltre?: string;
+        cache?: CacheDeps;
+        keepCache?: {
+            keepCache: number;
+            titleSQLCacheFiltre: string;
+        };
+    }) => Promise<any>;
+};

package/dist/server/index.js

@@ -0,0 +1,240 @@
+import { Router } from 'express';
+import { connectionRollback, executeMySQLQuery, executeMySQLQuery2, executeMySQLQuery3 } from '@benjosivo/mysql';
+import { createHash, randomUUID } from 'crypto';
+/**
+ * Creates the table-query module (router + query helpers) bound to this project's own
+ * date formatting / route-wrapping / cache implementations. Nothing here is hardcoded to
+ * a specific project — pass whatever you already have in `functions.js` / `redis.js`.
+ *
+ * Caching is opt-in per call (see `useCache` on `reqTableQuery`): if you never pass
+ * `deps.cache`, the module works exactly the same but always computes fresh.
+ */
+export function createTableQueryModule(deps) {
+    const router = Router();
+    router.get('/getFiltres', deps.wrapRouteHandler(getFiltres));
+    function resolveCache(useCache) {
+        const wantsCache = useCache ?? Boolean(deps.cache);
+        if (!wantsCache)
+            return null;
+        if (!deps.cache) {
+            throw new Error(`useCache: true a été demandé mais aucune implémentation de cache n'a été fournie à createTableQueryModule().`);
+        }
+        return deps.cache;
+    }
+    async function getFiltres(req, res) {
+        if (!deps.cache) {
+            return res.status(501).send(`Le cache n'est pas configuré pour ce module — /getFiltres n'est disponible qu'avec useCache.`);
+        }
+        if (!req.query || !req.query.cleRecupFiltre) {
+            return res.status(400).send(`La clé de récupération des filtres est manquante.`);
+        }
+        const keyRecupFiltres = `tableQuery:recupFiltres:${req.query.cleRecupFiltre}`;
+        let interval = null;
+        req.on('close', () => {
+            if (interval)
+                clearInterval(interval);
+            deps.cache.deleteSQLCache(keyRecupFiltres);
+        });
+        async function sendFiltres() {
+            const cacheFiltre = await deps.cache.getSQLCache(keyRecupFiltres);
+            if (!cacheFiltre) {
+                return req.closed ? null : res.status(410).send(`La clé de récupération des filtres a expiré. Veuillez rafraîchir la page.`);
+            }
+            if (!cacheFiltre.data.status && cacheFiltre.data.filtres) {
+                req.closed ? null : res.json(cacheFiltre.data.filtres);
+                deps.cache.deleteSQLCache(keyRecupFiltres);
+                if (interval)
+                    clearInterval(interval);
+                return;
+            }
+        }
+        interval = setInterval(sendFiltres, 200);
+        sendFiltres();
+    }
+    async function reqTableQuery(opt) {
+        const { query, req, paramFilter, sort, argsQuery, keepCache = 5 * 60 * 1000 } = opt;
+        if (!req.body && !req.query) {
+            return { error: `req.query or req.body is missing`, status: 400 };
+        }
+        const cache = resolveCache(opt.useCache);
+        const reqInfo = req.body ?? req.query;
+        const limit = reqInfo.limit ? parseInt(reqInfo.limit, 10) : 1000;
+        const offset = reqInfo.offset ? parseInt(reqInfo.offset, 10) : 0;
+        const sorting = reqInfo.sorting || sort || '2';
+        const filtres = reqInfo.filtre ? (req.method === 'GET' ? JSON.parse(reqInfo.filtre) : reqInfo.filtre) : {};
+        const whereClause = buildWhereClause(filtres);
+        if (!paramFilter && reqInfo.setFilter) {
+            return { error: `"paramFilter" est obligatoire quand setFilter === true`, status: 400 };
+        }
+        // ── Paginated items ────────────────────────────────────────────────
+        const itemsSql = `${query} ${whereClause} ORDER BY ${sorting} LIMIT ${limit < 0 ? 0 : limit} OFFSET ${offset < 0 ? 0 : offset}`;
+        let { payload, status, error, empty } = await getDataFromQuery(itemsSql, argsQuery, cache ? keepCache : 0, cache);
+        payload.paramFilter = paramFilter
+            ? paramFilter.map((param, i) => {
+                return { nom: payload.fieldsType[i].fieldName, type: param };
+            })
+            : [];
+        if (empty)
+            return { empty, data: payload };
+        if (error && status)
+            return { error, status };
+        if (!reqInfo.setFilter)
+            return { data: payload };
+        // ── Filters ────────────────────────────────────────────────────────
+        const baseQuery = `${query} ${whereClause}`;
+        if (!cache) {
+            // No cache configured/requested for this call: compute synchronously and
+            // return directly, no polling round-trip via /getFiltres needed.
+            payload.filtre = await getFiltersOfQuery({ payload, baseQuery, argsQuery, paramFilter: paramFilter });
+            return { data: payload };
+        }
+        const keyFilter = createHash('sha256').update(baseQuery).digest('hex');
+        const titleSQLCacheFiltre = `tableQuery:filtres:${keyFilter}`;
+        const cachedFiltre = await cache.getSQLCache(titleSQLCacheFiltre);
+        if (cachedFiltre && keepCache) {
+            payload.filtre = cachedFiltre.data;
+        }
+        else {
+            payload.cleRecupFiltre = randomUUID();
+            getFiltersOfQuery({
+                payload,
+                baseQuery,
+                argsQuery,
+                paramFilter: paramFilter,
+                cleRecupFiltre: payload.cleRecupFiltre,
+                cache,
+                keepCache: { keepCache, titleSQLCacheFiltre },
+            });
+        }
+        return { data: payload };
+    }
+    // ── Helpers ────────────────────────────────────────────────────────────
+    async function getDataFromQuery(itemsSql, argsQuery, keepCache, cache) {
+        const titleSQLCacheQuery = `tableQuery:query:${createHash('sha256').update(itemsSql).digest('hex')}`;
+        const cachedQuery = cache && keepCache ? await cache.getSQLCache(titleSQLCacheQuery) : null;
+        let payload;
+        if (cachedQuery) {
+            payload = cachedQuery.data;
+        }
+        else {
+            const reqRows = await executeMySQLQuery3({ query: itemsSql, values: argsQuery, returnFieldTypes: true, returnListTables: true });
+            if (!reqRows.ok)
+                return { status: 500, error: reqRows.error };
+            const tableValues = reqRows.rows.map(({ TotalCount, ...rest }) => rest);
+            if (tableValues.length === 0)
+                return { empty: true, payload: { items: tableValues, count: 0, fieldsType: reqRows.fieldsType } };
+            Object.keys(tableValues[0]).forEach((col, i) => {
+                if (col === 'Documents')
+                    reqRows.fieldsType[i].fieldType = 'FILE';
+            });
+            payload = { items: tableValues, count: reqRows.rows[0]?.TotalCount ?? 0, fieldsType: reqRows.fieldsType };
+            if (cache && keepCache) {
+                await cache.setSQLCache(titleSQLCacheQuery, { title: titleSQLCacheQuery, data: payload, expiration: Date.now() + keepCache });
+            }
+        }
+        return { payload };
+    }
+    async function getFiltersOfQuery(opt) {
+        const { payload, baseQuery, argsQuery, paramFilter, cleRecupFiltre, cache, keepCache } = opt;
+        const columns = Object.keys(payload.items[0]);
+        if (cleRecupFiltre && cache) {
+            const titreRecupFiltres = `tableQuery:recupFiltres:${cleRecupFiltre}`;
+            await cache.setSQLCache(titreRecupFiltres, { title: titreRecupFiltres, data: { status: `Waiting` }, expiration: Date.now() + 60 * 60 * 1000 });
+        }
+        const filtres = await computeFiltersViaTempTable({ baseQuery, argsQuery, columns, paramFilter });
+        if (cleRecupFiltre && cache) {
+            const titreRecupFiltres = `tableQuery:recupFiltres:${cleRecupFiltre}`;
+            await cache.setSQLCache(titreRecupFiltres, { title: titreRecupFiltres, data: { filtres }, expiration: Date.now() + 60 * 60 * 1000 });
+        }
+        if (keepCache && cache) {
+            await cache.setSQLCache(keepCache.titleSQLCacheFiltre, { title: keepCache.titleSQLCacheFiltre, data: filtres, expiration: Date.now() + keepCache.keepCache });
+        }
+        return filtres;
+    }
+    function buildWhereClause(filtres) {
+        if (Object.keys(filtres).length === 0)
+            return '';
+        function singleCondition(key, val) {
+            const lower = val.toLowerCase();
+            if (lower === 'null' || lower === 'vide')
+                return `\`${key}\` IS NULL`;
+            if (lower === 'notnull' || lower === 'non vide')
+                return `\`${key}\` IS NOT NULL`;
+            if (val.startsWith('!'))
+                return `\`${key}\` NOT LIKE '${val.replaceAll("'", "''")}'`;
+            return `\`${key}\` LIKE '${val.replaceAll("'", "''")}'`;
+        }
+        const conditions = Object.entries(filtres).map(([key, value]) => {
+            if (Array.isArray(value)) {
+                return `(${value.map((val) => singleCondition(key, String(val).replaceAll('/*/', '%'))).join(' OR ')})`;
+            }
+            if (value !== null && typeof value === 'object' && 'min' in value && 'max' in value) {
+                const min = value.date ? `'${deps.convertToMySQLDateTime(value.min)}'` : value.min;
+                const max = value.date ? `'${deps.convertToMySQLDateTime(value.max)}'` : value.max;
+                if (value.min && value.max)
+                    return `(\`${key}\` BETWEEN ${min} AND ${max})`;
+                if (value.max && !value.min)
+                    return `(\`${key}\` <= ${max})`;
+                if (value.min && !value.max)
+                    return `(\`${key}\` >= ${min})`;
+                return undefined;
+            }
+            return singleCondition(key, String(value).replaceAll('/*/', '%'));
+        });
+        return `WHERE ${conditions.filter((el) => !!el).join(' AND ')}`;
+    }
+    async function computeFiltersViaTempTable(opt) {
+        const { baseQuery, argsQuery, columns, paramFilter } = opt;
+        const tmpTable = `tmp_filter_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;
+        const createSql = `CREATE TEMPORARY TABLE \`${tmpTable}\` AS (${baseQuery})`;
+        const created = await executeMySQLQuery2({ query: createSql, values: argsQuery, connKey: true });
+        if (created.error)
+            return [];
+        const connKey = created.connKey;
+        try {
+            const results = await Promise.all(columns.map((col, index) => buildFilterQueryFromTempTable(col, index, paramFilter, tmpTable, connKey)));
+            const payload = {};
+            results.filter(Boolean).forEach((element) => {
+                const key = Object.keys(element)[0];
+                const values = Object.keys(element)[1];
+                payload[key] = values ? { type: element[key], values: element[values] } : { type: element[key] };
+            });
+            return payload;
+        }
+        finally {
+            await executeMySQLQuery(`DROP TEMPORARY TABLE IF EXISTS \`${tmpTable}\``, [], false);
+            connectionRollback(connKey);
+        }
+    }
+    async function buildFilterQueryFromTempTable(col, index, paramFilter, tmpTable, connKey) {
+        const type = paramFilter[index];
+        if (!col)
+            return null;
+        if (!type || type === 'HIDE' || type === 'JSON' || type === 'FILE')
+            return { [col]: type };
+        if (type === 'SLIDER' || type === 'DATE' || type === 'DATETIME') {
+            const sql = `SELECT MIN(\`${col}\`) AS min_val, MAX(\`${col}\`) AS max_val FROM \`${tmpTable}\``;
+            const result = await executeMySQLQuery2({ query: sql, connKey });
+            if (result.error || !result[0])
+                return null;
+            return { [col]: type, values: [Number(result[0].min_val), Number(result[0].max_val)] };
+        }
+        if (type === 'MULTISELECT') {
+            const sql = `SELECT DISTINCT COALESCE(\`${col}\`, 'Vide') AS val FROM \`${tmpTable}\` ORDER BY val`;
+            const result = await executeMySQLQuery2({ query: sql, connKey });
+            if (result.error)
+                return null;
+            return { [col]: type, values: result.map((r) => r.val) };
+        }
+        if (type === 'UNGROUP_MULTISELECT') {
+            const sql = `SELECT \`${col}\` AS val FROM \`${tmpTable}\` WHERE \`${col}\` IS NOT NULL`;
+            const result = await executeMySQLQuery2({ query: sql, connKey });
+            if (result.error)
+                return null;
+            const values = [...new Set(result.flatMap((r) => (r.val ? String(r.val).split(', ') : ['Vide'])))].sort();
+            return { [col]: type, values };
+        }
+        return null;
+    }
+    return { router, reqTableQuery, getFiltersOfQuery };
+}

package/dist/server/types.d.ts

@@ -0,0 +1,27 @@
+import type { Request, Response } from 'express';
+export type ParamFilterType = 'HIDE' | 'SLIDER' | 'DATE' | 'DATETIME' | 'UNGROUP_MULTISELECT' | 'MULTISELECT' | null | 'JSON' | 'FILE';
+export interface CacheDeps {
+    getSQLCache: (key: string) => Promise<any>;
+    setSQLCache: (key: string, value: any) => Promise<any>;
+    deleteSQLCache: (key: string) => Promise<any>;
+}
+export interface TableQueryDeps {
+    convertToMySQLDateTime: (d: any) => string;
+    wrapRouteHandler: (fn: (req: Request, res: Response) => Promise<any>) => any;
+    /** Only required if some callers pass `useCache: true` (default). Omit it entirely
+     * if this project never wants caching — every call then behaves as `useCache: false`. */
+    cache?: CacheDeps;
+}
+export interface ReqTableQueryOptions {
+    query: string;
+    req: Request;
+    paramFilter?: ParamFilterType[];
+    sort?: string;
+    argsQuery?: any[];
+    /** How long (ms) a cached result stays valid. Only used when `useCache` resolves to true. */
+    keepCache?: number;
+    /** Use the Redis cache for this call. Defaults to true if `deps.cache` was provided at
+     * module creation, false otherwise. Pass `false` explicitly to always force a fresh query
+     * even when the module has a cache configured (e.g. for a "live" screen). */
+    useCache?: boolean;
+}

package/dist/server/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,61 @@
+{
+    "name": "@benjosivo/table-query",
+    "version": "1.0.0",
+    "description": "Table triable/filtrable/paginée : hook + composants React d'un côté (`/react`), logique SQL de pagination/tri/filtres côté serveur de l'autre (`/server`). Un projet peut n'utiliser qu'un des deux côtés.",
+    "keywords": [],
+    "homepage": "https://github.com/benjosivo/table-query#readme",
+    "bugs": {
+        "url": "https://github.com/benjosivo/table-query/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/benjosivo/table-query.git"
+    },
+    "license": "ISC",
+    "author": "benjosivo",
+    "type": "module",
+    "exports": {
+        "./react": {
+            "types": "./dist/react/index.d.ts",
+            "default": "./dist/react/index.js"
+        },
+        "./server": {
+            "types": "./dist/server/index.d.ts",
+            "default": "./dist/server/index.js"
+        }
+    },
+    "main": "index.js",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "tsc",
+        "prepublishOnly": "npm run build"
+    },
+    "dependencies": {
+        "@benjosivo/mysql": "^1.3.2"
+    },
+    "devDependencies": {
+        "@types/express": "^4.17.0",
+        "@types/react": "^18.0.0",
+        "typescript": "^5.4.0"
+    },
+    "peerDependencies": {
+        "express": "^4.0.0",
+        "react": "^18.0.0"
+    },
+    "peerDependenciesMeta": {
+        "express": {
+            "optional": true
+        },
+        "react": {
+            "optional": true
+        },
+        "@benjosivo/mysql": {
+            "optional": true
+        }
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org"
+    }
+}