Visualisation: Table

Présentation

Un tableau qui peut être trié et paginé. Vous pouvez mettre en forme les cellules d'un tableau à l'aide de chaînes de mise en forme ou en insérant directement du code HTML en tant que valeurs de cellule. Les valeurs numériques sont alignées à droite ; les valeurs booléennes sont affichées sous forme de coches. Les utilisateurs peuvent sélectionner des lignes individuelles à l'aide du clavier ou de la souris. Les utilisateurs peuvent trier les lignes en cliquant sur les en-têtes de colonne. La ligne d'en-tête reste fixe lorsque l'utilisateur fait défiler la page. Le tableau déclenche un certain nombre d'événements correspondant à une interaction de l'utilisateur.

Exemple

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['table']});
      google.charts.setOnLoadCallback(drawTable);

      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');
        data.addRows([
          ['Mike',  {v: 10000, f: '$10,000'}, true],
          ['Jim',   {v:8000,   f: '$8,000'},  false],
          ['Alice', {v: 12500, f: '$12,500'}, true],
          ['Bob',   {v: 7000,  f: '$7,000'},  true]
        ]);

        var table = new google.visualization.Table(document.getElementById('table_div'));

        table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
      }
    </script>
  </head>
  <body>
    <div id="table_div"></div>
  </body>
</html>

Chargement...

Le nom du package google.charts.load est "table".

  google.charts.load('current', {packages: ['table']});

Le nom de classe de la visualisation est google.visualization.Table.

  var visualization = new google.visualization.Table(container);

Format des données

Le tableau de données est converti en un tableau HTML correspondant, chaque ligne/colonne de ce tableau étant convertie en ligne/colonne dans le tableau HTML. Chaque colonne doit avoir le même type de données, et tous les types de données de visualisation standards sont acceptés (chaîne, booléen, nombre, etc.).

Propriétés personnalisées

Vous pouvez attribuer les propriétés personnalisées suivantes aux éléments du tableau de données à l'aide de la méthode setProperty() de DataTable.

Nom de la propriété Applicable à Description
className Cell Nom de classe de chaîne à attribuer à une cellule individuelle. Permet d'appliquer un style CSS à des cellules individuelles.
style Cell Chaîne de style à attribuer de manière intégrée à la cellule. Les styles de classe CSS appliqués à cette cellule seront ignorés. Pour que cela fonctionne, vous devez définir la propriété allowHTML=true. Exemple : 'border: 1px solid green;'

Exemple

dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});

Options de configuration

Nom
allowHtml

Si cette règle est définie sur "true", les valeurs mises en forme des cellules qui incluent des balises HTML sont affichées au format HTML. Si cette règle est définie sur "false", la plupart des outils de mise en forme personnalisés ne fonctionneront pas correctement.

Type:booléen
Par défaut : "false"
alternatingRowStyle

Détermine si un style de couleur en alternance sera attribué aux lignes impaires et paires.

Type:booléen
Valeur par défaut : "true"
cssClassNames

Objet dans lequel chaque nom de propriété décrit un élément de table, et la valeur de la propriété est une chaîne définissant une classe à attribuer à cet élément de table. Utilisez cette propriété pour attribuer du code CSS personnalisé à des éléments spécifiques de votre tableau. Pour utiliser cette propriété, attribuez un objet, où le nom de la propriété spécifie l'élément de table et la valeur de la propriété est une chaîne, en spécifiant un nom de classe à attribuer à cet élément. Vous devez ensuite définir un style CSS pour cette classe sur votre page. Les noms de propriétés suivants sont acceptés:

  • headerRow : attribue un nom de classe à la ligne d'en-tête du tableau (élément <tr>).
  • tableRow : attribue un nom de classe aux lignes sans en-tête (éléments <tr>).
  • oddTableRow : attribue un nom de classe aux lignes de tableau impaires (éléments <tr>). Remarque:L'option alternatingRowStyle doit être définie sur "true".
  • selectedTableRow : attribue un nom de classe à la ligne du tableau sélectionnée (élément <tr>).
  • hoverTableRow : attribue un nom de classe à la ligne du tableau survolée (élément <tr>).
  • headerCell : attribue un nom de classe à toutes les cellules de la ligne d'en-tête (élément <td>).
  • tableCell : attribue un nom de classe à toutes les cellules du tableau sans en-tête (élément <td>).
  • rowNumberCell : attribue un nom de classe aux cellules de la colonne des numéros de ligne (élément <td>). Remarque:L'option showRowNumber doit être définie sur "true".

Exemple: var cssClassNames = {headerRow: 'bigAndBoldClass',
hoverTableRow: 'highlightClass'};

Remarque:En CSS, certains éléments en remplacent d'autres. Par exemple, si vous spécifiez une couleur d'arrière-plan pour un élément <tr> et un élément <td>, cette couleur est prioritaire sur la première. Assurez-vous de spécifier tous les styles CSS pertinents dans cssClassNames pour éviter les conflits.

Type:objet
Par défaut:null
firstRowNumber

Numéro de la première ligne du tableau de données. Utilisé uniquement si showRowNumber est défini sur "true".

Type:nombre
Par défaut : 1
frozenColumns

Nombre de colonnes à partir de la gauche qui seront figées. Ces colonnes restent en place lorsque vous faites défiler les colonnes restantes horizontalement. Si showRowNumber est défini sur false, la définition de frozenColumns sur 0 aura le même effet que si elle était définie sur null, mais si showRowNumber est définie sur true, la colonne des numéros de ligne sera figée.

Type:nombre
Par défaut:null
taille

Définit la hauteur de l'élément conteneur de la visualisation. Vous pouvez utiliser des blocs d'annonces HTML standards (par exemple, "100px", "80em", "60"). Si aucune unité n'est spécifiée, le nombre est considéré comme étant des pixels. Si cette valeur n'est pas spécifiée, le navigateur ajuste automatiquement la hauteur pour s'adapter au tableau, en la réduisant le plus possible au cours du processus. Si la valeur est inférieure à la hauteur requise, le tableau ajoute une barre de défilement verticale (la ligne d'en-tête est également figée). Si la valeur est définie sur "100%", le tableau se développera autant que possible dans l'élément conteneur.

Type:chaîne
Par défaut:automatique
page

Indique si et comment activer la pagination des données. Choisissez l'une des valeurs de chaîne suivantes:

  • "enable" : le tableau comprendra des boutons de page suivante et de page précédente. Cliquez sur ces boutons pour effectuer l'opération de pagination et modifier la page affichée. Vous pouvez également définir l'option "pageSize".
  • "event" : le tableau comprendra des boutons "Page précédente" et "Page précédente", mais le fait de cliquer dessus déclenche un événement "page" et ne modifie pas la page affichée. Cette option doit être utilisée lorsque le code implémente sa propre logique de rotation des pages. Consultez l'exemple TableQueryWrapper pour découvrir comment gérer manuellement les événements de pagination.
  • "disable" [par défaut] : la pagination n'est pas prise en charge.
  • Type:chaîne
    Par défaut : "disable"
pageSize

Nombre de lignes dans chaque page, lorsque la pagination est activée avec l'option "Page".

Type:nombre
Valeur par défaut:10
pagingButtons

Définit une option spécifiée pour les boutons de pagination. Vous disposez des options suivantes :

  • "les deux" pour activer les boutons "Préc. et Suivant"
  • "prev" : seul le bouton "prev" est activé.
  • "Suivant" : seul le bouton "Suivant" est activé.
  • "auto" : les boutons sont activés en fonction de la page active. Sur la première page, seule la suivante est affichée. Seule la précédente est affichée sur la dernière page. Sinon, les deux sont activés.
  • number - Nombre de boutons de pagination à afficher. Ce nombre explicite remplacera le nombre calculé à partir de pageSize.
Type:chaîne ou nombre
Par défaut : "auto"
rtlTable

Ajout de la prise en charge de base des langues qui s'écrivent de droite à gauche (telles que l'arabe ou l'hébreu) en inversant l'ordre des colonnes de la table, de sorte que la colonne zéro soit la plus à droite et la dernière la colonne la plus à gauche. Cela n'affecte pas l'index de colonne dans les données sous-jacentes, mais uniquement l'ordre d'affichage. L'affichage bidirectionnel complet (BiDi) en langage n'est pas compatible avec la visualisation des tables, même avec cette option. Cette option sera ignorée si vous activez la pagination (à l'aide de l'option "Page") ou si le tableau comporte des barres de défilement, car vous avez spécifié des options de hauteur et de largeur inférieures à la taille de tableau requise.

Type:booléen
Par défaut : "false"
scrollLeftStartPosition

Définit la position de défilement horizontal, en pixels, si le tableau comporte des barres de défilement horizontales, car vous avez défini la propriété de largeur. Le tableau s'ouvre lorsque l'utilisateur fait défiler la page jusqu'à dépasser la colonne la plus à gauche.

Type:nombre
Par défaut:0
showRowNumber

Si la valeur est "true", affiche le numéro de ligne dans la première colonne du tableau.

Type:booléen
Par défaut : "false"
trier

Indique si et comment trier les colonnes lorsque l'utilisateur clique sur un en-tête de colonne. Si le tri est activé, envisagez également de définir les propriétés sortAscending et sortColumn. Choisissez l'une des valeurs de chaîne suivantes:

  • 'enable' [par défaut] : les utilisateurs peuvent cliquer sur les en-têtes de colonne pour trier les données en fonction de la colonne sur laquelle ils ont cliqué. Lorsque les utilisateurs cliquent sur l'en-tête de colonne, les lignes sont automatiquement triées et un événement "sort" est déclenché.
  • "event" : lorsque l'utilisateur clique sur l'en-tête de colonne, un événement "sort" est déclenché, mais les lignes ne sont pas triées automatiquement. Utilisez cette option lorsque la page implémente son propre tri. Consultez l'exemple TableQueryWrapper pour découvrir comment gérer manuellement le tri des événements.
  • Désactiver : le fait de cliquer sur l'en-tête d'une colonne n'a aucun effet.
Type:chaîne
Par défaut : "enable"
sortAscending

Ordre de tri de la colonne de tri initiale. "True" pour un ordre croissant, "false" pour un ordre décroissant. Ignoré si sortColumn n'est pas spécifié.

Type:booléen
Valeur par défaut : "true"
sortColumn

Index d'une colonne de la table de données, en fonction duquel le tableau est initialement trié. La colonne est marquée d'une petite flèche indiquant l'ordre de tri.

Type:nombre
Valeur par défaut : -1
startPage

Première page du tableau à afficher. Utilisé uniquement si page est en mode activation/événement.

Type:nombre
Par défaut:0
largeur

Définit la largeur de l'élément conteneur de la visualisation. Vous pouvez utiliser des blocs d'annonces HTML standards (par exemple, "100px", "80em", "60"). Si aucune unité n'est spécifiée, le nombre est considéré comme étant des pixels. Si cette valeur n'est pas spécifiée, le navigateur ajuste automatiquement la largeur pour s'adapter à la table, en la réduisant le plus possible au cours du processus. Si la valeur est inférieure à la largeur requise, une barre de défilement horizontale est ajoutée au tableau. Si la valeur est définie sur "100%", le tableau se développe autant que possible dans l'élément conteneur.

Type:chaîne
Par défaut:automatique

Méthodes

Méthode
draw(data, options)

Dessine le tableau.

Return Type (Type renvoyé) : aucun
getSelection()

Implémentation standard de getSelection Les éléments de sélection sont tous des éléments de ligne. Peut renvoyer plusieurs lignes sélectionnées. Les index de ligne de l'objet de sélection font référence à la table de données d'origine, quelle que soit l'interaction de l'utilisateur (trier, pagination, etc.).

Notez que le bouton d'activation/de désactivation de la ou des sélections: cliquer sur une cellule la première fois pour la sélectionner. Lorsque vous cliquez à nouveau sur la cellule, celle-ci est désélectionnée. Un événement de sélection est alors généré, mais aucun élément sélectionné n'est sélectionné dans l'objet de sélection récupéré.

Type renvoyé:tableau d'éléments de sélection
getSortInfo()

Appelez cette méthode pour récupérer des informations sur l'état de tri actuel d'une table qui a été triée (généralement par l'utilisateur, qui a cliqué sur un en-tête de colonne pour trier les lignes selon une colonne spécifique). Si vous avez désactivé le tri, cette méthode ne fonctionnera pas.

Si vous n'avez pas trié de données dans le code ou si l'utilisateur ne les a pas triées en sélectionnant du code, les valeurs de tri par défaut sont renvoyées.

Type renvoyé:objet avec les propriétés suivantes:
  • column : (nombre) index de la colonne en fonction de laquelle le tableau est trié.
  • ascending : (valeur booléenne) : "true" si le tri est croissant et "false" s'il est décroissant.
  • sortedIndexes (tableau numérique) : tableau de nombres, où l'index dans le tableau correspond au numéro de ligne trié (dans la table visible) et la valeur à l'index de cette ligne dans la table de données sous-jacente (non triée).
setSelection(selection)

Implémentation standard de setSelection(), mais vous ne pouvez sélectionner que des lignes entières ou plusieurs lignes. Les index de ligne de l'objet de sélection font référence à la table de données d'origine, quelle que soit l'interaction de l'utilisateur (trier, pagination, etc.).

Return Type (Type renvoyé) : aucun
clearChart()

Efface le graphique et libère toutes les ressources allouées.

Return Type (Type renvoyé) : aucun

Événements

Nom
select

Événement de sélection standard, mais seules des lignes entières peuvent être sélectionnées.

Propriétés:aucune
page

Déclenchement lorsque les utilisateurs cliquent sur un bouton de navigation sur les pages.

Propriétés:page: nombre. Index de la page à laquelle accéder.
trier

Déclenché lorsque les utilisateurs cliquent sur un en-tête de colonne et que l'option de tri n'est pas "Désactiver".

Properties (Propriétés) : objet avec les propriétés ci-dessous.
  • column : (nombre) index de la colonne en fonction de laquelle le tableau est trié.
  • ascending : (valeur booléenne) : "true" si le tri est croissant et "false" s'il est décroissant.
  • sortedIndexes (tableau numérique) : tableau de nombres, où l'index dans le tableau correspond au numéro de ligne trié (dans la table visible) et la valeur à l'index de cette ligne dans la table de données sous-jacente (non triée).
prêt

Le graphique est prêt pour les appels de méthode externes. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir dessiné, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode de dessin, puis ne les appeler qu'après le déclenchement de l'événement.

Propriétés:aucune

Outils de mise en forme

Remarque : La visualisation de table contient un ensemble d'objets de mise en forme qui ont été remplacés par des outils de mise en forme génériques, qui se comportent de la même manière, mais peuvent être utilisés dans n'importe quelle visualisation.

Le tableau suivant présente l'ancien outil de mise en forme des tables et son outil de mise en forme générique équivalent. Vous devez utiliser l'outil de mise en forme générique lorsque vous écrivez du nouveau code.

Outil de mise en forme de table
TableArrowFormat google.visualization.ArrowFormat
TableBarFormat google.visualization.BarFormat
TableColorFormat google.visualization.ColorFormat
TableDateFormat google.visualization.DateFormat
TableNumberFormat google.visualization.NumberFormat
TablePatternFormat google.visualization.PatternFormat

Important:Les outils de mise en forme utilisent souvent le langage HTML pour mettre en forme leur texte. Vous devez donc définir l'option allowHtml sur true.

Règles concernant les données

L'ensemble du code et des données sont traités et affichés dans le navigateur. Aucune donnée n'est envoyée à aucun serveur.