Meilleur plugin de tableaux et graphiques WordPress ?

Besoin d'un moyen d'afficher des données, des tableaux ou des graphiques sur votre site WordPress ? Dans notre examen pratique de wpDataTables, nous allons jeter un œil à l'une des solutions les plus puissantes pour les tables simples ou complexes.

En général, wpDataTables est l'un des plugins de tableau et de graphique les plus flexibles que vous puissiez trouver. Vous pouvez importer ou synchroniser des données à partir de tonnes de sources différentes, notamment Excel, Google Sheets, CSV, JSON, la base de données de votre site WordPress, des bases de données externes, etc. Si nécessaire, vous pouvez ensuite créer une variété de graphiques à partir de n'importe lequel de vos tableaux.

Ou, avec le nouveau générateur de tableaux simples, vous pouvez concevoir des tableaux visuels simples tels que des tableaux de comparaison de produits ou des tableaux de prix.

Mieux encore, les interfaces utilisateur sont excellentes à la fois sur le frontend et le backend, ce qui offre une excellente expérience à vos visiteurs et vous permet également de travailler facilement avec vos tableaux et graphiques.

Dans l'ensemble, je pense que le plugin wpDataTables est assez bon dans ce qu'il fait, donc notre avis sur wpDataTables sera généralement assez positif.

Dans les sections pratiques ci-dessous, je mettrai en évidence les fonctionnalités clés de wpDataTables et vous montrerai comment tout fonctionne afin que vous puissiez comprendre d'où vient cette positivité.

Remarque - nous avons initialement publié cette revue en 2018, mais nous lui avons donné une actualisation complète en octobre 2021 pour tenir compte des nouvelles fonctionnalités et des modifications apportées à l'interface wpDataTables.

Examen de wpDataTables : un aperçu rapide des fonctionnalités

Tout d'abord, tous les tableaux et graphiques que vous créez avec wpDataTables sont responsive . Je sais - "réactif" n'est pas vraiment quelque chose de sexy en 2021. Mais vous seriez surpris par le nombre de plugins de table qui ne gèrent pas bien la conception réactive, c'est donc en fait un avantage assez important. Vous pouvez configurer vos propres points d'arrêt personnalisés et masquer des colonnes spécifiques sur les tablettes/appareils mobiles.

Une autre chose que vous aimerez à propos de wpDataTables est le nombre de façons qu'il vous offre pour créer des tables et/ou importer du contenu. Tu peux:

• Créer des tableaux à partir de zéro
• Liez une table à une source externe , comme Excel, Google Sheets, JSON, une requête SQL, un tableau PHP, etc. Les données seront mises à jour lorsque vous modifierez le fichier source .
• Importez depuis une source externe , comme Excel ou Google Sheets. Contrairement au précédent, il s'agit d'une importation unique . Les données ne se synchronisent pas.
• Utilisez un générateur de requêtes de base de données pour ajouter du contenu WordPress à votre tableau, comme des publications, des taxonomies, des postmeta, etc.
• Utilisez une requête MySQL pour extraire des données de votre propre base de données externe .

Bien que je ne sache pas comment le tester, wpDataTables affirme qu'il est capable de gérer de grandes tables, même dans des millions de lignes.

Pour modifier les données de votre tableau, vous pouvez soit utiliser un éditeur de type Excel où il vous suffit de cliquer et de taper dans les champs. Ou, vous pouvez utiliser un éditeur "standard" qui vous permet de modifier des lignes entières dans une fenêtre contextuelle.

Pour des tableaux plus simples, wpDataTables a également lancé récemment un constructeur de « tableau simple ». Vous pouvez l'utiliser pour créer davantage de tableaux visuels tels que des tableaux de comparaison de produits, des tableaux de prix, etc. Fondamentalement, des tables où vous n'avez pas besoin de travailler avec des tonnes de données, mais vous voulez plus de contrôle sur la conception.

Au-delà de cela, vous obtenez des tonnes de paramètres pour contrôler l'apparence et le fonctionnement de vos tableaux, notamment :

• Mise en forme conditionnelle
• Édition de table frontale
• Options de tri
• Fonctionnalité de filtre (y compris un widget dédié)
• Options de recherche
• Options frontales pour exporter des tableaux vers Excel ou CSV
• Options frontales pour imprimer un tableau

Et oh oui, wpDataTables n'est pas seulement pour les tables ! Vous pouvez également l'utiliser pour transformer n'importe lequel de vos tableaux en un superbe graphique. Vous pouvez choisir parmi une grande variété de types de graphiques et vos graphiques seront automatiquement mis à jour lorsque vous modifierez les données du tableau. Voici une liste partielle de certains types de graphiques :

• Graphique en ligne
• Diagramme à bandes
• Diagramme à colonnes
• Graphique en aires
• Diagramme circulaire
• Graphique en anneau
• Histogramme
• Tableau de jauge
• Diagramme de dispersion
• Graphique en chandeliers

Si vous voulez voir les tableaux et les graphiques en action, vous pouvez consulter quelques démos ici.

Pratique avec wpDataTables : Huit choses que vous aimerez

Ok, maintenant allons-y avec wpDataTables et je vais vous montrer comment ces fonctionnalités fonctionnent réellement. Je couvrirai cela d'une manière linéaire afin que vous puissiez également voir à quoi ressemble la création de tableaux et de graphiques avec wpDataTables.

1. Assistant de création de tableau

Pour vous aider à créer vos tables, wpDataTables vous propose un assistant de construction de table bien conçu.

Tout d'abord, vous choisirez d'où vous souhaitez obtenir les données de votre table. Vous pouvez voir les six options que j'ai mentionnées ci-dessus - cinq des options sont axées sur les tableaux de données, tandis que vous obtenez également la nouvelle option "tableau simple" pour des tableaux plus visuels :

J'ai choisi d' importer à partir d'une source de données . Dans mon cas, il s'agit d'un tableau Google Sheets publié qui contient l'âge des hommes lauréats des Oscars pour chaque année.

Pour cette méthode, il vous suffit de coller l'URL :

wpDataTables vous donne ensuite un résumé des colonnes qu'il a trouvées. Si vous le souhaitez, vous pouvez modifier le type de données de chaque colonne (par exemple, vous pouvez faire d'une colonne un nombre ou une date). Vous pouvez également ajouter manuellement de nouvelles colonnes si nécessaire :

Une fois que vous êtes satisfait de l'apparence des choses, vous dites à wpDataTables d'importer la table et toutes les données seront importées.

2. Deux éditeurs de tableaux différents pour les données, y compris l'éditeur de type Excel

En plus du simple générateur de tableaux pour les tableaux visuels ( que je partagerai avec vous plus tard ), wpDataTables vous propose deux éditeurs différents pour travailler avec les données :

• Éditeur de type Excel - voici à quoi cela ressemble. Vous pouvez modifier les données dans votre navigateur comme vous le feriez dans des cellules Excel.
• Éditeur standard - vous obtenez une interface plus visuelle, ainsi que des fenêtres contextuelles pour gérer des détails tels que les paramètres de colonne.

Voici comment fonctionne l'éditeur de type Excel - pour modifier un champ, vous pouvez simplement double-cliquer et taper ( comme si vous travailliez dans Excel ):

Pour les champs non textuels, vous obtiendrez d'autres sélecteurs. Par exemple, vous pouvez ouvrir un sélecteur de date pour les colonnes avec le type de données date.

Vous pouvez également ouvrir une vue de liste de colonnes qui vous permet de configurer rapidement des colonnes ou de trier/filtrer vos données :

Et voici comment cela fonctionne pour utiliser l'éditeur standard :

Une bonne chose ici est que vous pouvez rapidement ouvrir les paramètres d'une colonne sous forme de diapositive lorsque vous travaillez dans l'éditeur standard.

Dans l'ensemble, l'éditeur de type Excel est utile lorsque vous travaillez réellement avec des données. Mais l'avantage de l'éditeur standard est qu'il facilite l'accès aux commandes détaillées des colonnes. En parlant de…

3. Paramètres de colonne détaillés

Dans l'éditeur standard, vous pouvez accéder aux paramètres détaillés de chaque colonne qui vous permettent de contrôler des paramètres tels que :

• Types de données
• Classes CSS personnalisées
• S'il faut autoriser le tri
• S'il faut autoriser le filtrage. Si oui, comment utiliser le filtrage
• Mise en forme conditionnelle. Par exemple, vous pouvez ajouter une classe CSS personnalisée basée sur les données de la cellule ( c'est en effet un peu comme la mise en forme conditionnelle dans Excel ou Google Sheets )

4. Paramètres détaillés du tableau global

Au-dessus des données du tableau, vous obtenez une collection de paramètres généraux pour votre tableau.

Ici, vous pouvez contrôler :

• Paramètres à l'échelle du tableau pour les filtres, le tri et la recherche.
• Modification frontale - si les utilisateurs peuvent ou non modifier le tableau depuis le frontal.
• Outils de tableau - ceux-ci permettent aux utilisateurs d'imprimer votre tableau ou de l'exporter vers Excel/CSV.

Et c'est également là que vous pouvez activer la possibilité de masquer certaines colonnes sur divers appareils :

Lorsque vous activez la réduction réactive, vous obtenez de nouveaux paramètres de colonne qui vous permettent de masquer des colonnes individuelles sur des appareils mobiles ou des tablettes.

Dans une version récente, wpDataTables a également ajouté un nouvel onglet Personnaliser qui vous permet de personnaliser la conception de vos tables. Vous pouvez commencer par choisir un « skin » de base. Ensuite, vous pouvez utiliser les autres options pour contrôler les couleurs, la typographie, les bordures et d'autres paramètres :

5. Créer un graphique à partir d'un tableau

Au-delà de la fonctionnalité de tableau, wpDataTables inclut également une fonctionnalité de graphique assez puissante qui vous permet de transformer n'importe lequel de vos tableaux en différents types de graphiques alimentés par quelques moteurs de graphique différents.

Lorsque vous allez créer un graphique, vous devez d'abord choisir le moteur de rendu à utiliser. Vos options sont :

• Graphiques Google
• Graphiques élevés
• Graphique.js

Ensuite, vous pouvez choisir le type de graphique à créer parmi les types pris en charge par le moteur de rendu que vous avez choisi. Par exemple, avec Google Charts, vous pouvez choisir parmi 14 types de graphiques différents :

Une fois que vous avez sélectionné le type de graphique, vous pouvez choisir l'une de vos tables existantes pour servir de source de données pour votre graphique :

Ensuite, vous pouvez choisir exactement les données de cette table à utiliser.

Par exemple, vous pouvez sélectionner seulement deux ou trois colonnes spécifiques.

Vous pouvez également entrer une plage pour les lignes à inclure et choisir de suivre ou non les options de filtrage du tableau ( c'est cool car le graphique se restituera en fait si l'un de vos visiteurs modifie ses options de filtre sur le front-end de votre site ):

Une fois que vous avez sélectionné les données à utiliser, wpDataTables vous donnera un aperçu en direct de votre graphique, ainsi que des options pour contrôler :

• Largeur du graphique réactif
• Regroupement
• Couleurs
• Les frontières
• Étiquettes
• Quelques autres paramètres plus petits

Une fois que vous êtes satisfait de vos paramètres, wpDataTables crache un shortcode que vous pouvez utiliser n'importe où sur votre site. Ou, vous pouvez également utiliser un bloc dédié.

6. Widget de filtre dédié

Si vous ne souhaitez pas inclure d'options de filtre au-dessus du tableau, wpDataTables est également livré avec son propre widget de filtre dédié que vous pouvez placer dans n'importe quelle zone de widget. Cela fonctionne à la fois avec le système de widgets classiques de WordPress et le nouvel éditeur de widgets basé sur des blocs.

Lorsque vous ajoutez le widget, il inclura des contrôles de filtre pour la table active :

7. Beaucoup de paramètres globaux

Au-delà des paramètres spécifiques aux tableaux/graphiques, wpDataTables vous offre également des tonnes d'options dans la zone wpDataTables → Paramètres . Ici, vous pouvez configurer des éléments tels que :

• S'il faut ou non analyser les shortcodes dans les tables
• Points d'arrêt réactifs
• Couleurs
• Polices
• CSS et JavaScript personnalisés
• Connexions de base de données séparées

8. Un nouveau générateur de tableau simple pour les tableaux visuels

Dans le passé, wpDataTables était à peu près exclusivement pour les tables de données où l'accent était mis sur les données, plutôt que sur la conception de la table. Par exemple, dans le passé , vous n'auriez pas utilisé wpDataTables pour les tableaux de comparaison de produits ou les tableaux de prix.

Cela a changé en 2021 lorsque wpDataTables a lancé son nouveau constructeur de tableaux simples . Avec le créateur de tableaux simple, vous bénéficiez d'une expérience de construction de tableaux plus visuelle qui inclut des fonctionnalités utiles telles que :

• Cellules fusionnées
• Coiffant
• Classement par étoiles
• Etc

Vous obtenez plus de contrôle sur le formatage, mais vous perdez les règles de tri, de filtrage et de pagination que vous obtenez avec les options de table de données plus avancées. Vous ne pouvez pas non plus créer de graphiques à partir de tableaux que vous créez avec le générateur de tableau simple.

Pour ces raisons, je pense que le générateur de tableau simple fonctionne mieux pour les tableaux où vous n'avez pas beaucoup de données, mais la façon dont vous présentez ces données est essentielle. Encore une fois, un exemple courant serait un tableau de comparaison de produits pour vos propres produits ou des produits affiliés dont vous faites la promotion.

Voici un exemple ci-dessous - encore une fois, vous pouvez voir que vous obtenez beaucoup plus d'options de formatage. Vous pouvez également insérer facilement un shortcode dans n'importe quelle cellule.

Plus bas sur la page, vous obtiendrez également un aperçu en direct de votre tableau terminé.

Un aperçu rapide des autres méthodes d'importation de données de graphique

Ci-dessus, je vous ai montré comment importer des données à partir d'un tableau Google Sheets. Mais l'un des grands avantages de wpDataTables est sa flexibilité en matière d'importation de données.

Donc, avant de terminer cet examen de wpDataTables, laissez-moi vous expliquer les autres façons d'obtenir des données dans vos tables.

Générateur de requêtes

Le générateur de requêtes vous permet d'interroger :

• Les données de la base de données de votre site WordPress (articles, taxonomies, etc.)
• Toutes les données d'une base de données MySQL externe

Si vous choisissez la base de données de votre site WordPress, wpDataTables vous offre ce générateur de requêtes très utile où vous pouvez parcourir vos différents types de publication et créer un filtre ciblé :

De même, wpDataTables peut vous aider à générer des requêtes vers une base de données externe à l'aide de la même interface visuelle.

Synchroniser avec une source externe

Une autre option intéressante consiste à synchroniser avec une source externe. Avec cette méthode, le plugin mettra automatiquement à jour la table à chaque rechargement de page ( ou à chaque fois que le cache est vidé si vous utilisez un plugin de mise en cache ).

Ici, vous pouvez choisir parmi une gamme de sources :

• Requête SQL
• Fichier CSV
• fichier Excel
• Feuille de calcul Google
• Fichier XML
• Fichier JSON
• Tableau PHP sérialisé

Création de table manuelle

Enfin, vous pouvez toujours créer une table à partir de zéro. Lorsque vous suivez cette route, vous devez d'abord configurer les colonnes à utiliser ainsi que leurs types de données associés :

Ensuite, vous pouvez saisir vos données à l'aide de l'éditeur de type Excel ou de l'éditeur standard.

Prix ​​​​wpDataTables: version gratuite limitée / Pro à partir de 59 $

Il existe une version limitée de wpDataTables sur WordPress.org. Cependant, c'est juste cela - "limité". Vous pouvez l'utiliser pour des tableaux simples avec le générateur de tableaux simples, mais ce ne sera pas vraiment une option pour les tableaux de données sérieux.

Si vous avez spécifiquement besoin d'un plug-in de table gratuit pour les tableaux de données ou les graphiques, vous feriez peut-être mieux d'utiliser une option différente.

Là où wpDataTables brille vraiment, c'est dans la version premium.

Vous pouvez soit acheter une licence avec un an d'assistance et de mises à jour, soit acheter une licence avec une assistance et des mises à jour à vie. Toutes les licences incluent toutes les fonctionnalités ; la seule différence est le nombre de sites sur lesquels vous pouvez l'utiliser :

• Un site – 59 $ pour une licence d'un an ou 189 $ pour une licence à vie.
• Trois sites – 109 $ pour une licence d'un an ou 389 $ pour une licence à vie.
• Sites illimités - 249 $ pour une licence d'un an ou 589 $ pour une licence à vie.

Vous pouvez également économiser de l'argent avec notre code promo exclusif wpDataTables.

Remarque - Assurez-vous d'acheter directement sur le site Web du développeur. Dans le passé, wpDataTables était vendu exclusivement via le marché CodeCanyon d'Envato. Le développeur maintient toujours la page de liste sur CodeCanyon, mais le prix est beaucoup plus élevé que l'achat directement auprès du développeur, nous ne recommandons donc plus de passer par CodeCanyon.

Examen de wpDataTables : nos dernières réflexions

Après avoir utilisé de nombreux plugins de table WordPress, je suis assez confiant pour dire que wpDataTables est certainement l'une des meilleures solutions qui existent.

Il est flexible dans la façon dont vous importez vos données de table. Et l'interface rend ce qui pourrait être un processus compliqué étonnamment simple.

Au-delà de cela, il est facile d'éditer vos tableaux grâce aux deux éditeurs différents. Et vous avez beaucoup de contrôle sur l'ensemble de vos tableaux ou sur des colonnes individuelles dans les différentes zones de paramètres.

Avec le nouveau générateur de table simple, vous pouvez également utiliser wpDataTables pour plus que, eh bien, des tables de données. Vous pouvez également l'utiliser pour des tableaux de comparaison de produits plus visuels, des tableaux de prix, etc.

Enfin, pouvoir créer des graphiques à partir du même plugin est pratique et la fonctionnalité des graphiques est vraiment facile à utiliser.

Le seul inconvénient est que la version gratuite de wpDataTables sur WordPress.org est assez limitée, vous devrez donc payer la version premium pour accéder à la plupart des fonctionnalités.

Cela étant dit, si vous êtes prêt à payer pour la version Pro, c'est certainement celle que vous devriez considérer.

Et si vous voulez voir d'autres options pour travailler avec des tableaux dans WordPress, consultez notre tutoriel TablePress.

Obtenir wpDataTables

️ N'oubliez pas d'utiliser notre coupon exclusif wpDataTables pour obtenir 20 % de réduction.

Avez-vous encore des questions sur wpDataTables ou notre avis sur wpDataTables ? Faites le nous savoir dans la section "Commentaires".