Droptables: Table de style

1. Format du tableau

Dans la barre d'outils, vous pouvez définir le style de la cellule, notamment : la police, la taille de la police, le style du texte, la couleur d'arrière-plan de la cellule, la couleur du texte, l'alignement horizontal et vertical de la cellule… Ces paramètres peuvent être appliqués à une seule cellule ou à plusieurs cellules.

La hauteur des lignes et la largeur des colonnes peuvent être définies en pixels. Accédez au menu Format > Appliquer la taille des colonnes/lignes , puis sélectionnez Redimensionner les colonnes / Redimensionner les lignes . Dans la fenêtre contextuelle, vous pouvez sélectionner la plage et définir les valeurs en pixels pour les colonnes ou les lignes. Cliquez sur Terminé pour finaliser.

2. Options de thème et de tri

Dans chaque tableau, vous trouverez de sélection du thème dans le menu Thème . Il vous suffit de cliquer sur un thème pour l'appliquer.

Dans le même menu, sous Thème > Couleurs alternatives , la fonction « Style automatique » vous permet de colorer les lignes de votre tableau grâce d'en-tête et de pied de page . Vous pouvez sélectionner les styles prédéfinis ou créer les vôtres dans les paramètres du plugin.

Le paramètre sortable vous permet de trier les données AJAX côté client. Vous pouvez le voir dans le menu Format > Trier .

L'alignement du tableau permet d'aligner le conteneur (div) qui le contient, par exemple en centrant le tableau. Vous trouverez cette option dans le menu Format > Alignement du tableau .

La mise en surbrillance des cellules est également disponible en option. Vous pouvez activer les options Ligne, Colonne ou Les deux dans la configuration . Elle est désactivée par défaut. Vous pouvez ajuster la couleur et l'opacité de la mise en surbrillance.

3. Ajouter une infobulle aux cellules

Une infobulle s'affiche au survol de la souris sur une cellule (à activer dans les options du composant). Pour chaque cellule d'un tableau, vous pouvez accéder à l' « Infobulle » en effectuant un clic droit.

Vous pouvez définir la largeur de l'infobulle en pixels. Vous accéderez alors à une infobulle contenant un éditeur pour la modifier.

Ajoutez du contenu et enregistrez, c'est terminé ! L'infobulle s'affichera publiquement au survol de la souris.

4. Administration des ACL et de l'interface utilisateur

Il est possible de gérer vos tables depuis l'interface publique de Joomla. Dans le gestionnaire de menus de Joomla, ajoutez un nouvel élément de menu, sélectionnez « Gérer les tables » comme type et choisissez Droptables frontend - Default » comme modèle.

Voici ce que vous pouvez voir dans Droptables Manager depuis l'interface utilisateur.

Vous pouvez utiliser le système de contrôle d'accès (ACL) des groupes d'utilisateurs Joomla pour gérer les actions d'édition des tableaux. Pour commencer, configurez les utilisateurs autorisés à consulter les tableaux en accédant à « Rôles des utilisateurs » dans Droptables .

Vous pouvez définir le propriétaire d'une table depuis le menu Table > Accès à la table.

5. Gel des lignes et des colonnes

Congélation en colonne

Le gel des colonnes est disponible dans le menu Format > Options responsives . Vous pouvez geler jusqu'à 5 colonnes. Le comptage commence à la première colonne.

Pour figer les colonnes/lignes, il existe une option supplémentaire qui vous permet de fixer la hauteur du tableau (car le conteneur de votre tableau peut avoir une hauteur infinie).

Une fois la colonne à figer sélectionnée, vous pourrez faire défiler votre tableau et afficher en permanence cette colonne fixe.

Gel des rangées

Vous pouvez le trouver dans le menu Format > En-tête du tableau , à partir de là vous pouvez activer l'option et définir des lignes à figer (jusqu'à 5 lignes).

Si vous souhaitez régler la hauteur de la table, veuillez revenir aux options réactives.

La première ligne sera alors figée côté client conformément aux paramètres définis.

6. Filtrage des données de colonne

Une option de filtrage est disponible dans le menu Format > Filtres . Vous pouvez l'activer en cliquant pour activer les champs de filtrage des données publiques.

Exemple de filtres :

7. Rembourrage des cellules et rayon de bordure

Vous trouverez l'icône de bordure dans la barre d'outils ; elle permet de régler le remplissage et le rayon de bordure de la cellule.

8. CSS personnalisé

Allons encore plus loin. Si vous êtes un concepteur web maîtrisant l'édition CSS, vous pourrez ajouter du CSS dans le menu Format > CSS personnalisé .

Les cellules, les lignes et les colonnes possèdent des coordonnées permettant de les identifier et d'appliquer un style CSS personnalisé. R représente une ligne et C une colonne. Ici, il s'agit de la ligne 1 (r1) et de la colonne 4 (c4) : dtr1 dtc4

Le code CSS est coloré à l'aide de CodeMirror. On peut aussi utiliser moins de code CSS !

9. Tableaux Joomla responsifs

Mes tableaux sont-ils adaptatifs ou utilisent-ils le défilement sur les petits appareils ?

Cacher les Cols

Droptables gère la conception adaptative grâce à un outil prioritaire, disponible en option. Par défaut, cette fonctionnalité est désactivée, ce qui provoque un débordement (fonctionnant parfaitement sur mobile). Pour utiliser « Masquer les colonnes » , accédez à Format du menu > Options adaptatives.

Le mode adaptatif est avancé : vous pouvez définir une priorité pour le masquage des colonnes sur les appareils mobiles. Lorsque des colonnes sont masquées, un menu mobile avec une case à cocher s'affiche pour forcer leur affichage ou leur masquage.
La taille des colonnes est fixe lors de la création du tableau. Si la taille de toutes les colonnes dépasse celle du conteneur, un débordement se produit, permettant un défilement aisé sur les appareils mobiles.

Tableau avec défilement (idéal pour un petit nombre de colonnes)

Tableau avec colonne masquée (idéal pour un grand nombre de colonnes)

En-tête répété

Voici une autre option si vous souhaitez insérer un tableau dans une zone restreinte de votre site. Accédez à Format du menu > Options responsives, puis sélectionnez Type responsive > En-tête répété.

Des options de personnalisation seront disponibles en fonction de vos besoins :

• Point de rupture adaptatif (px) : Sélectionnez une valeur de point de rupture en pixels pour définir à quel moment le tableau basculera en mode adaptatif.
• Hauteur maximale adaptative (px) : Lorsque le mode adaptatif est activé, en fonction de la valeur du point de rupture, définissez une hauteur maximale pour éviter un tableau trop long.
• Style du mode adaptatif : Appliquez un style par défaut pour ce mode adaptatif ou utilisez les couleurs du tableau

Vous pourrez ensuite voir à quoi ressemblera le tableau sur l'interface utilisateur.

10. Télécharger le tableau

Pour partager votre tableau avec le public, accédez au menu « Tableau » et cochez l’ « Exporter vers Excel » . Le fichier téléchargé sera au format *.xlsx.

11. Pagination

Vous trouverez cette fonctionnalité dans le menu Format > Pagination de chaque édition de tableau. Utilisez le bouton bascule pour l'activer et choisir le nombre de lignes à afficher par page.

12. Format pour les cellules individuelles 

Vous pouvez définir le format (date et heure, devises, nombre) pour une ou plusieurs cellules dans Droptables . Commencez par sélectionner une ou plusieurs cellules, puis accédez à Format > Date et heure.

Ensuite, les devises et les nombres peuvent être traités de la même manière.

13. Imprimer le tableau côté client

Il peut arriver que vous ayez besoin d'imprimer votre tableau. Pour afficher le bouton Imprimer sur l'interface, vous devez d'abord accéder à la section « Tableau du menu » et cocher correspondante .