Droptables : Table de style

1. Formater dans le tableau

Dans la barre d'outils, vous pouvez définir le style de la cellule, par exemple : 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,... Il peut être appliqué à une seule cellule ou à plusieurs cellules.

La hauteur de ligne et la largeur de colonne peuvent être définies en pixels. Veuillez aller dans Menu Format > Appliquer la taille de colonne/ligne , puis sélectionnez Redimensionner la colonne / Redimensionner la ligne . Dans la fenêtre contextuelle, vous pouvez sélectionner la plage et définir px pour les colonnes ou les lignes. Cliquez sur le bouton Terminé

2. Thème et options de tri

Dans chaque tableau, vous pouvez trouver l' option de sélection de thème dans le menu Thème . Cliquez simplement sur un thème pour l'appliquer.

Sur le même thème de menu > Couleurs alternatives , la fonction "Style automatique" vous aide à colorer la ligne sur votre tableau avec les options tête et de style de pied Vous pouvez sélectionner les styles de modèle ou créer les vôtres dans les paramètres du plugin.

Le paramètre sortable vous permet de faire le tri des données AJAX sur le frontend. Vous pouvez voir dans Menu Format > Trier .

L'alignement de table consiste à aligner la div qui contient toute la table, centrer toute la table par exemple. Vous pouvez trouver dans Menu Format > Tableau aligner .

Une surbrillance de cellule est également disponible en option. Vous pouvez activer les options Ligne, Colonne ou Les deux dans la configuration . Il est désactivé par défaut. Vous pouvez ajuster la couleur et l'opacité de la surbrillance.

3. Ajouter une info-bulle sur les cellules

Une info-bulle sur le survol de la souris cellulaire est également disponible (doit être activée à partir des options du composant). Sur chaque cellule d'un tableau, vous pouvez voir l' option Info - bulle lorsque vous faites un clic droit dessus.

Vous pouvez définir la largeur de l'info-bulle en pixels. Cela vous amènera à une info-bulle avec un éditeur à modifier.

Ajoutez du contenu et enregistrez, vous avez terminé, l'info-bulle sera affichée du côté public au survol de la souris.

4. Administration des listes de contrôle d'accès et frontend

Il est possible de gérer vos tables depuis le frontend Joomla. Dans le gestionnaire de menus Joomla, ajoutez un nouvel élément de menu et sélectionnez comme type Gérer les tables et sélectionnez Droptables - Par défaut comme modèle.

Voici ce que vous pouvez voir Droptables Manager depuis le frontend.

Vous pouvez utiliser l'ACL du groupe d'utilisateurs Joomla pour contrôler les actions d'édition de table. Tout d'abord, pour configurer qui est autorisé à afficher les tables, vous devez accéder à Rôles d'utilisateur dans Droptables .

Vous pouvez définir le propriétaire d'un tableau à partir du menu Tableau > Accès au tableau.

5. Gel des lignes et des colonnes

Gel de colonne

Le gel des colonnes est disponible dans le menu Format > Options réactives . Vous pouvez geler jusqu'à 5 colonnes. C'est compté à partir du premier col.

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

Lorsque vous aurez choisi la colonne à geler, vous pourrez faire défiler votre tableau et afficher toujours la colonne fixe.

Congélation de rangs

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

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

Ensuite, la première ligne sera gelée sur le frontend après le réglage.

6. Filtrage des données de colonne

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

Exemple de filtres:

7. Remplissage des cellules et rayon de la bordure

Vous pouvez trouver l'icône de bordure sur la barre d'outils qui permet d'ajuster le remplissage et le rayon de la bordure sur la cellule.

8. CSS personnalisé

Allons un peu plus loin. Si vous êtes un concepteur Web avec des compétences en édition CSS, vous pourrez ajouter du CSS dans Menu Format > Custom CSS .

Les cellules, les lignes, les colonnes ont des coordonnées pour identifier chacune et lui appliquer un CSS personnalisé. R est ligne, C est colonne. Ici c'est ligne 1 (r1), colonne 4 (c4) = dtr1 dtc4

Le code CSS est coloré à l'aide du miroir de code. Le code CSS peut être moins de code, ça marche aussi !

9. Tableaux Joomla responsive

Mes tableaux sont-ils responsive ou utilisent-ils le défilement sur de petits appareils?

Cacher les cols

Droptables gèrent la conception réactive avec un outil prioritaire, en option. Par défaut, la fonctionnalité réactive est désactivée, il y aura un débordement (qui fonctionne très bien sur mobile cependant). Pour utiliser Hiding Cols , vous devez aller dans Menu Format> Options réactives.

Le mode responsive est avancé, vous pouvez définir une priorité pour masquer les colonnes sur les tailles mobiles.
Lorsque les colonnes sont masquées, un menu mobile avec une case à cocher s'affichera pour forcer l'affichage/masquage des colonnes. La taille des colonnes est fixée lors de l'édition du tableau. Si la taille de toutes les colonnes est trop grande pour le conteneur, vous aurez un débordement et vous pourrez facilement faire défiler sur les appareils mobiles.

Tableau avec un parchemin (mieux pour un petit nombre de colonnes)

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

En-tête répété

C'est une autre option si vous souhaitez insérer un tableau dans une petite zone de votre site. Vous devez accéder à Format de menu > Options réactives. Sélectionnez ensuite Type réactif > En-tête répété.

Il y aura des options à personnaliser selon votre demande:

• Point d'arrêt réactif (px): sélectionnez une valeur de point d'arrêt en pixel pour définir le moment où la table basculera vers ce mode réactif
• Responsive max-height (px): lorsque le mode responsive est activé, en fonction de la valeur du point d'arrêt, définissez une hauteur max pour éviter une table très longue
• Style de mode réactif: appliquez un style par défaut pour ce mode réactif ou utilisez les couleurs du tableau

Après cela, vous pouvez voir à quoi ressemblera la table sur le frontend.

10. Télécharger le tableau

Afin de partager votre tableau avec le public, accédez à Menu Table et cochez l' bouton Exporter Excel . Le type de fichier sera *.xlsx lors du téléchargement sur le frontend.

11. Mise en page

Vous pouvez trouver cette fonctionnalité dans Format de menu > Pagination dans chaque édition de tableau. Utilisez le bouton bascule pour activer et choisir le nombre de lignes à afficher sur une page.

12. Format pour les cellules individuelles 

Vous pouvez définir le format : date, heure, devises, nombre pour une ou plusieurs cellules dans Droptables . Tout d'abord, vous devez sélectionner une/des cellule(s) multiple(s). Ensuite, allez dans Menu Format> Date et heure.

Après cela, les devises et le numéro peuvent être effectués de la même manière.

13. Imprimer le tableau sur le frontend

Parfois, vous devez imprimer votre tableau. Ainsi, pour afficher le bouton Imprimer sur le frontend, vous devez d’abord accéder au tableau de menu et cocher du bouton Imprimer .