Widget Table

Le widget Table fournit un composant d'affichage de données puissant et flexible pour vos applications. Il prend en charge diverses sources de données, des fonctionnalités interactives, le tri, le filtrage, la pagination et les capacités d'exportation.

Aperçu​

Le widget Table vous permet d'afficher des données tabulaires avec des options de formatage riches, des contrôles interactifs et un design réactif. Il peut se connecter à différentes sources de données, notamment les collections, les rapports, les bases de données externes et les variables.

Configuration de Base​

Paramètres Globaux​

Nom​

• Champ : Name
• Objectif : Définit le nom d'affichage du widget
• Utilisation : Utilisé pour l'identification dans la liste et la gestion des widgets

Variable/Modèle​

• Champ : Variable/Model
• Objectif : Définit le modèle de données qui stocke les données de la table
• Utilisation : Spécifiez le nom de la variable qui contiendra le tableau de données de la table
• Exemple : tableData, users, products

Configuration de la Source de Données​

Types de Sources de Données​

Collection​

• Option : Collection
• Description : Se connecter à une collection de base de données
• Configuration :
  • Sélectionner parmi les collections disponibles dans votre projet
  • Accès direct aux données de collection avec requête automatique

Rapport​

• Option : Report
• Description : Afficher les données des rapports prédéfinis
• Configuration :
  • Choisir parmi les rapports existants
  • Hérite de la structure et des calculs du rapport

EDS (Source de Base de Données Externe)​

• Option : EDS
• Description : Se connecter à des bases de données externes
• Configuration :
  • Sélectionner les connexions de base de données configurées
  • Prend en charge SQL, LDAP, Google Sheets
  • Capacités de requête personnalisées

Variable​

• Option : Variable
• Description : Utiliser les données des variables d'application
• Configuration :
  • Lier aux modèles de données existants
  • Gestion manuelle des données
  • Gestion d'événements personnalisée

Utilisateurs​

• Option : Users
• Description : Afficher les données de gestion des utilisateurs
• Configuration :
  • Accès au répertoire des utilisateurs
  • Propriétés utilisateur intégrées

Configuration des Requêtes​

Requête Standard​

• Objectif : Définir les critères de filtrage et de sélection des données
• Format : Expressions JavaScript avec variables de modèle
• Syntaxe : Utiliser {{variableName}} pour les valeurs dynamiques
• Exemple : { status: "active", category: {{selectedCategory}} }

Requête d'Agrégation​

• Objectif : Effectuer des opérations d'agrégation de données
• Fonctionnalités :
  • Opérations de regroupement
  • Calculs de comptage, somme, moyenne
  • Transformations de données complexes
• Basculer : Activer l'option "Is Aggregation"

Configuration du Tri​

• Trier Par : Nom du champ pour le tri par défaut
• Direction :
  • 1 pour l'ordre croissant
  • -1 pour l'ordre décroissant
• Objet de Tri : Tri avancé avec plusieurs champs

Limite​

• Objectif : Définir le nombre maximum d'enregistrements par page
• Par défaut : 10 enregistrements
• Plage : Tout entier positif

Configuration des Colonnes​

Types de Colonnes​

Chaîne de Caractères​

• Description : Affichage de données textuelles
• Fonctionnalités :
  • Filtrable avec recherche de texte
  • Triable par ordre alphabétique
  • Formatage HTML personnalisé

Nombre​

• Description : Affichage de données numériques
• Fonctionnalités :
  • Filtrage numérique (égal à, supérieur à, inférieur à)
  • Tri numérique
  • Contrôle de la précision décimale

Date​

• Description : Affichage de date et heure
• Fonctionnalités :
  • Filtrage par plage de dates
  • Tri chronologique
  • Formatage de date personnalisé
• Format : Configurer en utilisant l'option dateFormat
• Exemple : YYYY-MM-DD HH:mm:ss

Devise​

• Description : Affichage de valeur monétaire
• Fonctionnalités :
  • Formatage automatique de devise
  • Affichage spécifique aux paramètres régionaux
  • Filtrage numérique
• Configuration :
  • currency_local : Paramètres régionaux (par exemple, 'en-US', 'fr-FR')
  • currency : Code de devise (par exemple, 'USD', 'EUR')

Booléen​

• Description : Affichage de valeur vrai/faux
• Fonctionnalités :
  • Représentation par case à cocher
  • Filtrage Vrai/Faux

Tableau​

• Description : Affichage de données de tableau
• Fonctionnalités :
  • Formatage de liste
  • Filtrage spécifique aux tableaux

Bouton​

• Description : Boutons d'action dans les cellules de table
• Fonctionnalités :
  • Plusieurs boutons par colonne
  • Actions et style personnalisés
  • Visibilité conditionnelle

Sélection​

• Description : Cases à cocher de sélection de lignes
• Fonctionnalités :
  • Sélection multi-lignes
  • Fonctionnalité de tout sélectionner
  • Gestion des événements de sélection

Propriétés des Colonnes​

Champ​

• Objectif : Nom du champ de base de données ou propriété de données
• Format : Utiliser la notation par points pour les propriétés imbriquées
• Exemple : user.name, product.price

Libellé​

• Objectif : En-tête d'affichage pour la colonne
• Localisation : Prend en charge les clés de traduction
• Exemple : Nom d'utilisateur, Prix du produit

Largeur​

• Objectif : Définir la largeur de la colonne
• Format : Pixels ou pourcentage
• Exemple : 150px, 20%

Comportement des Colonnes​

Filtrable​

• Objectif : Activer le filtrage pour la colonne
• Fonctionnalités :
  • Contrôles de filtre spécifiques au type
  • Filtrage en temps réel
  • Opérateurs de filtre multiples

Triable​

• Objectif : Activer le tri pour la colonne
• Fonctionnalités :
  • En-têtes cliquables pour trier
  • Indicateurs visuels de tri
  • Tri multi-colonnes

Position Fixe​

• Objectif : Fixer la position de la colonne lors du défilement horizontal
• Options :
  • left : Fixer à gauche
  • right : Fixer à droite
  • none : Non fixe

Requis (pour les tables modifiables)​

• Objectif : Marquer le champ comme requis pour la saisie de données
• Validation : Empêche les soumissions vides

Visibilité​

• Objectif : Contrôler l'affichage de la colonne de manière conditionnelle
• Format : Expression JavaScript
• Exemple : {{userRole}} === 'admin'

Fonctionnalités Interactives​

Filtrage​

• Basculer : Afficher/masquer les contrôles de filtre
• Par Colonne : Contrôles de filtre individuels
• Types de Filtres :
  • Recherche de texte (contient, commence par, se termine par)
  • Comparaison numérique (égal à, supérieur à, inférieur à)
  • Plages de dates
  • Sélection booléenne

Pagination​

• Contrôles : Navigation Précédent/Suivant
• Taille de Page : Éléments par page configurables
• Affichage : Page actuelle et nombre total d'enregistrements
• Position : Navigation en haut et en bas

Tri​

• Cliquer sur les En-têtes : Trier en cliquant sur les en-têtes de colonne
• Indicateurs Visuels : Flèches de direction de tri
• Multi-Colonnes : Capacités de tri avancées

Options d'Exportation​

Exportation CSV​

• Séparateur de Valeur : Virgule, point-virgule ou tabulation
• Séparateur Décimal : Point ou virgule
• Format de Date : Formatage de date personnalisable
• Nom de Fichier : Nom de fichier d'exportation personnalisé

Exportation Excel​

• Nom de Feuille : Nom de feuille de calcul personnalisé
• Nom de Fichier : Nom de fichier d'exportation personnalisé
• Formatage : Préserve les types de données

Gestion de la Sélection​

• Sélection de Lignes : Sélection basée sur des cases à cocher
• Événements de Sélection : Gérer les changements de sélection
• Actions en Masse : Opérer sur les lignes sélectionnées

Fonctionnalités Avancées​

Support d'Agrégation​

• Regrouper Par : Opérations de regroupement de données
• Calculs : Fonctions de somme, comptage, moyenne
• Données Imbriquées : Affichage de données hiérarchiques

Mises à Jour en Temps Réel​

• Liaison de Données : Mises à jour automatiques lorsque les données sources changent
• Contrôles d'Actualisation : Capacités d'actualisation manuelle
• États de Chargement : Retour visuel pendant les opérations de données

Optimisation Mobile​

• Mise en Page Réactive : Adaptation mobile automatique
• Contrôles Tactiles : Interactions adaptées au tactile
• Détails Réductibles : Détails de ligne extensibles sur mobile

Exemple d'Utilisation​

Meilleures Pratiques​

Performance​

• Utiliser des limites appropriées pour les grands ensembles de données
• Implémenter le filtrage côté serveur pour les grandes données
• Considérer la pagination pour l'expérience utilisateur

Expérience Utilisateur​

• Fournir des en-têtes de colonne clairs
• Utiliser un formatage de données cohérent
• Inclure des états de chargement pour un meilleur retour

Accessibilité​

• Assurer une navigation clavier appropriée
• Utiliser une structure HTML sémantique
• Fournir un texte alternatif pour les éléments visuels

Gestion des Données​

• Valider les données avant l'affichage
• Gérer les états d'erreur avec élégance
• Implémenter des stratégies d'actualisation de données appropriées

Dépannage​

Problèmes Courants​

Données ne se Chargent pas​

• Vérifier la configuration de la source de données
• Vérifier la syntaxe de la requête
• Assurer les autorisations appropriées

Problèmes de Formatage​

• Valider les paramètres de type de colonne
• Vérifier les configurations de format de date/devise
• Vérifier les applications de classe CSS

Problèmes de Performance​

• Réduire la taille de page pour les grands ensembles de données
• Optimiser la complexité de la requête
• Considérer le traitement côté serveur

Conseils de Débogage​

• Utiliser les outils de développement du navigateur
• Vérifier la console pour les messages d'erreur
• Tester les requêtes indépendamment
• Vérifier la connectivité de la source de données