Visualización: tabla

Descripción general

Una tabla que se puede ordenar y paginar. Las celdas de la tabla pueden tener formato con strings de formato o pueden insertar HTML directamente como valores de celda. Los valores numéricos están alineados a la derecha; los valores booleanos se muestran como marcas de verificación. Los usuarios pueden seleccionar una sola fila con el teclado o el mouse. Los usuarios pueden ordenar las filas haciendo clic en los encabezados de las columnas. La fila del encabezado permanece fija a medida que el usuario se desplaza. La tabla activa una serie de eventos correspondientes a la interacción del usuario.

Ejemplo

<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>

Cargando

El nombre del paquete google.charts.load es "table".

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

El nombre de clase de la visualización es google.visualization.Table.

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

Formato de los datos

La tabla de datos se convierte en una tabla HTML correspondiente, y cada fila o columna de la tabla de datos se convierte en una fila o columna en la tabla HTML. Cada columna debe ser del mismo tipo de datos y se admiten todos los tipos de datos de visualización estándar (string, booleano, número, etcétera).

Propiedades personalizadas

Puedes asignar las siguientes propiedades personalizadas a los elementos de la tabla de datos con el método setProperty() de DataTable.

Nombre de propiedad Se aplica a Descripción
className Cell Un nombre de clase de string para asignar a una celda individual. Úsalo para asignar estilos CSS a celdas individuales.
style Cell Una string de estilo para asignar a la celda. Esto anulará los estilos de clase CSS que se aplicaron a esa celda. Para que esto funcione, debes configurar la propiedad allowHtml=true. Ejemplo: 'border: 1px solid green;'.

Ejemplo

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

Opciones de configuración

Nombre
PermitirHtml

Si se establece como verdadero, los valores de formato de las celdas que incluyan etiquetas HTML se procesarán como HTML. Si la estableces como falsa, la mayoría de los formateadores personalizados no funcionarán correctamente.

Tipo: booleano
Valor predeterminado: falso
AlternarFilaEstilo

Determina si el estilo de color alternativo se asignará a filas impares y pares.

Tipo: booleano
Predeterminado: verdadero
Nombresdeclases

Un objeto en el que cada nombre de propiedad describe un elemento de tabla, y el valor de propiedad es una string que define una clase que se asignará a ese elemento de tabla. Usa esta propiedad para asignar CSS personalizados a elementos específicos de tu tabla. Para usar esta propiedad, asigna un objeto, en el que el nombre de la propiedad especifica el elemento de la tabla y el valor de la propiedad es una string, y especifica un nombre de clase para asignar a ese elemento. Luego, debes definir un estilo CSS para esa clase en tu página. Se admiten los siguientes nombres de propiedad:

  • headerRow: Asigna un nombre de clase a la fila del encabezado de la tabla (elemento <tr>).
  • tableRow: Asigna un nombre de clase a las filas sin encabezado (elementos <tr>).
  • oddTableRow: Asigna un nombre de clase a las filas impares de la tabla (elementos <tr>). Nota: La opción alternatingRowStyle debe establecerse en verdadero.
  • selectedTableRow: Asigna un nombre de clase a la fila de la tabla seleccionada (elemento <tr>).
  • hoverTableRow: Asigna un nombre de clase a la fila de la tabla emergente (elemento <tr>).
  • headerCell: Asigna un nombre de clase a todas las celdas de la fila del encabezado (elemento <td>).
  • tableCell: Asigna un nombre de clase a todas las celdas de tablas sin encabezado (elemento <td>).
  • rowNumberCell: Asigna un nombre de clase a las celdas de la columna del número de fila (elemento <td>). Nota: La opción showRowNumber debe configurarse como verdadera.

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

Nota: En CSS, algunos elementos anulan a otros. Por ejemplo, si especificas un color de fondo para un elemento <tr> y un elemento <td>, este último tiene prioridad sobre el primero. Asegúrate de especificar todos los estilos de CSS relevantes en cssClassNames para evitar conflictos.

Type:
Valor predeterminado: null
número de primera fila

Número de fila de la primera fila de la tabla de datos Solo se usa si showRowNumber es verdadero.

Tipo: número
Predeterminado: 1
columnas inmovilizadas

La cantidad de columnas de la izquierda que se inmovilizarán. Estas columnas permanecerán en su lugar cuando se desplacen las columnas restantes de forma horizontal. Si showRowNumber es false, establecer frozenColumns en 0 aparecerá igual que si se configurara en null, pero si showRowNumber se configura en true, la columna del número de fila se inmovilizará.

Tipo: número
Valor predeterminado: null
alto

Establece la altura del elemento contenedor de la visualización. Puedes usar unidades HTML estándar (por ejemplo, “100px”, “80em”, “60”). Si no se especifican unidades, se supone que el número es de píxeles. Si no se especifica, el navegador ajustará la altura de forma automática para que se ajuste a la tabla y se reduzca lo más posible en el proceso. Si se establece un valor inferior a la altura requerida, la tabla agregará una barra de desplazamiento vertical (la fila de encabezado también estará inmovilizada). Si se configura en “100%”, la tabla se expandirá tanto como sea posible al elemento del contenedor.

Tipo: string
Predeterminado: automático
página

Si y cómo habilitar la paginación a través de los datos Elige uno de los siguientes valores de string:

  • “Habilitar”: La tabla incluirá los botones para avanzar y retroceder de la página. Si haces clic en estos botones, se realizará la operación de paginación y se cambiará la página que se muestra. Es posible que también desees establecer la opción pageSize.
  • “evento”: La tabla incluirá botones para avanzar y retroceder de la página, pero, si haces clic en ellos, se activará un evento de “página” y no se cambiará la página que se muestra. Esta opción se debe usar cuando el código implementa su propia lógica de cambio de página. Consulta el ejemplo de TableQueryWrapper para ver un ejemplo sobre cómo controlar los eventos de paginación de forma manual.
  • 'disable': [Predeterminado] No se admite Paging.
  • Tipo: string
    Configuración predeterminada: “disable”
Tamaño de la página

La cantidad de filas en cada página, cuando la paginación está habilitada con la opción de página.

Tipo: número
Valor predeterminado: 10
Botones de paginación

Establece una opción especificada para los botones de paginación. Las opciones son las siguientes:

  • "ambos": habilitar los botones Anterior y Siguiente
  • "prev": Solo está habilitado el botón ant.
  • "Siguiente": Solo se habilita el siguiente botón.
  • "auto": los botones se habilitan según la página actual. En la primera página, solo se muestra a continuación. En la última página, solo se muestra la página anterior. De lo contrario, se habilitan ambos.
  • number: la cantidad de botones de paginación que se mostrarán. Este número explícito anulará el número calculado de pageSize.
Tipo: string o número
Configuración predeterminada: "auto"
Tabla rtl

Se agregó compatibilidad básica con los idiomas de derecha a izquierda (como el árabe o el hebreo) mediante la reversión del orden de las columnas de la tabla, de modo que la columna cero sea la columna de la derecha y la última sea la de la izquierda. Esto no afecta el índice de columna en los datos subyacentes, solo el orden en el que se muestran. La visualización bidireccional de idiomas (BiDi) no es compatible con la visualización de tablas, incluso con esta opción. Esta opción se ignorará si habilitas la paginación (con la opción de página) o si la tabla tiene barras de desplazamiento porque especificaste opciones de altura y ancho inferiores al tamaño de tabla requerido.

Tipo: booleano
Valor predeterminado: falso
ScrollLeftStartPosition.

Establece la posición de desplazamiento horizontal, en píxeles, si la tabla tiene barras de desplazamiento horizontal porque configuraste la propiedad de ancho. Se abrirá la tabla desplazada, muchos píxeles más allá de la columna del extremo izquierdo.

Tipo: número
Valor predeterminado: 0
número de fila

Si se configura como verdadera, se muestra el número de fila como la primera columna de la tabla.

Tipo: booleano
Valor predeterminado: falso
sort

Si y cómo ordenar las columnas cuando el usuario hace clic en el encabezado de una columna. Si está habilitado el ordenamiento, puedes configurar también las propiedades sortAscending y sortColumn. Elige uno de los siguientes valores de string:

  • “Habilitar”: [Predeterminado] Los usuarios pueden hacer clic en los encabezados de las columnas para ordenarlos según la columna en la que hicieron clic. Cuando los usuarios hacen clic en el encabezado de la columna, las filas se ordenan automáticamente y se activa un evento de "orden".
  • “evento”: Cuando los usuarios hacen clic en el encabezado de la columna, se activa un evento de “ordenamiento”, pero las filas no se ordenan automáticamente. Esta opción se debe usar cuando la página implementa su propia clasificación. Consulta el ejemplo de TableQueryWrapper para ver cómo controlar los eventos de orden de forma manual.
  • "disable": Hacer clic en el encabezado de una columna no tiene ningún efecto.
Tipo: string
Configuración predeterminada: “Habilitar”
orden ascendente

El orden en el que se ordena la columna de orden inicial. Verdadero para ascendente y falso para descendente. Se ignora si no se especifica sortColumn.

Tipo: booleano
Predeterminado: verdadero
columnadeorden

Un índice de una columna en la tabla de datos, según el cual se ordena inicialmente la tabla. La columna se marcará con una flecha pequeña que indica el orden de clasificación.

Tipo: número
Predeterminado: -1
página de inicio

La primera página de la tabla que se mostrará Solo se usa si page está en modo de habilitación/evento.

Tipo: número
Valor predeterminado: 0
ancho

Establece el ancho del elemento contenedor de la visualización. Puedes usar unidades HTML estándar (por ejemplo, “100px”, “80em”, “60”). Si no se especifican unidades, se supone que el número es de píxeles. Si no se especifica, el navegador ajustará el ancho de forma automática para que se ajuste a la tabla, lo que se reducirá en la mayor medida posible en el proceso. Si se establece más pequeño que el ancho requerido, la tabla agregará una barra de desplazamiento horizontal. Si se configura en “100%”, la tabla se expandirá tanto como sea posible al elemento del contenedor.

Tipo: string
Predeterminado: automático

Métodos

Método
draw(data, options)

Dibuja la tabla.

Tipo de datos que se muestra: ninguno
getSelection()

Implementación estándar de getSelection. Los elementos de selección son todos elementos de fila. Puede mostrar más de una fila seleccionada. Los índices de fila en el objeto de selección hacen referencia a la tabla de datos original, sin importar la interacción del usuario (ordenamiento, paginación, etcétera).

Ten en cuenta que las opciones se muestran cuando se hace clic en una celda la primera vez que se selecciona. Cuando haces clic en la celda nuevamente, se anula la selección, lo que da como resultado un evento de selección, pero no los elementos seleccionados en el objeto de selección recuperado.

Tipo de datos que se muestra: arreglo de elementos de selección
getSortInfo()

Llama a este método para recuperar información sobre el estado actual de una tabla que se ordenó (por lo general, el usuario que hizo clic en el encabezado de una columna a fin de ordenar las filas por una columna específica). Si inhabilitaste el ordenamiento, no funcionará este método.

Si no ordenaste los datos en el código, o el usuario no ordenó los datos al seleccionar el código, se mostrarán los valores de ordenamiento predeterminados.

Tipo de resultado: un objeto con las siguientes propiedades:
  • column: (número) Índice de la columna según la cual se ordena la tabla.
  • ascending: (booleano) verdadero si el orden es ascendente; falso si es descendente.
  • sortedIndexes: Es el arreglo de números en el que el índice del arreglo es el número de filas según el orden (en la tabla visible) y el valor es el índice de esa fila en la tabla de datos subyacente (sin ordenar).
setSelection(selection)

Implementación estándar setSelection(), pero solo puede seleccionar filas completas o varias filas. Los índices de fila en el objeto de selección hacen referencia a la tabla de datos original, sin importar la interacción del usuario (ordenamiento, paginación, etcétera).

Tipo de datos que se muestra: ninguno
clearChart()

Borra el gráfico y libera todos los recursos asignados.

Tipo de datos que se muestra: ninguno

Eventos

Nombre
select

Evento de selección estándar, pero solo se pueden seleccionar filas completas.

Propiedades: Ninguna
página

Se activa cuando los usuarios hacen clic en el botón de navegación de una página.

Propiedades: page: Número. El índice de la página a la que se navegará.
sort

Se activa cuando los usuarios hacen clic en el encabezado de una columna, y la opción de orden no es “inhabilitar”.

Propiedades: Un objeto con las siguientes propiedades:
  • column: (número) Índice de la columna según la cual se ordena la tabla.
  • ascending: (booleano) verdadero si el orden es ascendente; falso si es descendente.
  • sortedIndexes: Es el arreglo de números. El índice del arreglo es el número de filas ordenado (en la tabla visible) y el valor es el índice de esa fila en la tabla de datos subyacente (sin ordenar).
lista

El gráfico está listo para las llamadas a métodos externos. Si deseas interactuar con el gráfico y llamar a los métodos después de dibujarlo, debes configurar un objeto de escucha para este evento antes de llamar al método de dibujo y llamarlo solo después de que se active el evento.

Propiedades: Ninguna

Formateadores

Nota: La visualización de la tabla tiene un conjunto de objetos formateador que se reemplazó por formateadores genéricos, que se comportan de la misma manera, pero se pueden usar en cualquier visualización.

En la siguiente tabla, se muestra el formateador de tablas heredado y su formateador genérico equivalente. Debes usar el formateador genérico cuando escribes código nuevo.

Formateador de mesas
Formato de tabla de la fila google.visualization.ArrowFormat
Formato de barra de tabla google.visualization.BarFormat.
Formato de color de la tabla google.visualization.ColorFormat
Formato de fecha de tabla google.visualization.DateFormat.
Formato de número de tabla google.visualization.NumberFormat
Formato de patrón de tabla google.visualization.PatternFormat

Importante: A menudo, los formateadores usan HTML para dar formato al texto. Por lo tanto, debes configurar la opción allowHtml como true.

Política de Datos

El código y los datos se procesan y procesan en el navegador. No se envían datos a ningún servidor.