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:
Ejemplo:
Nota: En CSS, algunos elementos anulan a otros. Por ejemplo, si especificas un color de fondo para un elemento 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 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:
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:
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:
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 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 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:
|
setSelection(selection) |
Implementación estándar 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:
|
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.