Pular para o conteúdo principal

Table​

Componente Table

📘 Modo de Uso​

O Table organiza dados em linhas e colunas, permitindo a exibição clara de informações estruturadas.
Cada célula pode conter textos, ícones ou outros elementos de dados.

Por ser um componente complexo, é importante observar atentamente as instruções de uso descritas abaixo.

📑 Uso das Células​

  • Sempre altere as propriedades nos níveis mais externos primeiro.
    • Alterações externas se propagam para níveis internos, mas o contrário não acontece.
    • Se ocorrer conflito de configuração, desative e reative a propriedade interna e depois a externa para resetar os valores.
  • Em variação mobile, não deve haver linha de header, pois essas informações já são incorporadas em cada linha.
  • Essa transformação responsiva é a mais indicada para tabelas com grande volume de dados.

📑 Uso do Template​

Para compreender a árvore estrutural completa, consulte a seção de Estrutura Hierárquica.
Para usar o template padrão, basta criar uma instância do componente.

Informações Gerais​

  • O componente possui duas variações:
    • Mobile: breakpoints base e sm.
    • Desktop: breakpoints médios em diante.
  • Largura mínima da versão desktop: 600px.
    • Para tabelas com menos de 5 colunas, pode-se usar desktop em breakpoints base e sm com rolagem horizontal.
  • Largura mínima de célula: 120px.
    • Para tabelas extensas, utilize rolagem horizontal para garantir visibilidade.
  • Todas as células devem ter tooltip (componente Tooltip) para exibir a informação completa ao toque/clique.

Remoção de Colunas​

  • Não há colunas isoladas, apenas células organizadas em linhas.
  • Para remover uma coluna, oculte manualmente cada célula correspondente usando hide/show no Figma.

Remoção de Linhas​

  • O processo é simples: basta ocultar a linha (table/row) desejada.

Criação de Tabelas Personalizadas​

  • Para montar tabelas específicas, use o template como referência e ajuste adicionando/removendo células.
  • Na versão mobile, as colunas se “fundem” nas linhas, mas o princípio de construção é o mesmo.

🧩 Anatomia​

Anatomia do componente Table

📋 Propriedades​

Propriedades do componente Table

⌨️ Código​

opl.dataDisplay.component.table

🎨 Variantes​

Opções​

Variações de opções do componente Table