Visão geral
Uma tabela que pode ser classificada e paginada. As células da tabela podem ser formatadas usando strings ou inserindo diretamente o HTML como valores de célula. Os valores numéricos são alinhados à direita. Os valores booleanos são exibidos como marcas de seleção. Os usuários podem selecionar linhas únicas com o teclado ou com o mouse. Os usuários podem classificar as linhas clicando nos cabeçalhos das colunas. A linha do cabeçalho permanece fixa conforme o usuário rola a tela. A tabela dispara vários eventos correspondentes à interação do usuário.
Exemplo
<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>
Carregando
O nome do pacote google.charts.load
é "table"
.
google.charts.load('current', {packages: ['table']});
O nome da classe do layout é google.visualization.Table
.
var visualization = new google.visualization.Table(container);
Formato de dados
A DataTable é convertida em uma tabela HTML correspondente, e cada linha/coluna da DataTable é convertida em uma linha/coluna na tabela HTML. Cada coluna precisa ser do mesmo tipo, e todos os tipos de dados de visualização padrão são compatíveis (string, booleano, número etc.).
Propriedades personalizadas
Você pode atribuir as seguintes propriedades personalizadas a elementos da tabela de dados usando o método setProperty()
da DataTable.
Nome da propriedade | É aplicável a | Descrição |
---|---|---|
className | Célula | Um nome de classe de string a ser atribuído a uma célula individual. Use essa opção para atribuir um estilo CSS a células individuais. |
style | Célula | Uma string de estilo para atribuir in-line à célula. Isso substituirá os estilos de classe CSS aplicados a essa célula. É necessário definir a propriedade allowHTML=true para que isso funcione. Exemplo: 'border: 1px solid green;' . |
Exemplo
dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});
Opções de configuração
Nome | |
---|---|
allowHTML |
Se definida como verdadeira, os valores formatados de células que incluem tags HTML serão renderizados como HTML. Se for definido como falso, a maioria dos formatadores personalizados não funcionará corretamente. Tipo: booleano
Padrão:falso
|
Mudar o estilo da linha |
Determina se o estilo de cores alternado será atribuído a linhas pares e ímpares. Tipo: booleano
Padrão: verdadeiro
|
cssClassName |
Um objeto em que cada nome de propriedade descreve um elemento de tabela, e o valor da propriedade é uma string que define uma classe a ser atribuída a esse elemento de tabela. Use essa propriedade para atribuir um CSS personalizado a elementos específicos da sua tabela. Para usar essa propriedade, atribua um objeto em que o nome da propriedade especifica o elemento da tabela e o valor da propriedade é uma string, especificando um nome de classe a ser atribuído a esse elemento. Em seguida, defina um estilo CSS para essa classe na sua página. Os seguintes nomes de propriedade são compatíveis:
Exemplo:
Observação: no CSS, alguns elementos substituem outros. Por exemplo, se você especificar uma
cor de plano de fundo para um elemento Tipo: objeto
Padrão:nulo
|
Número da primeira linha |
O número da primeira linha da tabela de dados. Usado somente se showRowNumber for verdadeiro. Tipo: número
Padrão: 1
|
Colunas congeladas |
O número de colunas da esquerda que vão ser congeladas. Essas colunas permanecerão em vigor ao rolar as demais colunas horizontalmente. Se Tipo:número
Padrão: nulo
|
altura |
Define a altura do elemento de contêiner da visualização. Você pode usar unidades HTML padrão (por exemplo, "100px", "80em", "60"). Se nenhuma unidade for especificada, o número será considerado pixels. Se não for especificado, o navegador ajustará automaticamente a altura para caber na tabela, diminuindo o máximo possível no processo. Se for definida abaixo da altura necessária, a tabela adicionará uma barra de rolagem vertical (a linha do cabeçalho também estará congelada). Se definida como "100%", a tabela será expandida o máximo possível para o elemento do contêiner. Tipo: string
Padrão: automático
|
página |
Se e como ativar a paginação com base nos dados. Escolha um dos seguintes valores de string:
Tipo: string
Padrão: "desativar"
|
pageSize |
O número de linhas em cada página, quando a paginação está ativada com a opção de página. Tipo: número
Padrão: 10
|
PagingButtons |
Define uma opção especificada para os botões de paginação. As opções são as seguintes:
Tipo: string ou número
Padrão: "auto"
|
rtlTable |
Adiciona compatibilidade básica para idiomas da direita para a esquerda (como árabe ou hebraico) invertendo a ordem das colunas da tabela, de modo que a coluna zero seja a mais à direita e a última coluna seja a mais à esquerda. Isso não afeta o índice da coluna nos dados subjacentes, apenas a ordem de exibição. A visualização de tabela completa (BiDi) não é compatível com a visualização em tabela, mesmo com essa opção. Essa opção será ignorada se você ativar a paginação (usando a opção de página) ou se a tabela tiver barras de rolagem porque as opções de altura e largura especificadas são menores do que o tamanho de tabela necessário. Tipo: booleano
Padrão: falso
|
scrollLeftStartPosition |
Define a posição de rolagem horizontal, em pixels, se a tabela tiver barras de rolagem horizontais, porque você definiu a propriedade de largura. A tabela vai rolar a rolagem da tela até o limite da coluna mais à esquerda. Tipo:número
Padrão: 0
|
Número da linha de exibição |
Se definido como verdadeiro, mostrará o número da linha como a primeira coluna da tabela. Tipo: booleano
Padrão: falso
|
sort |
Se e como classificar colunas quando o usuário clicar no título de uma coluna. Se a classificação estiver ativada, defina também as propriedades sortAscending e sortColumn. Escolha um dos seguintes valores de string:
Tipo: string
Padrão: "enable"
|
ordem crescente |
É a ordem em que a coluna de classificação inicial é classificada. Verdadeiro para crescente e falso para decrescente. Será ignorado se Tipo: booleano
Padrão: verdadeiro
|
Classificar coluna |
Um índice de uma coluna na tabela de dados, pelo qual a tabela é inicialmente classificada. A coluna será marcada com uma pequena seta indicando a ordem de classificação. Tipo:número
Padrão: -1
|
Página inicial |
A primeira página da tabela a ser exibida. Usado somente se Tipo:número
Padrão:0
|
largura |
Define a largura do elemento do contêiner da visualização. Você pode usar unidades HTML padrão (por exemplo, "100px", "80em", "60"). Se nenhuma unidade for especificada, o número será considerado pixels. Se não for especificado, o navegador vai ajustar a largura automaticamente para caber na tabela, diminuindo o máximo possível no processo. Se for definida abaixo da largura necessária, a tabela vai adicionar uma barra de rolagem horizontal. Se definida como "100%", a tabela será expandida o máximo possível para o elemento do contêiner. Tipo: string
Padrão: automático
|
Métodos
Método | |
---|---|
draw(data, options) |
Desenha a tabela. Tipo de retorno:nenhum
|
getSelection() |
Implementação padrão getSelection. Todos os elementos de seleção são de linha. Pode retornar mais de uma linha selecionada. Os índices de linha no objeto de seleção se referem à tabela de dados original, independentemente de qualquer interação do usuário (classificação, paginação etc.). A(s) alternância(ões) de seleção: clicar em uma célula pela primeira vez a seleciona; clicar na célula novamente cancela a seleção, resultando em um evento de seleção, mas nenhum item selecionado no objeto de seleção recuperado. Tipo de retorno: matriz de elementos de seleção
|
getSortInfo() |
Chame esse método para recuperar informações sobre o estado atual de classificação de uma tabela que foi classificada (normalmente pelo usuário, que clicou no cabeçalho de uma coluna para classificar as linhas por uma coluna específica). Se você desativou a classificação, esse método não vai funcionar. Se você não tiver classificado os dados no código ou se o usuário não tiver selecionado dados selecionando o código, os valores de classificação padrão serão retornados. Tipo de retorno:um objeto com estas propriedades:
|
setSelection(selection) |
Implementação
padrão de Tipo de retorno:nenhum
|
clearChart() |
Limpa o gráfico e libera todos os recursos alocados. Tipo de retorno: nenhum
|
Eventos
Nome | |
---|---|
select |
Evento de seleção padrão, mas apenas linhas inteiras podem ser selecionadas. Propriedades: nenhuma
|
página |
Acionado quando os usuários clicam em um botão de navegação na página. Propriedades:
page : número. O índice da página para a qual navegar. |
sort |
Acionado quando os usuários clicam no cabeçalho de uma coluna, e a opção de classificação não é "Desativar". Propriedades: um objeto com as seguintes propriedades:
|
pronto |
O gráfico está pronto para chamadas de método externo. Se você quiser interagir com o gráfico e chamar métodos depois de desenhá-lo, configure um listener para esse evento antes de chamar o método de desenho e chame-o somente depois que o evento for acionado. Propriedades: nenhuma
|
Formatadores
Observação: a visualização em tabela tem um conjunto de objetos formatadores que foram substituídos por formatadores genéricos, que se comportam da mesma maneira, mas podem ser usados em qualquer visualização.
A tabela a seguir mostra o formatador de tabela legado e o formatador genérico equivalente. Use o formatador genérico ao escrever um novo código.
Formatador de tabela | |
---|---|
Formato de seta da tabela | google.visualization.ArrowFormat |
Formato de barra de tabela | google.visualization.BarFormat (em inglês) |
FormatodeCordaTabela | google.visualization.ColorFormat |
Formato de data da tabela | google.visualization.DateFormat (link em inglês) |
Formato de número de tabela | google.visualization.NumberFormat |
Formato da Tabela | google.visualization.PatternFormat |
Importante:com frequência, os formatadores usam HTML para formatar o texto. Portanto, defina a opção allowHtml
como true
.
Política de dados
Todos os códigos e dados são processados e renderizados no navegador. Nenhum dado é enviado para nenhum servidor.