Descripción general
Es una tabla que se puede ordenar y dividir en secciones. Se puede dar formato a las celdas de la tabla con cadenas de formato o con la inserción directa de HTML 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 filas individuales 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 que corresponden 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 datos
DataTable se convierte en la tabla HTML correspondiente, y cada fila/columna de DataTable se convierte en una fila/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 mediante el método setProperty() de DataTable.
| Nombre de propiedad | Se aplica a | Descripción |
|---|---|---|
| className | Cell | Es un nombre de clase de cadena para asignar a una celda individual. Úsalo para asignar estilo CSS a celdas individuales. |
| estilo | Cell | Una cadena de estilo para asignar de forma intercalada en la celda. Esto anulará los estilos de clase CSS aplicados a esa celda. Para que esto funcione, debes establecer 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 | |
|---|---|
| allowHtml |
Si se establece como verdadera, los valores con formato de las celdas que incluyan etiquetas HTML se renderizarán como HTML. Si la estableces como falsa, la mayoría de los formateadores personalizados no funcionarán correctamente. Tipo: booleano
Predeterminado: falso
|
| alternatingRowStyle |
Determina si el estilo de color alternativo se asignará a las filas impares y pares. Tipo: booleano
Predeterminado: verdadero
|
| cssClassNames |
Un objeto en el que cada nombre de propiedad describe un elemento de tabla y el valor de la propiedad es una string que define una clase para 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 especifique el elemento de la tabla y el valor de la propiedad sea una string que especifique un nombre de clase para asignar a ese elemento. Luego, debes definir un estilo de CSS para esa clase en tu página. Se admiten los siguientes nombres de propiedades:
Ejemplo:
Nota: En CSS, algunos elementos anulan a otros. Por ejemplo, si especificas un color de fondo para un elemento Tipo: objeto
Valor predeterminado: nulo
|
| firstRowNumber |
El número de fila de la primera fila en la tabla de datos. Solo se usa si showRowNumber es verdadero. Tipo: Número
Configuración predeterminada: 1
|
| frozenColumns |
La cantidad de columnas de la izquierda que se inmovilizarán. Estas columnas permanecerán en su lugar cuando te desplaces por las otras columnas de forma horizontal. Si Tipo: Número
Valor predeterminado: nulo
|
| height |
Establece la altura del elemento contenedor de la visualización. Puedes usar unidades HTML estándar (por ejemplo, "100 px", "80em", "60"). Si no se especifica ninguna unidad, se supone que la cantidad es de píxeles. Si no se especifica, el navegador ajustará la altura automáticamente para adaptarse a la tabla y se reducirá tanto como sea posible durante el proceso. Si se configura un valor inferior a la altura requerida, la tabla agregará una barra de desplazamiento vertical (la fila del encabezado también se inmovilizará). Si se establece en “100%”, la tabla se expandirá lo más posible dentro del elemento de contenedor. Tipo: string
Predeterminada: automática
|
| página |
Si deseas habilitar la paginación a través de los datos, y cómo hacerlo. Elige uno de los siguientes valores de cadena:
Tipo: string
Configuración predeterminada: “disable”
|
| pageSize |
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
|
| pagingButtons |
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"
|
| rtlTable |
Agrega compatibilidad básica para los idiomas que se escriben de derecha a izquierda (como el árabe o el hebreo) revirtiendo el orden de las columnas de la tabla, de modo que la columna cero sea la que se encuentre más a la derecha y la última sea la columna de la izquierda. Esto no afecta al índice de columna en los datos subyacentes, solo al orden de visualización. La visualización de tablas no admite la visualización de idioma completo bidireccional (BiDi), 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 menores que el tamaño requerido de la tabla. Tipo: booleano
Predeterminado: falso
|
| scrollLeftStartPosition |
Establece la posición de desplazamiento horizontal, en píxeles, si la tabla tiene barras de desplazamiento horizontales porque estableciste la propiedad de ancho. La tabla se abrirá desplazando tantos píxeles más allá de la columna del extremo izquierdo. Tipo: Número
Valor predeterminado: 0
|
| showRowNumber |
Si se configura como verdadera, muestra el número de fila como la primera columna de la tabla. Tipo: booleano
Predeterminado: falso
|
| ordenar |
Cómo ordenar las columnas cuando el usuario hace clic en un encabezado Si el ordenamiento está habilitado, considera también configurar las propiedades sortAscending y sortColumn. Elige uno de los siguientes valores de cadena:
Tipo: string
Configuración predeterminada: "habilitar"
|
| sortAscending |
El orden en que se ordena la columna inicial. Verdadero para ascendente, falso para descendente. Se ignora si no se especifica Tipo: booleano
Predeterminado: verdadero
|
| sortColumn |
Índice de una columna en la tabla de datos, por la cual se ordena inicialmente la tabla. La columna se marcará con una flecha pequeña que indicará el orden de clasificación. Tipo: Número
Valor predeterminado: -1
|
| startPage |
Es la primera página de la tabla que se mostrará. Solo se usa si Tipo: Número
Valor predeterminado: 0
|
| width |
Establece el ancho del elemento de contenedor de la visualización. Puedes usar unidades HTML estándar (por ejemplo, "100 px", "80em", "60"). Si no se especifica ninguna unidad, se supone que la cantidad es de píxeles. Si no se especifica, el navegador ajustará automáticamente el ancho para que se ajuste a la tabla, lo que se reducirá tanto como sea posible durante el proceso. Si se configura un ancho inferior al requerido, la tabla agregará una barra de desplazamiento horizontal. Si se configura en “100%”, la tabla se expandirá lo más posible en el elemento del contenedor. Tipo: string
Predeterminada: automática
|
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 la 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, independientemente de la interacción del usuario (ordenamiento, paginación, etc.). Ten en cuenta que el botón de activación de selección: cuando haces clic en una celda la primera vez, se selecciona. Si haces clic en la celda nuevamente, se anula la selección, lo que genera un evento de selección, pero no se seleccionan elementos en el objeto de selección recuperado. Tipo de datos que se muestra: Es el array de elementos de selección.
|
getSortInfo() |
Llama a este método para obtener información sobre el estado de orden actual de una tabla que se ordenó (generalmente por el usuario, que hizo clic en el encabezado de una columna para ordenar las filas por una columna específica). Si inhabilitaste el ordenamiento, este método no funcionará. Si no ordenaste datos en el código o el usuario no clasificó los datos mediante la selección de código, se mostrarán los valores de orden predeterminados. Tipo de datos que se muestra: Un objeto con las siguientes propiedades:
|
setSelection(selection) |
Es una implementación estándar de Tipo de datos que se muestra: ninguno
|
clearChart() |
Borra el gráfico y libera todos sus recursos asignados. Tipo de datos que se muestra: ninguno
|
Eventos
| Nombre | |
|---|---|
| select |
Selección de evento estándar, pero solo se pueden seleccionar filas completas. Propiedades: Ninguna
|
| página |
Se activa cuando los usuarios hacen clic en un botón de navegación de página. Propiedades:
page: Número. El índice de la página a la que se navegará. |
| ordenar |
Se activa cuando los usuarios hacen clic en el encabezado de una columna y la opción de ordenamiento no está “inhabilitar”. Properties: Un objeto con las siguientes propiedades:
|
| lista |
El gráfico está listo para llamadas de método externas. 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 llamarlos solo después de que se haya activado el evento. Propiedades: Ninguna
|
Formateadores
Nota: La visualización de la tabla tiene un conjunto de objetos formateadores que se sustituyeron 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 escribas código nuevo.
| Formateador de tablas | |
|---|---|
| TableArrowFormat | google.visualization.ArrowFormat |
| TableBarFormat | google.visualization.BarFormat |
| TableColorFormat | google.visualization.ColorFormat |
| TableDateFormat | google.visualization.DateFormat |
| TableNumberFormat | google.visualization.NumberFormat |
| TablePatternFormat | google.visualization.PatternFormat |
Importante: Los formateadores suelen usar HTML para dar formato al texto. Por lo tanto, debes establecer la opción allowHtml en true.
Política de Datos
Todo el código y los datos se procesan y renderizan en el navegador. No se envían datos a ningún servidor.