@benjosivo/table-query 1.0.2 → 1.0.4

package/README.md

@@ -1,215 +1,289 @@
-# @benjosivo/table-query
-
-Tableau de données triable, filtrable et paginé, en deux parties indépendantes :
-
-- **`@benjosivo/table-query/server`** — logique de requêtage côté serveur (Express + MySQL) : pagination, tri, filtres, calcul des valeurs disponibles pour chaque colonne, mise en cache optionnelle.
-- **`@benjosivo/table-query/react`** — composants et hook React pour afficher ce type de données : tableau, pagination, filtre rapide par colonne, panneau de filtres avancés (multiselect / plage numérique / plage de dates).
-
-Les deux parties fonctionnent ensemble mais peuvent aussi être utilisées séparément (par exemple le composant React seul, avec ton propre backend).
-
-## Installation
-
-```bash
-npm install @benjosivo/table-query
-```
-
-Selon la partie utilisée, il faut aussi avoir installé dans le projet :
-
-| Partie utilisée | Dépendances nécessaires |
-|---|---|
-| `/server` | `express`, `@benjosivo/mysql` |
-| `/react` | `react` (v18+) |
-
-Ce sont des `peerDependencies` : le package ne les installe pas lui-même, il utilise celles déjà présentes dans ton projet.
-
----
-
-## Côté serveur
-
-### Créer le module
-
-```ts
-import { createTableQueryModule } from '@benjosivo/table-query/server';
-
-const { router, reqTableQuery } = createTableQueryModule({
-    // Formate une date/heure au format attendu par MySQL
-    convertToMySQLDateTime: (date) => /* ta fonction */,
-
-    // Enveloppe un handler Express (gestion d'erreurs, etc.)
-    wrapRouteHandler: (fn) => /* ta fonction */,
-
-    // Optionnel : uniquement nécessaire si tu veux pouvoir utiliser le cache (voir plus bas)
-    cache: {
-        getSQLCache: (key) => /* lit une entrée de cache */,
-        setSQLCache: (key, value) => /* écrit une entrée de cache */,
-        deleteSQLCache: (key) => /* supprime une entrée de cache */,
-    },
-});
-```
-
-`router` expose la route `GET /getFiltres`, utilisée en interne pour récupérer les filtres calculés en tâche de fond. Monte-le sur le chemin de ton choix :
-
-```ts
-app.use('/tableCreation/api', router);
-```
-
-### Répondre à une requête de table
-
-```ts
-app.post('/api/commandes', wrapRouteHandler(async (req, res) => {
-    const result = await reqTableQuery({
-        query: `SELECT c.*, COUNT(*) OVER() AS TotalCount FROM commandes c`,
-        req,
-        // Un type de filtre par colonne renvoyée par la requête (sauf la 1ère, l'identifiant)
-        paramFilter: ['MULTISELECT', 'HIDE', 'DATE', 'MULTISELECT'],
-    });
-
-    if (result.error) return res.status(result.status ?? 500).send(result.error);
-    res.json(result.data);
-}));
-```
-
-`reqTableQuery` lit `limit`, `offset`, `sorting`, `filtre` et `setFilter` dans `req.body` (ou `req.query`) — c'est exactement ce que le composant React `DataTable`/`useDataTable` envoie, donc les deux côtés s'emboîtent directement.
-
-### Types de filtre disponibles (`paramFilter`)
-
-| Type | Effet |
-|---|---|
-| `'MULTISELECT'` | Liste de valeurs distinctes de la colonne, sélection multiple |
-| `'UNGROUP_MULTISELECT'` | Comme `MULTISELECT`, mais éclate les valeurs séparées par `, ` dans une même cellule |
-| `'SLIDER'` | Plage numérique (min/max) |
-| `'DATE'` / `'DATETIME'` | Plage de dates |
-| `'JSON'` / `'FILE'` | Pas de filtre, juste un rendu spécifique côté React |
-| `'HIDE'` | Colonne sans filtre |
-| `null` | Colonne sans filtre particulier |
-
-### Le cache (`useCache`)
-
-Le cache est activé **par appel**, pas globalement :
-
-```ts
-reqTableQuery({ query, req, paramFilter, useCache: true });  // utilise le cache
-reqTableQuery({ query, req, paramFilter, useCache: false }); // toujours une donnée fraîche
-```
-
-- Si `cache` a été fourni à `createTableQueryModule`, `useCache` vaut `true` par défaut.
-- Si `cache` n'a pas été fourni, `useCache` vaut `false` par défaut (aucun Redis requis).
-- Demander `useCache: true` sans avoir fourni `cache` lève une erreur explicite.
-- Avec `useCache: false`, les valeurs de filtre disponibles sont calculées et renvoyées directement dans la réponse. Avec `useCache: true`, elles sont calculées en tâche de fond et le composant React va les chercher via `/getFiltres` (polling automatique, rien à faire côté appelant).
-
----
-
-## Côté React
-
-### Utilisation simple (tout inclus)
-
-```tsx
-import { DataTable } from '@benjosivo/table-query/react';
-
-function CommandesTable() {
-    return (
-        <DataTable
-            fetchData={(params) =>
-                fetch('/api/commandes', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(params),
-                }).then((res) => (res.ok ? res.json() : null))
-            }
-            onRowClick={(id, row) => console.log('ligne cliquée', id, row)}
-            advancedFilters
-        />
-    );
-}
-```
-
-#### Props de `<DataTable />`
-
-| Prop | Type | Description |
-|---|---|---|
-| `fetchData` | `(params) => Promise<FetchResult \| null>` | **Obligatoire.** Appelée à chaque changement de page/tri/filtre. |
-| `onRowClick` | `(id, row) => void` | Appelée au clic sur une ligne |
-| `filterEnabled` | `boolean` (défaut `true`) | Affiche le bouton de filtre rapide par colonne |
-| `sortingEnabled` | `boolean` (défaut `true`) | Active le tri au clic sur l'en-tête |
-| `advancedFilters` | `boolean` (défaut `false`) | Affiche le panneau de filtres avancés (nécessite `setFilter`/`paramFilter` côté serveur) |
-| `height` | `string` (défaut `'76vh'`) | Hauteur max de la zone de défilement |
-| `rowsPerPageOptions` | `number[]` | Choix disponibles pour le nombre de lignes par page |
-| `defaultRowsPerPage` | `number` | Valeur par défaut |
-| `onImagePreview` | `(src) => void` | Appelée au clic sur une image (sinon ouverture dans un nouvel onglet) |
-
-### Utilisation avec ta propre UI de filtre
-
-Si le système de filtre par défaut ne convient pas, utilise le hook et les composants séparément :
-
-```tsx
-import { useDataTable, Table, Pagination } from '@benjosivo/table-query/react';
-
-function CommandesTable() {
-    const table = useDataTable({ fetchData: fetchCommandes });
-    const [recherche, setRecherche] = useState('');
-
-    const rechercher = () => {
-        table.replaceFilters({ reference: [`/*/${recherche}/*/`] });
-        // ou, filtre par filtre : table.setColumnFilter('statut', ['en_cours']);
-    };
-
-    return (
-        <>
-            <input value={recherche} onChange={(e) => setRecherche(e.target.value)} />
-            <button onClick={rechercher}>Rechercher</button>
-
-            <Table
-                items={table.items}
-                fieldsType={table.fieldsType}
-                sortColumn={table.sortColumn}
-                sortDirection={table.sortDirection}
-                onSort={table.toggleSort}
-            />
-
-            <Pagination
-                page={table.page}
-                totalPages={table.totalPages}
-                perPage={table.perPage}
-                count={table.count}
-                onChangePerPage={table.changePerPage}
-                onFirst={table.firstPage}
-                onPrevious={table.previousPage}
-                onNext={table.nextPage}
-                onLast={table.lastPage}
-            />
-        </>
-    );
-}
-```
-
-`useDataTable` gère la pagination, le tri et l'appel réseau ; il n'impose aucune UI de filtre — `table.setColumnFilter(colonne, valeur)` et `table.replaceFilters(objet)` permettent de piloter le filtrage depuis n'importe quelle interface.
-
-### Format attendu par `fetchData`
-
-```ts
-interface FetchParams {
-    limit: number;
-    offset: number;
-    sorting?: string;
-    filtre?: Record<string, unknown>;
-    setFilter?: boolean;
-}
-
-interface FetchResult<T> {
-    items: T[];
-    count: number;
-    fieldsType?: { fieldType: string }[]; // 'DATE' | 'DATETIME' | 'JSON' | 'FILE' | 'BLOB' | ...
-    filtre?: FilterConfig;       // renvoyé par le serveur si des filtres avancés sont demandés
-    cleRecupFiltre?: string;     // utilisé en interne pour le polling du cache
-}
-```
-
-C'est exactement la forme renvoyée par `reqTableQuery` côté serveur.
-
----
-
-## Build
-
-```bash
-npm run build   # compile src/react et src/server dans dist/
+# @benjosivo/table-query
+
+Tableau de données triable, filtrable et paginé, en deux parties indépendantes :
+
+- **`@benjosivo/table-query/server`** — logique de requêtage côté serveur (Express + MySQL) : pagination, tri, filtres, calcul des valeurs disponibles pour chaque colonne, mise en cache optionnelle.
+- **`@benjosivo/table-query/react`** — composants et hook React pour afficher ce type de données : tableau, pagination, filtre rapide par colonne, panneau de filtres avancés (multiselect / plage numérique / plage de dates).
+
+Les deux parties fonctionnent ensemble mais peuvent aussi être utilisées séparément (par exemple le composant React seul, avec ton propre backend).
+
+## Installation
+
+```bash
+npm install @benjosivo/table-query
+```
+
+Selon la partie utilisée, il faut aussi avoir installé dans le projet :
+
+| Partie utilisée | Dépendances nécessaires |
+|---|---|
+| `/server` | `express`, `@benjosivo/mysql` |
+| `/react` | `react` (v18+) |
+
+Ce sont des `peerDependencies` : le package ne les installe pas lui-même, il utilise celles déjà présentes dans ton projet.
+
+---
+
+## Côté serveur
+
+### Créer le module
+
+```ts
+import { createTableQueryModule } from '@benjosivo/table-query/server';
+
+const { router, reqTableQuery } = createTableQueryModule({
+    // Formate une date/heure au format attendu par MySQL
+    convertToMySQLDateTime: (date) => /* ta fonction */,
+
+    // Enveloppe un handler Express (gestion d'erreurs, etc.)
+    wrapRouteHandler: (fn) => /* ta fonction */,
+
+    // Optionnel : uniquement nécessaire si tu veux pouvoir utiliser le cache (voir plus bas)
+    cache: {
+        getSQLCache: (key) => /* lit une entrée de cache */,
+        setSQLCache: (key, value) => /* écrit une entrée de cache */,
+        deleteSQLCache: (key) => /* supprime une entrée de cache */,
+    },
+});
+```
+
+`router` expose la route `GET /getFiltres`, utilisée en interne pour récupérer les filtres calculés en tâche de fond. Monte-le sur le chemin de ton choix :
+
+```ts
+app.use('/tableCreation/api', router);
+```
+
+### Répondre à une requête de table
+
+```ts
+app.post('/api/commandes', wrapRouteHandler(async (req, res) => {
+    const result = await reqTableQuery({
+        query: `SELECT c.*, COUNT(*) OVER() AS TotalCount FROM commandes c`,
+        req,
+        // Un type de filtre par colonne renvoyée par la requête (sauf la 1ère, l'identifiant)
+        paramFilter: ['MULTISELECT', 'HIDE', 'DATE', 'MULTISELECT'],
+    });
+
+    if (result.error) return res.status(result.status ?? 500).send(result.error);
+    res.json(result.data);
+}));
+```
+
+`reqTableQuery` lit `limit`, `offset`, `sorting`, `filtre` et `setFilter` dans `req.body` (ou `req.query`) — c'est exactement ce que le composant React `DataTable`/`useDataTable` envoie, donc les deux côtés s'emboîtent directement.
+
+### Types de filtre disponibles (`paramFilter`)
+
+| Type | Effet |
+|---|---|
+| `'MULTISELECT'` | Liste de valeurs distinctes de la colonne, sélection multiple |
+| `'UNGROUP_MULTISELECT'` | Comme `MULTISELECT`, mais éclate les valeurs séparées par `, ` dans une même cellule |
+| `'SLIDER'` | Plage numérique (min/max) |
+| `'DATE'` / `'DATETIME'` | Plage de dates |
+| `'JSON'` / `'FILE'` | Pas de filtre, juste un rendu spécifique côté React |
+| `'HIDE'` | Colonne sans filtre |
+| `null` | Colonne sans filtre particulier |
+
+### Le cache (`useCache`)
+
+Le cache est activé **par appel**, pas globalement :
+
+```ts
+reqTableQuery({ query, req, paramFilter, useCache: true });  // utilise le cache
+reqTableQuery({ query, req, paramFilter, useCache: false }); // toujours une donnée fraîche
+```
+
+- Si `cache` a été fourni à `createTableQueryModule`, `useCache` vaut `true` par défaut.
+- Si `cache` n'a pas été fourni, `useCache` vaut `false` par défaut (aucun Redis requis).
+- Demander `useCache: true` sans avoir fourni `cache` lève une erreur explicite.
+- Avec `useCache: false`, les valeurs de filtre disponibles sont calculées et renvoyées directement dans la réponse. Avec `useCache: true`, elles sont calculées en tâche de fond et le composant React va les chercher via `/getFiltres` (polling automatique, rien à faire côté appelant).
+
+---
+
+## Côté React
+
+### Utilisation simple (tout inclus)
+
+```tsx
+import { DataTable } from '@benjosivo/table-query/react';
+
+function CommandesTable() {
+    return (
+        <DataTable
+            fetchData={(params) =>
+                fetch('/api/commandes', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(params),
+                }).then((res) => (res.ok ? res.json() : null))
+            }
+            onRowClick={(id, row) => console.log('ligne cliquée', id, row)}
+            advancedFilters
+        />
+    );
+}
+```
+
+#### Props de `<DataTable />`
+
+| Prop | Type | Description |
+|---|---|---|
+| `fetchData` | `(params) => Promise<FetchResult \| null>` | **Obligatoire.** Appelée à chaque changement de page/tri/filtre. |
+| `onRowClick` | `(id, row) => void` | Appelée au clic sur une ligne |
+| `filterEnabled` | `boolean` (défaut `true`) | Affiche le bouton de filtre rapide par colonne |
+| `sortingEnabled` | `boolean` (défaut `true`) | Active le tri au clic sur l'en-tête |
+| `advancedFilters` | `boolean` (défaut `false`) | Affiche le panneau de filtres avancés (nécessite `setFilter`/`paramFilter` côté serveur) |
+| `height` | `string` (défaut `'76vh'`) | Hauteur max de la zone de défilement |
+| `rowsPerPageOptions` | `number[]` | Choix disponibles pour le nombre de lignes par page |
+| `defaultRowsPerPage` | `number` | Valeur par défaut |
+| `onImagePreview` | `(src) => void` | Appelée au clic sur une image (sinon ouverture dans un nouvel onglet) |
+| `selectable` | `boolean` (défaut `false`) | Affiche une colonne de checkbox (voir « Sélection de lignes ») |
+| `selectionColumnPosition` | `number \| 'start' \| 'end'` (défaut `'start'`) | Position de la colonne de checkbox parmi les colonnes visibles |
+| `selectedIds` | `any[]` | Sélection contrôlée par le parent (voir plus bas) |
+| `onSelectionChange` | `(ids, rows) => void` | Appelée à chaque changement de sélection, avec les ids et les lignes complètes |
+
+### Sélection de lignes (checkbox)
+
+Avec `selectable`, une colonne de checkbox est ajoutée. La checkbox de l'en-tête coche/décoche **toutes les lignes affichées** (la page courante) et passe en état indéterminé quand seule une partie l'est.
+
+```tsx
+const [selection, setSelection] = useState<any[]>([]);
+
+<DataTable
+    fetchData={fetchCommandes}
+    selectable
+    selectionColumnPosition='start'   // 'start' | 'end' | index (ex. 2)
+    onSelectionChange={(ids, rows) => {
+        setSelection(ids);            // ids = valeur de la 1ère colonne de chaque ligne
+        console.log(rows);            // les lignes entières, comme dans onRowClick
+    }}
+/>
+```
+
+- **Identifiant d'une ligne** : la valeur de sa **première colonne** — la même règle que `onRowClick`. La colonne peut être masquée (`HIDE`), l'identifiant reste utilisable.
+- **Position** : `'start'` (défaut), `'end'`, ou un index 0-based **parmi les colonnes visibles** (`2` = 3ᵉ colonne ; les colonnes `HIDE` ne comptent pas). Un index hors limites est ramené au début ou à la fin.
+- **Entre les pages** : la sélection est cumulative — on peut cocher des lignes page 1, aller page 2, et `onSelectionChange` renvoie l'ensemble (ids **et** lignes complètes, même celles qui ne sont plus affichées).
+- **Changement de tri ou de filtre** : le jeu de données n'est plus le même, la sélection est donc vidée et `onSelectionChange([], [])` est appelée. Changer de page ou le nombre de lignes par page ne la vide pas.
+- Cliquer une checkbox ne déclenche pas `onRowClick`.
+
+#### Sélection contrôlée
+
+Si le parent passe `selectedIds`, c'est lui qui détient l'état : le tableau n'affiche que ce qu'on lui donne. Pratique pour cocher des lignes par programme ou vider la sélection après une action groupée.
+
+```tsx
+const [selection, setSelection] = useState<any[]>([]);
+
+const supprimer = async () => {
+    await fetch('/api/commandes/suppression', { method: 'POST', body: JSON.stringify({ ids: selection }) });
+    setSelection([]); // on vide la sélection nous-mêmes
+};
+
+<DataTable
+    fetchData={fetchCommandes}
+    selectable
+    selectedIds={selection}
+    onSelectionChange={(ids) => setSelection(ids)}
+/>
+```
+
+### Utilisation avec ta propre UI de filtre
+
+Si le système de filtre par défaut ne convient pas, utilise le hook et les composants séparément :
+
+```tsx
+import { useDataTable, Table, Pagination } from '@benjosivo/table-query/react';
+
+function CommandesTable() {
+    const table = useDataTable({ fetchData: fetchCommandes });
+    const [recherche, setRecherche] = useState('');
+
+    const rechercher = () => {
+        table.replaceFilters({ reference: [`/*/${recherche}/*/`] });
+        // ou, filtre par filtre : table.setColumnFilter('statut', ['en_cours']);
+    };
+
+    return (
+        <>
+            <input value={recherche} onChange={(e) => setRecherche(e.target.value)} />
+            <button onClick={rechercher}>Rechercher</button>
+
+            <Table
+                items={table.items}
+                fieldsType={table.fieldsType}
+                sortColumn={table.sortColumn}
+                sortDirection={table.sortDirection}
+                onSort={table.toggleSort}
+            />
+
+            <Pagination
+                page={table.page}
+                totalPages={table.totalPages}
+                perPage={table.perPage}
+                count={table.count}
+                onChangePerPage={table.changePerPage}
+                onFirst={table.firstPage}
+                onPrevious={table.previousPage}
+                onNext={table.nextPage}
+                onLast={table.lastPage}
+            />
+        </>
+    );
+}
+```
+
+`useDataTable` gère la pagination, le tri et l'appel réseau ; il n'impose aucune UI de filtre — `table.setColumnFilter(colonne, valeur)` et `table.replaceFilters(objet)` permettent de piloter le filtrage depuis n'importe quelle interface.
+
+Le hook gère aussi la sélection, que tu utilises `<DataTable />` ou le `<Table />` nu :
+
+```tsx
+const table = useDataTable({ fetchData, onSelectionChange: (ids, rows) => console.log(ids, rows) });
+
+<Table
+    items={table.items}
+    fieldsType={table.fieldsType}
+    selectable
+    selectionColumnPosition='end'
+    selectedIds={table.selectedIds}
+    onToggleRow={table.setRowSelected}
+    onToggleAllRows={table.setAllRowsSelected}
+/>
+```
+
+| Valeur renvoyée | Type | Description |
+|---|---|---|
+| `selectedIds` | `any[]` | Ids sélectionnés (1ère colonne de chaque ligne) |
+| `selectedRows` | `T[]` | Les lignes complètes correspondantes, pages précédentes comprises |
+| `isRowSelected` | `(row) => boolean` | |
+| `setRowSelected` | `(row, selected) => void` | |
+| `toggleRowSelection` | `(row) => void` | |
+| `setAllRowsSelected` | `(selected) => void` | Toutes les lignes affichées ; les autres pages ne sont pas touchées |
+| `clearSelection` | `() => void` | Vide la sélection |
+
+### Format attendu par `fetchData`
+
+```ts
+interface FetchParams {
+    limit: number;
+    offset: number;
+    sorting?: string;
+    filtre?: Record<string, unknown>;
+    setFilter?: boolean;
+}
+
+interface FetchResult<T> {
+    items: T[];
+    count: number;
+    fieldsType?: { fieldType: string }[]; // 'DATE' | 'DATETIME' | 'JSON' | 'FILE' | 'BLOB' | ...
+    filtre?: FilterConfig;       // renvoyé par le serveur si des filtres avancés sont demandés
+    cleRecupFiltre?: string;     // utilisé en interne pour le polling du cache
+}
+```
+
+C'est exactement la forme renvoyée par `reqTableQuery` côté serveur.
+
+---
+
+## Build
+
+```bash
+npm run build   # compile src/react et src/server dans dist/
 ```

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, }: DataTableProps<T>): import("react").JSX.Element;

package/dist/react/DataTable.js

@@ -12,15 +12,23 @@ 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, }) {
+    const table = useDataTable({
+        fetchData,
+        advancedFilters,
+        rowsPerPageOptions,
+        defaultRowsPerPage,
+        fetchFilterConfig,
+        selectedIds,
+        onSelectionChange,
+    });
     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
+    return (_jsxs("div", { className: 'flex-row nowrap', style: { alignItems: 'flex-start', maxHeight: height }, children: [advancedFilters && table.filterConfig && (_jsx(FilterPanel, { filterConfig: table.filterConfig, activeFilters: table.filters, onChange: table.setColumnFilter, onClearAll: table.clearAllFilters })), _jsxs("div", { className: 'frame', style: { maxHeight: '-webkit-fill-available', minWidth: '10vw' }, children: [_jsx("div", { style: { maxHeight: '-webkit-fill-available', overflowY: 'auto', overflowX: 'auto' }, children: _jsx(Table, { items: table.items, fieldsType: table.fieldsType, paramFilter: table.paramFilter, sortColumn: table.sortColumn, sortDirection: table.sortDirection, sortingEnabled: sortingEnabled, onSort: (col) => table.toggleSort(col), onRowClick: onRowClick, onImagePreview: onImagePreview, selectable: selectable, selectionColumnPosition: selectionColumnPosition, selectedIds: table.selectedIds, onToggleRow: table.setRowSelected, onToggleAllRows: table.setAllRowsSelected, renderHeaderExtra: filterEnabled && !advancedFilters
                                 ? (col) => (_jsx("button", { style: { padding: 5, marginTop: 0 }, className: 'btnDataFilterTable', onClick: (e) => {
                                         setOpenFilterCol(col);
                                         setFilterAnchor(e.currentTarget);

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, ParamFilter, SelectionColumnPosition, SortDirection } from './types.js';
 export interface TableProps<T extends Record<string, any>> {
     items: T[];
     fieldsType?: FieldTypeInfo[];
@@ -13,10 +13,24 @@ 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;
 }
 /**
- * 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, }: TableProps<T>): import("react").JSX.Element;

package/dist/react/Table.js

@@ -1,19 +1,54 @@
 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 { getRowId, selectionKey } from './utils.js';
 /**
- * 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', }) {
+    const columns = useMemo(() => (items[0] ? Object.keys(items[0]) : paramFilter && paramFilter.length > 0 ? paramFilter.map((el) => el.nom) : []), [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]);
+    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 cells = visibleColumns.map(({ col, index }) => (_jsx("td", { children: _jsx(Cell, { value: row[col], fieldType: fieldsType[index]?.fieldType, onImagePreview: onImagePreview }) }, col)));
+                        const selectionCell = (_jsx("td", { className: 'selectionColumn', onClick: (e) => e.stopPropagation(), children: _jsx(SelectionCheckbox, { checked: selectedKeys.has(selectionKey(id)), label: selectRowLabel, onChange: (checked) => onToggleRow?.(row, checked) }) }, '__selection__'));
+                        return (_jsx("tr", { style: { cursor: onRowClick ? 'pointer' : 'default' }, onClick: () => id !== undefined && onRowClick?.(id, row), children: withSelectionCell(cells, selectionCell) }, id !== undefined ? String(id) : i));
+                    })] })] }));
+}
+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/index.d.ts

@@ -6,4 +6,4 @@ 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';
+export type { DataTableProps, FetchParams, FetchResult, FieldTypeInfo, FilterConfig, FilterFieldConfig, ParamFilter, SelectionColumnPosition, SortDirection, } from './types.js';

package/dist/react/types.d.ts

@@ -35,6 +35,8 @@ export type ParamFilter = {
     type: FilterFieldType;
 };
 export type FilterConfig = Record<string, FilterFieldConfig>;
+/** Where the selection (checkbox) column is inserted among the visible columns. */
+export type SelectionColumnPosition = number | 'start' | 'end';
 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>;
@@ -54,4 +56,12 @@ export interface DataTableProps<T extends Record<string, any>> {
     onImagePreview?: (src: string) => void;
     /** Optional endpoint to lazily fetch filter definitions using cleRecupFiltre. */
     fetchFilterConfig?: (cleRecupFiltre: string) => Promise<FilterConfig>;
+    /** Show a checkbox column; the header checkbox selects/deselects every displayed row. Default false. */
+    selectable?: boolean;
+    /** Where the checkbox column goes among the visible columns: 'start' (default), 'end', or a 0-based index. */
+    selectionColumnPosition?: SelectionColumnPosition;
+    /** Controlled selection: ids (value of each row's first column) of the selected rows. Leave undefined to let the table hold the selection itself. */
+    selectedIds?: any[];
+    /** Called on every selection change, with the selected ids and the matching rows (same shape as onRowClick). */
+    onSelectionChange?: (ids: any[], rows: T[]) => void;
 }

package/dist/react/useDataTable.d.ts

@@ -1,5 +1,5 @@
 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'>): {
+export declare function useDataTable<T extends Record<string, any>>({ fetchData, advancedFilters, rowsPerPageOptions, defaultRowsPerPage, fetchFilterConfig, selectedIds: controlledSelectedIds, onSelectionChange, }: Pick<DataTableProps<T>, 'fetchData' | 'advancedFilters' | 'rowsPerPageOptions' | 'defaultRowsPerPage' | 'fetchFilterConfig' | 'selectedIds' | 'onSelectionChange'>): {
     items: T[];
     count: number;
     fieldsType: FieldTypeInfo[];
@@ -13,6 +13,13 @@ export declare function useDataTable<T extends Record<string, any>>({ fetchData,
     sortDirection: SortDirection;
     filters: Record<string, unknown>;
     filterConfig: FilterConfig | null;
+    selectedIds: any[];
+    selectedRows: T[];
+    isRowSelected: (row: T) => boolean;
+    toggleRowSelection: (row: T) => void;
+    setRowSelected: (row: T, selected: boolean) => void;
+    setAllRowsSelected: (selected: boolean) => void;
+    clearSelection: () => void;
     toggleSort: (column: string, forceDirection?: SortDirection) => void;
     setColumnFilter: (key: string, value: unknown) => void;
     replaceFilters: (next: Record<string, unknown>) => void;

package/dist/react/useDataTable.js

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-export function useDataTable({ fetchData, advancedFilters, rowsPerPageOptions = [10, 25, 50, 100, 250, 500, 1000], defaultRowsPerPage = 100, fetchFilterConfig, }) {
+import { getRowId, selectionKey } from './utils.js';
+export function useDataTable({ fetchData, advancedFilters, rowsPerPageOptions = [10, 25, 50, 100, 250, 500, 1000], defaultRowsPerPage = 100, fetchFilterConfig, selectedIds: controlledSelectedIds, onSelectionChange, }) {
     const [items, setItems] = useState([]);
     const [count, setCount] = useState(0);
     const [fieldsType, setFieldsType] = useState([]);
@@ -14,6 +15,14 @@ export function useDataTable({ fetchData, advancedFilters, rowsPerPageOptions =
     const [cleRecupFiltre, setCleRecupFiltre] = useState();
     // Guards against a slow, stale request overwriting a newer one.
     const requestId = useRef(0);
+    // Selection is uncontrolled unless the parent passes `selectedIds`.
+    const [internalSelectedIds, setInternalSelectedIds] = useState([]);
+    const isSelectionControlled = controlledSelectedIds !== undefined;
+    const selectedIds = isSelectionControlled ? controlledSelectedIds : internalSelectedIds;
+    const selectedKeys = useMemo(() => new Set(selectedIds.map(selectionKey)), [selectedIds]);
+    /** Every row loaded since the last selection reset, so a row selected on a page we left
+     * can still be handed back to the parent in full. */
+    const knownRows = useRef(new Map());
     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) => {
@@ -35,7 +44,13 @@ export function useDataTable({ fetchData, advancedFilters, rowsPerPageOptions =
                 setCount(0);
                 return;
             }
-            setItems(result.items || []);
+            const rows = result.items || [];
+            for (const row of rows) {
+                const rowId = getRowId(row);
+                if (rowId !== undefined)
+                    knownRows.current.set(selectionKey(rowId), row);
+            }
+            setItems(rows);
             setCount(result.count ?? 0);
             setFieldsType(result.fieldsType || []);
             setParamFilter(result.paramFilter || []);
@@ -96,6 +111,63 @@ export function useDataTable({ fetchData, advancedFilters, rowsPerPageOptions =
     /** 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), []);
+    // ==================== SELECTION ====================
+    const rowsOf = useCallback((ids) => {
+        const rows = [];
+        for (const id of ids) {
+            const row = knownRows.current.get(selectionKey(id));
+            if (row)
+                rows.push(row);
+        }
+        return rows;
+    }, []);
+    const selectedRows = useMemo(() => rowsOf(selectedIds), [selectedIds, items, rowsOf]);
+    const applySelection = useCallback((nextIds) => {
+        if (!isSelectionControlled)
+            setInternalSelectedIds(nextIds);
+        onSelectionChange?.(nextIds, rowsOf(nextIds));
+    }, [isSelectionControlled, onSelectionChange, rowsOf]);
+    const isRowSelected = useCallback((row) => selectedKeys.has(selectionKey(getRowId(row))), [selectedKeys]);
+    const setRowSelected = useCallback((row, selected) => {
+        const id = getRowId(row);
+        if (id === undefined)
+            return;
+        const key = selectionKey(id);
+        knownRows.current.set(key, row);
+        if (selected === selectedKeys.has(key))
+            return;
+        applySelection(selected ? [...selectedIds, id] : selectedIds.filter((v) => selectionKey(v) !== key));
+    }, [selectedIds, selectedKeys, applySelection]);
+    const toggleRowSelection = useCallback((row) => setRowSelected(row, !isRowSelected(row)), [setRowSelected, isRowSelected]);
+    /** Select/deselect every row of the current page; rows selected on other pages are left alone. */
+    const setAllRowsSelected = useCallback((selected) => {
+        const pageIds = [];
+        for (const row of items) {
+            const id = getRowId(row);
+            if (id === undefined)
+                continue;
+            knownRows.current.set(selectionKey(id), row);
+            pageIds.push(id);
+        }
+        const pageKeys = new Set(pageIds.map(selectionKey));
+        const others = selectedIds.filter((id) => !pageKeys.has(selectionKey(id)));
+        applySelection(selected ? [...others, ...pageIds] : others);
+    }, [items, selectedIds, applySelection]);
+    const clearSelection = useCallback(() => {
+        if (selectedIds.length > 0)
+            applySelection([]);
+    }, [selectedIds, applySelection]);
+    // The selection spans pages, but a new sort/filter means a different dataset: start over.
+    const firstDatasetRender = useRef(true);
+    useEffect(() => {
+        if (firstDatasetRender.current) {
+            firstDatasetRender.current = false;
+            return;
+        }
+        knownRows.current.clear();
+        clearSelection();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sorting, filters]);
     const changePerPage = useCallback((n) => setPerPage(n), []);
     return {
         items,
@@ -111,6 +183,13 @@ export function useDataTable({ fetchData, advancedFilters, rowsPerPageOptions =
         sortDirection,
         filters,
         filterConfig,
+        selectedIds,
+        selectedRows,
+        isRowSelected,
+        toggleRowSelection,
+        setRowSelected,
+        setAllRowsSelected,
+        clearSelection,
         toggleSort,
         setColumnFilter,
         replaceFilters,

package/dist/react/utils.d.ts

@@ -4,3 +4,7 @@ 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;
+/** Id of a row: the value of its first column — same rule as onRowClick. */
+export declare function getRowId(row: Record<string, any> | undefined): any;
+/** Ids come from the data (numbers, strings, ...) and can be compared to values given by the parent, so normalize them. */
+export declare function selectionKey(id: any): string;

package/dist/react/utils.js

@@ -38,3 +38,14 @@ export function truncatedJSON(value, maxLen = 200) {
     const truncated = str.length > maxLen ? `${str.slice(0, maxLen)}...` : str;
     return syntaxHighlightJSON(truncated);
 }
+/** Id of a row: the value of its first column — same rule as onRowClick. */
+export function getRowId(row) {
+    if (!row)
+        return undefined;
+    const key = Object.keys(row)[0];
+    return key === undefined ? undefined : row[key];
+}
+/** Ids come from the data (numbers, strings, ...) and can be compared to values given by the parent, so normalize them. */
+export function selectionKey(id) {
+    return String(id);
+}

package/dist/server/index.js

@@ -124,12 +124,17 @@ export function createTableQueryModule(deps) {
             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')
+                if (col.toLowerCase().trim() === '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 });
+                await cache.setSQLCache(titleSQLCacheQuery, {
+                    title: titleSQLCacheQuery,
+                    data: payload,
+                    expiration: Date.now() + keepCache,
+                    tables: reqRows.tables,
+                });
             }
         }
         return { payload };
@@ -139,7 +144,11 @@ export function createTableQueryModule(deps) {
         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 });
+            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) {
@@ -147,7 +156,11 @@ export function createTableQueryModule(deps) {
             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 });
+            await cache.setSQLCache(keepCache.titleSQLCacheFiltre, {
+                title: keepCache.titleSQLCacheFiltre,
+                data: filtres,
+                expiration: Date.now() + keepCache.keepCache,
+            });
         }
         return filtres;
     }
@@ -155,6 +168,8 @@ export function createTableQueryModule(deps) {
         if (Object.keys(filtres).length === 0)
             return '';
         function singleCondition(key, val) {
+            if (!val)
+                return undefined;
             const lower = val.toLowerCase();
             if (lower === 'null' || lower === 'vide')
                 return `\`${key}\` IS NULL`;
@@ -166,7 +181,10 @@ export function createTableQueryModule(deps) {
         }
         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.length > 0)
+                    return `(${value.map((val) => singleCondition(key, String(val).replaceAll('/*/', '%'))).join(' OR ')})`;
+                else
+                    return undefined;
             }
             if (value !== null && typeof value === 'object' && 'min' in value && 'max' in value) {
                 const min = value.date ? `'${deps.convertToMySQLDateTime(value.min)}'` : value.min;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@benjosivo/table-query",
-    "version": "1.0.2",
+    "version": "1.0.4",
     "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",