Visualisation: Table

Présentation

Table pouvant être triée et paginée. Vous pouvez mettre en forme des cellules de table à l'aide de chaînes de format 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 à l'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 une table HTML correspondante, chaque ligne/colonne de la table de données étant convertie en ligne/colonne dans la table HTML. Chaque colonne doit posséder 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 propriété Applicable à Description
className Cell Nom de classe de chaîne à attribuer à une cellule individuelle. Utilisez cette option pour attribuer un style CSS à des cellules individuelles.
style Cell Chaîne de style à attribuer intégrée à la cellule. Cela remplacera les styles de classe CSS appliqués à cette cellule. Vous devez définir la propriété allowHtml=true pour que cela fonctionne. 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 de cellules contenant des balises HTML s'afficheront au format HTML. Si la valeur est "false", la plupart des formateurs personnalisés ne fonctionneront pas correctement.

Type : booléen
Par défaut:false
AlternanceRowStyle

Détermine si le style de couleur alternatif doit être attribué aux lignes paires et paires.

Type:booléen
Par défaut : true
cssClassNames

Objet dans lequel chaque nom de propriété décrit un élément de la table et la valeur de la propriété est une chaîne définissant une classe à attribuer à cet élément de la table. Cette propriété vous permet d'attribuer du code CSS personnalisé à des éléments spécifiques de votre table. 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 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é suivants sont acceptés:

  • headerRow : attribue un nom de classe à la ligne d'en-tête de la table (é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 table impaires (éléments <tr>). Remarque : L'option alternatingRowStyle doit être définie sur "true".
  • selectedTableRow : attribue un nom de classe à la ligne de table sélectionnée (élément <tr>).
  • hoverTableRow : attribue un nom de classe à la ligne du tableau pointé (é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 d'un tableau sans en-tête (élément <td>).
  • rowNumberCell : attribue un nom de classe aux cellules de la colonne de 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 : Dans le code CSS, certains éléments 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>, ce dernier prévaut sur le premier. Veillez à spécifier tous les styles CSS pertinents dans cssClassNames pour éviter les conflits.

Type:objet
Par défaut:null
Numéro de première ligne

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
Colonnes figées

Nombre de colonnes à gauche qui seront figées. Ces colonnes resteront en place si vous faites défiler les colonnes restantes horizontalement. Si showRowNumber est défini sur false, la définition de frozenColumns sur 0 apparaît de la même manière que sur null, mais si showRowNumber est défini sur true, la colonne de numéros de ligne est figée.

Type:nombre
Par défaut : null
hauteur

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

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

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

  • "enable" : la table inclura des boutons Suivant et Page précédente. Cliquez sur ces boutons pour effectuer la pagination et modifier la page affichée. Vous pouvez également définir l'option pageSize.
  • "event" : le tableau inclura des boutons pour avancer et reculer la page, mais un clic sur ce bouton déclenchera un événement "page" et ne modifiera pas la page affichée. Utilisez cette option lorsque le code implémente sa propre logique de changement de page. Consultez l'exemple TableQueryWrapper pour savoir comment gérer manuellement les événements de pagination.
  • "disable" : [par défaut] la pagination n'est pas disponible.
  • Type : chaîne
    Default: "désactiver"
Taille de la page

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

Type : nombre
Par défaut:10
Boutons de pagination

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

  • "les deux" : active les boutons "Précédent" et "Suivant"
  • "prev" : seul le bouton "Précédent" est activé.
  • 'next' (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 page 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é de pageSize.
Type : chaîne ou nombre
Par défaut : "auto"
table rtl

Ajout de la compatibilité avec les langues s'écrivant de droite à gauche (comme l'arabe et l'hébreu) en inversant l'ordre des colonnes dans le tableau. La colonne "zéro" correspond à la colonne la plus à droite, et la dernière à 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 en langage bidirectionnel (BiDi) n'est pas disponible dans la visualisation de la table, même avec cette option. Cette option sera ignorée si vous activez la pagination (à l'aide de l'option de page) ou si la barre contient 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
faire défilerStartStartPosition

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é "width". Le tableau s'ouvre et fait défiler autant de pixels que possible après la colonne la plus à gauche.

Type:nombre
Par défaut:0
numéro de série

S'il est défini sur "true", le numéro de ligne est affiché dans la première colonne du tableau.

Type:booléen
Par défaut:false
sort

Indique si et comment trier les colonnes lorsque l'utilisateur clique sur un en-tête de colonne. Si le tri est activé, vous pouvez également 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 les trier 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 les utilisateurs cliquent 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 savoir comment gérer les événements de tri manuellement.
  • "disable" : le fait de cliquer sur un en-tête de colonne n'a aucun effet.
Type:chaîne
Par défaut : "enable"
ordre croissant

Ordre de tri de la colonne de tri initiale. Vrai pour l'ordre croissant, faux pour l'ordre décroissant. Ignoré si sortColumn n'est pas spécifié.

Type : booléen
Par défaut : true
Colonne de tri

Index d'une colonne du tableau de données, en fonction duquel le tableau est initialement trié. Une petite flèche indique l'ordre de tri dans la colonne.

Type : nombre
Par défaut : -1
pagedaccueil

Première page du tableau à afficher. Utilisé uniquement si page est en mode d'activation ou d'é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 unités HTML standards (par exemple, "100 px", "80em" ou "60"). Si aucune unité n'est spécifiée, le nombre est supposé être des pixels. Si cette option n'est pas spécifiée, le navigateur ajuste automatiquement la largeur en fonction du tableau, en réduisant le plus possible le cas échéant. Si la largeur 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 %", la table 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 la table.

Return Type (Type de retour) : 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 dans l'objet de sélection font référence au tableau de données d'origine indépendamment de toute interaction de l'utilisateur (tri, pagination, etc.).

Notez que la sélection s'effectue lorsque vous cliquez sur une cellule pour la sélectionner. La sélection d'une cellule la désélectionne, ce qui entraîne un événement de sélection, mais aucun élément sélectionné dans l'objet de sélection récupéré.

Type de renvoi : tableau des é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 triée (généralement par l'utilisateur, qui a cliqué sur un en-tête de colonne pour trier les lignes en fonction d'une colonne spécifique). Si vous avez désactivé le tri, cette méthode ne fonctionnera pas.

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

Return Type:objet possédant 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, "false" dans le cas contraire.
  • sortedIndexes (tableau numérique) : tableau de nombres, où l'index du tableau est le numéro de ligne tel que trié (dans le tableau visible), et la valeur est l'index de cette ligne dans le tableau de données sous-jacent (non trié).
setSelection(selection)

Implémentation standard de setSelection(), mais ne peut sélectionner que des lignes entières ou plusieurs lignes. Les index de ligne dans l'objet de sélection font référence au tableau de données d'origine indépendamment de toute interaction de l'utilisateur (tri, pagination, etc.).

Return Type (Type de retour) : aucun
clearChart()

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

Return Type (Type de retour) : aucun

Événements

Nom
select

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

Properties (Propriétés) : aucune
page

Déclenchement lorsqu'un utilisateur clique sur un bouton de navigation sur une page.

Propriétés : page : nombre. Index de la page à laquelle vous souhaitez accéder.
sort

Déclenchement lorsqu'un utilisateur clique sur un en-tête de colonne et que l'option de tri n'est pas "disable".

Propriétés : objet possédant 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, "false" dans le cas contraire.
  • sortedIndexes : (tableau numérique) tableau de nombres, où l'index du tableau est le numéro de ligne tel qu'il est trié (dans la table visible) et la valeur est 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 externe. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir tracé, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode de dessin et ne les appeler qu'après le déclenchement de l'événement.

Properties (Propriétés) : aucune

Formateurs

Remarque: La visualisation de la table contient un ensemble d'objets de formatage qui ont été remplacés par des formateurs 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 formateur de table 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 tables
Format de la flèche de la table google.visualization.ArrowFormat
TableBarFormat google.visualization.BarFormat.
Format de couleur de table google.visualization.ColorFormat
Format de la date de la table google.visualization.DateFormat.
TableNumberFormat (Format de table) google.visualization.NumberFormat
Format de table google.visualization.PatternFormat

Important : Les mise en forme utilisent souvent du code HTML pour formater leur texte. Vous devez donc définir l'option allowHtml sur true.

Règles relatives aux données

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