Pular para o conte√ļdo principal

Table

Vis√£o geral#

O componente table tem como objetivo apresentar e também interagir com dados em uma tabela de forma organizada e eficiente.

O uso do componente √© diverso e amplo, apresentando em 2 varia√ß√Ķes: View e Interactive.

Quando usar#

Utilize-o para apresentar dados e conte√ļdos de maneira organizada em linhas e colunas de uma tabela.

Anatomia#

Estruturalmente, a table é composta por um headline e uma ou mais rows, conforme imagem abaixo:

Imagem representando o componente table com o headline e duas rows (desfocadas), divididos em 3 colunas: ID, Nome e Status.
  1. Headline
  2. Row

Varia√ß√Ķes#

Headline - Tipos#

O headline da table possui quatro varia√ß√Ķes de tipos para suas c√©lulas: select, numeral, text e empty. Al√©m disso, h√° possibilidade de habilitar ordena√ß√£o para as colunas de conte√ļdos, conforme imagem abaixo:

Imagem representando o componente table, indicando as possibilidades de elementos para compor a estrutura do headline na respectiva sequência conforme legenda à seguir.
  1. Select
  2. Sortabled
  3. Numeral
  4. Text
  5. Empty

Row (View) - Tipos#

A row na varia√ß√£o do tipo view deve ser utilizada apenas para exibir dados. Nesta varia√ß√£o, cada c√©lula pode assumir um dos 3 seguintes formatos de conte√ļdo: numeral, text e tag, conforme imagem abaixo:

Imagem representando o componente table com o headline (desfocado) e 3 rows, divididos em 3 colunas na respectiva sequência conforme legenda à seguir.
  1. Numeral
  2. Text
  3. Tag

Row (Interactive) - Tipos#

Já rows na variação do tipo interactive devem ser utilizadas quando houver necessidade de interação com os dados exibidos.

Neste caso, além dos formatos disponíveis em view, é possível definir células nos seguintes formatos: select, expand, link e more actions, conforme imagem abaixo:

Imagem representando o componente table com o headline (desfocado) e 3 rows, divididos em 7 colunas na respectiva sequência conforme legenda à seguir.
  1. Select
  2. Expand
  3. Text
  4. Numeral
  5. Link
  6. Tag
  7. More actions

Al√©m das varia√ß√Ķes descritas acima, √© poss√≠vel definir tamb√©m a estiliza√ß√£o da estrutura de rows para exibir linhas no estilo striped (zebrada) ou com line (uma linha divisora na parte inferior de cada row).

Comportamento#

O comportamento do componente table ocorre ao clicar nos elementos interativos, como por exemplo: expandir uma linha; selecionar uma linha espec√≠fica, v√°rias ou todas; acionar um link ou a√ß√Ķes em um registro.

Os elementos são alinhados conforme sua características e finalidade, sendo:

  • Textos √† esquerda;
  • N√ļmeros √† direita;
  • Interativos e tag ao centro.

A primeira coluna da table será sempre fixa visivelmente, além da coluna more action que também recebe este mesmo comportamento, mas apenas quando não houver espaço em tela, em ambos os casos gerando scroll entre as demais colunas para visualização.

Navegação por teclado#

Ao pressionar a tecla tab, a primeira célula do headline recebe foco, avançando para a próxima célula à direita toda vez que esta ação se repetir.

Células com ordenação habilitada podem ser reordenadas ao pressionar a tecla space, inciando pela ordem ascendente (veja mais em controles internos).

Reordenação#

A reordenação dos dados nas colunas ocorrem da seguinte maneira:

  1. O primeiro clique na célula, ordena do menor para o maior valor:
Imagem representando uma tabela com foco em uma c√©lula do headline, com o √≠cone de ordena√ß√£o de seta √ļnica apontando para cima.
  1. O segundo clique na célula, ordena do maior para menor valor:
Imagem representando uma tabela com foco em uma c√©lula do headline, com o √≠cone de ordena√ß√£o de seta √ļnica apontando para baixo.
  1. O terceiro clique na célula, volta ao estado default:
Imagem representando uma tabela com foco em uma célula do headline, com o ícone de ordenação de setas apontando para cima e para baixo.

Controles internos#

Após navegar pelas células do headline, o foco segue por todos os elementos que possuem foco na primeira row, e em seguida avança para a próxima row.

Por exemplo, o foco da tabela na imagem abaixo funcionaria da seguinte maneira:

1¬ļ Select -> 2¬ļ Expand -> 3¬ļ Link -> 4¬ļ More actions

Imagem representando uma tabela com headline e três rows, divididos em sete colunas sendo elas: select, expand, link, text, number, link, tag e more actions. No headline, as células de expand e more actions estão vazias (empty).

Boas pr√°ticas#

Foram estruturados os padr√Ķes de usabilidade para auxiliar na utiliza√ß√£o do componente e garantir uma boa experi√™ncia aos usu√°rios. Por isso, √© muito importante que ao utilizar este componente, as pessoas que o projetarem devem levar em considera√ß√£o os seguintes crit√©rios:

  • Mostrar valores em v√°rias categorias e medidas;
  • Permitir filtragem e ordena√ß√£o quando a compara√ß√£o n√£o for uma prioridade;
  • Minimize a desordem incluindo apenas valores que suportem a finalidade dos dados;
  • Ajustar em vez de truncar o conte√ļdo. Isso ocorre porque, se os t√≠tulos das linhas come√ßarem com a mesma palavra, todos aparecer√£o iguais quando truncados;
  • N√£o deve ser usado para uma lista acion√°vel de itens com links para p√°ginas de detalhes;
  • O ideal para o n√ļmero de colunas √© no m√°ximo de 5 a 6 colunas vis√≠veis;
    • Quando este limite n√£o puder ser respeitado, h√° alternativas, como o gerenciador de colunas e filtros, atendendo a heur√≠stica de controle e flexibilidade dos usu√°rios.

Acessibilidade tratada no componente#

O componente table foi projetado para atender os requisitos das Diretrizes de Acessibilidade para Conte√ļdo Web (WCAG) 2.1.

Algumas diretrizes de acessibilidade j√° s√£o tratadas no componente internamente e n√£o devem ser alteradas por quem utilizar. S√£o elas:

  • A organiza√ß√£o estrutural de uma tela deve ser constru√≠da de forma que sua arquitetura de informa√ß√£o fa√ßa sentido tanto para quem v√™, quanto para quem ouve o conte√ļdo (1.3.1: Info and Relationships (A));
  • Seja qual for o m√©todo de intera√ß√£o, a apresenta√ß√£o das informa√ß√Ķes na tela sempre dever√° ter uma sequ√™ncia l√≥gica (1.3.2: Meaningful Sequence: (A));
  • Usar medidas relativas para possibilitar um zoom at√© 200%, sem perda do conte√ļdo ou funcionalidade (1.4.4: Resize text (A));
  • Permitir a intera√ß√£o via teclado (2.1.1: Keyboard (A));
  • A intera√ß√£o por elementos foc√°veis na tela sempre dever√° ser sequencial e l√≥gica de acordo com o conte√ļdo apresentado (2.4.3: Focus Order (A));
  • Deve ter uma √°rea m√≠nima para o foco de pelo menos o dobro do per√≠metro do elemento sem o foco, ter contraste de pelo menos 4:5:1 entre o estado focado e n√£o focado do componente (2.4.11: Focus Appearance (AAA));
  • Nem sempre uma abrevia√ß√£o ou um acr√īnimo √© compreens√≠vel por todas as pessoas, nesse sentido deve-se fornecer uma forma de identifica√ß√£o de seu significado real (exemplo: link para acessar uma tabela de "de-para") (3.1.4: Abbreviations (AAA));
  • Utilizar nome, fun√ß√£o e valor adequadamente, pois estes par√Ęmetros s√£o utilizados por tecnologias assistivas para identificar os elementos da interface. Ao usar o tipo de input adequado para cada tipo de informa√ß√£o, tornam o formul√°rio mais acess√≠vel. (4.1.2: Name, Role, Value (A)).

Melhor formato para usu√°rios que utilizam leitores de tela:

Em colunas que seja possível a reordenação utilizar o aria-sort.