Chapitre 7 - Filtrer les données à l'aide du tableau de données

Dans ce chapitre, nous allons apprendre à filtrer le contenu d'une base de données affiché dans un tableau, en utilisant un composant Select comme déclencheur de filtre.

5 min

Ajouter la grille de données pour afficher votre tableau

‍

Tout d'abord, faites glisser et déposez le composant DataGrid sur votre page.

Connectez-le à votre base de données interne et sélectionnez la table appropriée.

Vous devriez maintenant voir les données de votre tableau s'afficher dans la grille.

‍

‍

Préparez votre tableau avec une colonne "Single Select" (sélection unique)

‍

Accédez à votre base de données NoCode et assurez-vous que la colonne que vous souhaitez utiliser pour le filtrage (par exemple, Département) est de type Sélection unique.

Cela permet au composant Select de se lier proprement à la source de données.

‍

‍

‍

Connecter le composant Select à la base de données

‍

Faites maintenant glisser et déposez un composant Select sur la page.

Dans sa configuration, connectez-le à la même table et à la même colonne (par exemple, Département).

La liste déroulante se remplit alors automatiquement avec les valeurs disponibles dans cette colonne.

‍

‍

‍

Lier le composant de sélection au filtre de la grille de données

‍

Cliquez sur le composant DataGrid pour ouvrir sa configuration.

Descendez jusqu'à la section "Filtres".

Ajouter un nouveau filtre :

  • Colonne : sélectionner le département
  • État : est
  • Valeur : faites glisser et déposez votre composant Select dans le champ de valeur.

Valider. Désormais, lorsque l'utilisateur sélectionnera un département, la grille de données n'affichera que les lignes correspondant à ce département.

‍

‍