Recherche et filtres

Un tableau peut proposer une recherche rapide, une barre de filtres et un éditeur de règles avancées. Déclarez les types des colonnes pour proposer les opérateurs adaptés.

Exemple de configuration

Partez du démarrage React ou du démarrage Vue. Le fichier suivant complète leur catalogue de produits. Passez cette configuration via getTableConfig en React ou config en Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const filteringConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    enableColumnFilters: true,
    enableAdvancedFilters: true,
    showFilterBar: true,
    filterBarColumns: ["status"],
    showClearFilters: true,
    searchDebounceMs: 250,
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const filteringConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    enableColumnFilters: true,
    enableAdvancedFilters: true,
    showFilterBar: true,
    filterBarColumns: ["status"],
    showClearFilters: true,
    searchDebounceMs: 250,
  },
});

Choisir le bon contrôle

La recherche traite le texte libre. La barre optionnelle met en avant des colonnes à options statiques ou booléennes souvent utilisées. Les menus de colonnes proposent des filtres ciblés. L’éditeur avancé combine des opérateurs typés avec une jointure ET/OU entre les règles : dès deux règles, les deux éditions proposent « toutes les conditions / au moins une condition », enregistré avec les vues et dans l’URL. Masquer un contrôle ne dispense pas le backend de traiter les filtres reçus.

Conserver les types des valeurs

Les valeurs de sélection sont des identifiants stables, pas leurs libellés traduits. Une sélection multiple stocke un tableau. Les nombres et booléens doivent conserver leur type : la chaîne "false" n’est pas le booléen false. Les filtres de date choisissent des jours : les valeurs d’une règle de date sont des jours du calendrier écrits AAAA-MM-JJ (un jour, ou le premier et le dernier jour de between, inclus tous les deux), que la colonne contienne des dates ou des horodatages ; voir Règles de date. Le helper partagé matchesContractFilter illustre les opérateurs dans le démarrage. Traduisez cette même sémantique dans votre requête de base de données.

Tester le parcours complet

Dans la recette catalogue, filtrez sur Active, cherchez « desk », puis effacez les filtres. Le passage en galerie conserve la requête. Testez ET et OU avec au moins deux règles et vérifiez les totaux avant et après pagination.

Garder les filtres fréquents accessibles

Exposez Statut dans la barre de filtres rapides. Sur écran compact, le panneau des filtres de la vue accueille ces raccourcis. L’action list applique les filtres avant la pagination.

Copiez cette configuration complète à côté de product-config.ts. Utilisez () => exampleConfig pour getTableConfig en React, ou :config="exampleConfig" en Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    enableColumnFilters: true,
    showFilterBar: true,
    filterBarColumns: ["status"],
    enableAdvancedFilters: false,
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    enableColumnFilters: true,
    showFilterBar: true,
    filterBarColumns: ["status"],
    enableAdvancedFilters: false,
  },
});

Proposer des règles de filtrage composées

Activez l’éditeur avancé sans barre rapide permanente. Saisissez la valeur numérique entière avant de l’appliquer ; l’adaptateur de requête traite les règles typées et leur combinaison ET/OU.

Copiez cette configuration complète à côté de product-config.ts. Utilisez () => exampleConfig pour getTableConfig en React, ou :config="exampleConfig" en Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    enableColumnFilters: true,
    enableAdvancedFilters: true,
    showFilterBar: false,
    searchDebounceMs: 250,
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    enableColumnFilters: true,
    enableAdvancedFilters: true,
    showFilterBar: false,
    searchDebounceMs: 250,
  },
});

Facettes à côté des enregistrements

table.facets affiche un panneau de facettes à côté des enregistrements, dans tous les modes d’affichage sauf la vue Formulaire. Chaque colonne listée affiche ses valeurs avec leur nombre d’enregistrements, et un clic filtre la table :

table: {
  facets: {
    columns: ["category", { id: "tags", limit: 12 }],
    position: "left", // ou "right"
    defaultOpen: true, // les téléphones ouvrent le panneau en feuille depuis la barre d’outils
  },
}

• Colonnes : colonnes de sélection, d’étiquette et de statut, colonnes à choix multiples et de tags, booléens (Oui et Non) et colonne parente d’une arborescence (ses dossiers, avec « Racine »). Une colonne est un identifiant ou { id, label?, limit?, sort?, showEmpty? }. Le panneau accepte aussi limit (8 valeurs avant « Afficher N de plus » et une recherche), showCounts (true par défaut), showZero (false par défaut) et width (256 px, de 180 à 480).

• Filtrage : un clic écrit la règle qu’écrivent les menus de filtres : isAnyOf, ou contains pour les listes ; « Aucune valeur » écrit isEmpty seule. Les règles se combinent aux autres avec ET. Une sélection est un état de filtre ordinaire : elle va dans l’URL (<tableId>-advancedFilters), s’enregistre avec les vues et apparaît dans les menus de filtres, et une table à facettes affiche le menu de filtres avancés. Tant que la vue combine ses règles avec OU, le panneau le signale et n’y touche pas.

• Comptages : la table interroge actions.aggregate comme un graphique (groupBy: [{ columnId }], metrics: [{ fn: "count" }]) avec la recherche et les filtres de la vue, sans la règle de la facette elle-même, pour qu’une facette continue de proposer ses autres valeurs. Sans aggregate, les comptages viennent des lignes que renvoie list (2 000 au plus, avec un avis au-delà), ou des lignes de la table (data en Vue). Une colonne de tags compte chaque tag une fois par enregistrement.

• Clavier et téléphones : « Effacer » par facette et « Tout effacer » ; les flèches, Début et Fin passent d’une valeur à l’autre, Espace et Entrée en cochent une. Le bouton de la barre d’outils ([data-facets-toggle], aria-pressed, avec une pastille quand des facettes filtrent la vue) affiche et masque le panneau ; les téléphones l’ouvrent en feuille. Les facettes demandent les filtres de colonnes (enableColumnFilters différent de false).

Les libellés des facettes existent en anglais et en français, choisis selon la langue de la table, et lisent les traductions facets.<clé>.

Filtrer par dossier

Une table dont les lignes forment une arborescence filtre sa colonne parente avec un sélecteur de dossiers dans les menus de filtres, dans toutes les vues : la racine, ou un ou plusieurs dossiers (leur contenu direct). La règle est isAnyOf avec les identifiants des dossiers, ou isEmpty pour la racine, et se lit « Dans » suivi du nom du dossier. Une facette sur la colonne parente liste les mêmes dossiers avec leur nombre d’enregistrements. table.filetree.folderFilter: false désactive le sélecteur ; voir Les dossiers dans les autres vues.