Visão geral
Uma tabela que pode ser classificada e paginada. As células da tabela podem ser formatadas usando strings de formatação ou inserindo diretamente HTML como valores de célula. Os valores numéricos ficam alinhados à direita. Os valores booleanos são exibidos como marcas de seleção. Os usuários podem selecionar linhas únicas com o teclado ou 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 da visualização é google.visualization.Table.
var visualization = new google.visualization.Table(container);
Formato de dados
O DataTable é convertido em uma tabela HTML correspondente, com cada linha/coluna no DataTable convertida em uma linha/coluna na tabela HTML. Todas as colunas precisam ser do mesmo tipo de dados, e todos os tipos de dados de visualização padrão são compatíveis (string, booleano, número etc.).
Propriedades personalizadas
É possível atribuir as seguintes propriedades personalizadas aos elementos da tabela de dados usando o método
setProperty()
de 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 para atribuir um estilo CSS a células individuais. |
| estilo | Célula | Uma string de estilo a ser atribuída in-line à célula. Isso modificará os estilos de classe CSS aplicados a essa célula. Você precisa 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 definido como verdadeiro, os valores formatados das células que incluem tags HTML serão renderizados como HTML. Se definido como falso, a maioria dos formatadores personalizados não funcionará corretamente. Tipo: booleano
Padrão:false
|
| alternatingRowStyle |
Determina se o estilo de cores alternadas será atribuído às linhas pares e ímpares. Tipo: booleano
Padrão:true
|
| cssClassNames |
Um objeto em que cada nome de propriedade descreve um elemento da tabela, e o valor da propriedade é uma string, definindo uma classe para atribuir a esse elemento da 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 para atribuir a esse elemento. Depois, defina um estilo CSS para essa classe na sua página. Os seguintes nomes de propriedades são aceitos:
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
|
| firstRowNumber |
O número da primeira linha na tabela de dados. Usado somente se showRowNumber for verdadeiro. Tipo: número
Padrão: 1
|
| frozenColumns |
O número de colunas da esquerda que serão congeladas. Essas colunas permanecerão no lugar
ao rolar as outras horizontalmente. Se Tipo: número
Padrão:nulo
|
| height |
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 como pixels. Se não for especificada, o navegador ajustará a altura automaticamente para caber na tabela, diminuindo o máximo possível no processo. Se definida como menor que a altura necessária, a tabela adicionará uma barra de rolagem vertical (a linha do cabeçalho também ficará congelada). Se definida como "100%", a tabela vai se expandir o máximo possível no elemento do contêiner. Tipo: string
Padrão:automático
|
| página |
Se e como ativar a paginação pelos dados. Escolha um dos seguintes valores de string:
Tipo: string
Padrão: "disable"
|
| 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 suporte básico a idiomas da direita para a esquerda (como árabe ou hebraico) invertendo a ordem das colunas da tabela, de modo que o zero da coluna seja a coluna mais à direita e a última coluna seja a coluna mais à esquerda. Isso não afeta o índice de colunas nos dados subjacentes, apenas a ordem de exibição. A exibição de idioma bidirecional (BiDi) completa não é compatível com a visualização de 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 você especificou opções de altura e largura menores do que o tamanho necessário. Tipo: booleano
Padrão:false
|
| 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 será aberta rolando por muitos pixels além da coluna mais à esquerda. Tipo: número
Padrão:0
|
| showRowNumber |
Se definido como verdadeiro, mostra o número da linha como a primeira coluna da tabela. Tipo: booleano
Padrão:false
|
| sort |
Se e como classificar colunas quando o usuário clicar no cabeçalho de uma coluna. Se a classificação estiver ativada, considere configurar também as propriedades "sortAscending" e "sortColumn". Escolha um dos seguintes valores de string:
Tipo: string
Padrão: "enable"
|
| sortAscending |
A ordem em que a coluna de classificação inicial é classificada. Verdadeiro para crescente, falso para decrescente. Será ignorado se Tipo: booleano
Padrão:true
|
| sortColumn |
Um índice de uma coluna na tabela de dados, pela 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
|
| startPage |
A primeira página da tabela a ser exibida. Usado somente se Tipo: número
Padrão:0
|
| width |
Define a largura 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 como pixels. Se não for especificada, o navegador ajustará a largura automaticamente à tabela, diminuindo o máximo possível no processo. Se definida como menor que a largura necessária, a tabela adicionará uma barra de rolagem horizontal. Se definida como "100%", a tabela vai se expandir o máximo possível no elemento do contêiner. Tipo: string
Padrão:automático
|
Métodos
| Método | |
|---|---|
draw(data, options) |
Desenha a tabela. Return Type: nenhum
|
getSelection() |
Implementação padrão de getSelection. Os elementos de seleção são elementos 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.). O botão de alternância da seleção: clicar em uma célula na primeira vez a seleciona; clicar na célula novamente desmarca 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 de classificação atual 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 funcionará. Se você não classificou dados no código ou o usuário não classificou dados selecionando o código, os valores de classificação padrão serão retornados. Tipo de retorno: um objeto com as seguintes propriedades:
|
setSelection(selection) |
Implementação
padrão de Return Type: nenhum
|
clearChart() |
Limpa o gráfico e libera todos os recursos alocados. Return Type: nenhum
|
Eventos
| Nome | |
|---|---|
| select |
Evento de seleção padrão, mas somente 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 a ser acessada. |
| 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étodos externos. 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 disparado. Propriedades:nenhuma.
|
Formatadores
Observação : a visualização da tabela tem um conjunto de objetos formatadores que foram substituídos por formatadores genéricos (link em inglês), 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 correspondente. Use o formatador genérico ao escrever um novo código.
| Formatador de tabela | |
|---|---|
| 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:os formatadores geralmente 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.