Pular para o conteúdo principal

Table

A Table serve para distribuir informações em linhas e colunas, facilitando a visualização e compreensão dos dados.

O tipo de informação pode variar dependendo do contexto, mas ele deve ser usado para dados textuais, números e alguns componentes de controle.

Para mostrar listas de informações mais complexas e interações elaboradas, deve ser usado o componente List.

Cabeçalho​

Toda tabela deve ter um cabeçalho que dá nome à cada uma das colunas. Em geral, esses títulos funcionam como mecanismo de ordenação da tabela de forma ascendente, decrescente ou sem nenhuma ordenação.

O mecanismo de ordenação da tabela funciona através do clique nos títulos de cada coluna, alternando entre ordenação original > ordem crescente > ordem decrescente.

Linhas​

Os itens da tabela devem ter, no mínimo, duas colunas. Caso contrário, deve ser feito o uso de listas. Itens da tabela são separados por uma linha e podem utilizar o estilo "zebrado" para facilitar a leitura dos dados.

O rodapé pode ter informações adicionais, como o total de itens existentes na consulta, paginação, botão de recarregar ou alguma observação a respeito das informações exibidas.

Use o componente Pagination para montar o rodapé conforme sua necessidade.

Boas práticas​

  • Para exibir valores numéricos, o alinhamento dos valores deve estar à direita da coluna
  • Textos ou dados muito longos podem ser abreviados, desde que a abreviação seja conhecida pelo público e não comprometa o entendimento da informação
  • Os rótulos do cabeçalho devem ser curtos, mas descritivos o suficiente para entender as informações. Mantenha um ou dois termos no máximo
  • A coluna principal deve ser nomeada de acordo com a entidade. Por exemplo: Lead, Canais de Conversão, Fluxos de Automação, entre outros.
  • Empty state de uma célula: Use hífen (-) para marcar uma célula vazia e sem informações. Quando o valor existir, porém é zerado, usar o numeral 0 (zero). É possível usar os dois estados em uma mesma tabela

Feedback​