WP Table Manager: Tables de style

1. Format

L'onglet Format est disponible à la droite de votre écran par défaut. Il contient différents paramètres.

 

image31

 

  • Type de cellule: par défaut ou HTML. Le type par défaut vous permet de calculer avec HTML l'insertion de contenu HTML comme des images. Un éditeur WYSIWYG pour chaque cellule sera implémenté dans la prochaine version, pour le moment vous ajouterez du HTML dans la cellule.
  • Fond de cellule Couleur: définir la couleur de fond du cours

 

image32

 

Les bordures et les options de police peuvent être appliquées sur une ou plusieurs cellules

 

image33

 

La largeur des lignes et des colonnes peut être définie en pixels. Sélectionnez une colonne ou une ligne n'importe où dans la table et validez la taille.

 

2. Thème et options de tri

Sur l'onglet de la table, toujours sur la partie droite, vous avez un sélecteur de thème. Il suffit de cliquer sur un thème pour l'appliquer.

L'application d'un thème remplacera toutes les données et le style de votre tableau. La façon de procéder consiste donc à appliquer un thème, puis à modifier les données, à créer votre propre thème, puis à dupliquer vos tableaux.

 

choix de thème

 

La "fonction de mise en forme automatique: vous aide à colorer la ligne sur votre table avec Style d'en-tête et Style de pied de page options. Vous pouvez sélectionner les styles de modèles ou créer vos propres paramètres de plug-in.

 

image35

 

Le paramètre sortable vous permet de faire un tri de données AJAX sur le frontend.

 

image36

 

La table align est à peu près aligner la div qui contient la table entière, centrez toute la table par exemple.

 

image37

 

Une cellule hightlight est également disponible en option. Vous pouvez activer cette fonctionnalité dans la configuration. Il est désactivé par défaut. Vous pouvez sélectionner la couleur en surbrillance et l’opacité de la surbrillance.

 

point culminant

 

3. Ajouter une info-bulle sur les cellules

Les infobulles de cellules doivent être activées à partir de la configuration du plugin (Menu de configuration). Après l'activation, vous obtenez un bouton au bas de l'écran. Format onglet lors de l'édition de la table.

 

image39

 

Vous pouvez pour une largeur en pixels. L'info-bulle de modification vous amènera à une info-bulle avec un éditeur pour la modifier.

 

éditeur d'infobulle

 

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

 

infobulle

 

4. Congélation des lignes et des colonnes

La congélation de lignes ou de colonnes est disponible dans Table languette. Vous pouvez geler jusqu'à 5 lignes ou colonnes. Il est compté à partir de la première rangée / col.

 

ligne de congélation

 

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

 

ligne de gel

 

Lorsque vous avez choisi la ligne ou la colonne à figer, vous pouvez faire défiler votre tableau et afficher toujours la ligne / les lignes fixes.

 

affichage ligne fixe

 

5. Filtrage des données des colonnes

Une option de filtrage est à nouveau disponible dans l’onglet Table. Vous pouvez l'activer pour activer les champs de filtrage des données publiques.

 

filtre-colonne

Exemple de filtres:

 

responsive-table-scroll

 

6. CSS personnalisé

Allons un pas plus loin. Si vous êtes un webdesigner avec des compétences en CSS, vous pourrez ajouter des CSS dans le Plus onglet. Vous pouvez ajouter un remplissage et un rayon de bordure sur la cellule.

 

image47

 

Notez que si vous avez appliqué un thème, certains CSS personnalisés seront ajoutés automatiquement. Vous pouvez toujours l'éditer bien sûr.

 

Toujours sur le Plus onglet, cliquez sur la coutume Bouton CSS accéder à l'édition css. Le code CSS est coloré en utilisant le code miroir et peut être écrit en moins de CSS, ça marche aussi!

 

custom-table-css

 

Les cellules, les lignes et les colonnes ont des coordonnées pour les identifier et leur appliquer des CSS personnalisés. R est la ligne, C est la colonne.

 

affichage css

 

7. Tableaux WordPress responsive

Mes tables sont-elles réactives ou utilisent-elles le défilement sur de petits appareils?

WP Table Manager gère le design réactif avec un outil prioritaire, en option. Par défaut, la fonctionnalité responsive est désactivée, il y aura un débordement (mais cela fonctionne très bien sur mobile).

 

mode réactif

 

Le mode réactif étant avancé, vous pouvez définir une priorité pour masquer les colonnes sur les tailles de mobiles. Lorsque les colonnes sont masquées, un menu du mobile avec une case à cocher sera affiché pour forcer l'affichage / le masquage des colonnes.
La taille de la colonne est fixée lors de l'édition de la table. 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 des appareils mobiles.

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

 

responsive-table-scroll

 

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

 

57bb0cb0ac948

 

8. Télécharger le tableau

Pour partager votre table avec le public, vous devez activer Bouton de téléchargement option à Onglet Table sur le panneau de droite. Le type de fichier sera * .xlsx.

 

table de téléchargement

 

9. Pagination

Vous pouvez trouver cette fonctionnalité dans l'onglet Table de chaque table. Activer et choisir le nombre de lignes à afficher dans une page.

 

pagination-wptm