Table

Componente estável e recomendada para novos projetos.

Anatomia, uso, comportamento visual e recomendações conceituais são mantidos pelo Padrão Digital de Governo. Esta página documenta a implementação Web Components e sua API executável.

Visão Geral

Design System

Tabela baseada em CSS Grid com controle via tokens.

A tabela é composta de vários subcomponentes, incluindo:

• br-table-header: Define o cabeçalho da tabela, agrupando as linhas de cabeçalho.
• br-table-row: Representa uma linha da tabela, podendo conter células de conteúdo ou células de cabeçalho.
• br-table-header-cell: Representa uma célula de cabeçalho, permitindo a definição de propriedades como largura e alinhamento que podem ser herdadas pelas células de conteúdo associadas.
• br-table-cell: Representa uma célula de conteúdo da tabela, onde os dados são inseridos.
• br-table-body: Agrupa as linhas de conteúdo da tabela, representadas pelo subcomponente br-table-row.

Exemplo(s)

Desktop (100%)

Tablet - 768px

iPhone (iOS) - 390x844

Android - 360x800

Compartilhar URL

Mudar fundo

Abrir no StackBlitz

Tela cheia

HTML

Controles

JS

CSS

Console

Angular (Somente leitura)

React (Somente leitura)

Vue (Somente leitura)

Acessibilidade

Recolher controles e código

Formatar código

Resetar código para o estado inicial

Copiar para a área de transferência

Estado loading

Desktop (100%)

Tablet - 768px

iPhone (iOS) - 390x844

Android - 360x800

Compartilhar URL

Mudar fundo

Abrir no StackBlitz

Tela cheia

HTML

Controles

JS

CSS

Console

Angular (Somente leitura)

React (Somente leitura)

Vue (Somente leitura)

Acessibilidade

Expandir controles e código

Propriedades

columnDivider

Atributo	column-divider
Descrição	Ativa divisores verticais. Quando informada, tem precedência sobre hasColumnDivider.
Tipo	boolean
Valor padrão	---

columnWidth

Atributo	column-width
Descrição	Largura global aplicada a todas as colunas.
Tipo	"content" | "fill" | `${number}fr` | `${number}px`
Valor padrão	---

density

Atributo	density
Descrição	Define a densidade visual do componente. - small: Alta densidade (componente menor, mais compacto e com menos espaçamento). - medium: Densidade intermediária, padrão recomendado para a maioria dos casos. - large: Baixa densidade (componente maior, mais espaçamento e altura).
Tipo	"large" | "medium" | "small"
Valor padrão	---

dividerStyle

Atributo	divider-style
Descrição	Define o estilo visual dos divisores.
Tipo	"dashed" | "solid"
Valor padrão	---

hasColumnDivider Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Atributo	has-column-divider
Depreciação	Use columnDivider.
Descrição	Ativa divisores verticais entre colunas.
Tipo	boolean
Valor padrão	false

hasRowDivider Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Atributo	has-row-divider
Depreciação	Use rowDivider.
Descrição	Ativa divisores horizontais entre linhas.
Tipo	boolean
Valor padrão	false

horizontalAlignment

Atributo	horizontal-alignment
Descrição	Define o alinhamento horizontal do conteúdo das células.
Tipo	"center" | "end" | "start"
Valor padrão	---

loading

Atributo	loading
Descrição	Indica que as linhas estão sendo atualizadas pelo consumidor. O componente mantém o conteúdo anterior, aplica aria-busy="true" e exibe o slot loading sobre os dados; transporte, erro e substituição das linhas ficam sob responsabilidade da aplicação. A prop pode ser alterada diretamente ou pelos métodos startLoading() e stopLoading().
Tipo	boolean
Valor padrão	false

overflow

Atributo	overflow
Descrição	Define o comportamento de overflow para as células.
Tipo	"truncate" | "wrap"
Valor padrão	'wrap'

rowDivider

Atributo	row-divider
Descrição	Ativa divisores horizontais. Quando informada, tem precedência sobre hasRowDivider.
Tipo	boolean
Valor padrão	---

tooltipMode

Atributo	tooltip-mode
Descrição	Define o modo de resolução do tooltip nas células da tabela.
Tipo	"disabled" | "enabled" | "inherit"
Valor padrão	---

tooltipState

Atributo	tooltip-state
Descrição	Define o estado semântico do tooltip nas células da tabela.
Tipo	"danger" | "info" | "success" | "warning"
Valor padrão	'info'

verticalAlignment

Atributo	vertical-alignment
Descrição	Define o alinhamento vertical do conteúdo das células.
Tipo	"center" | "end" | "start"
Valor padrão	---

Dados remotos

Defina loading enquanto a aplicação atualiza as linhas. O componente mantém o conteúdo anterior com opacidade reduzida, aplica aria-busy="true" e exibe o indicador customizado no slot loading, centralizado sobre os dados. Também é possível usar startLoading() e stopLoading(). A busca, o tratamento de erro e a substituição dos slots header/body permanecem sob responsabilidade da aplicação.

Slots

Nome	Descrição
"loading"	Indicador exibido enquanto as linhas são atualizadas.

CSS Shadow Parts

Nome	Descrição
"container"	Wrapper principal da tabela.
"content"	Área de conteúdo que contém header e body.
"loading"	Área do indicador de carregamento.

Dependências

Subcomponentes

• br-table-body
• br-table-cell
• br-table-header
• br-table-header-cell
• br-table-row

Depende de

• br-loading

Gráfico

Documentações relacionadas

Consulte o guia geral de dados remotos para atualizar linhas com loading, preservar o conteúdo anterior e tratar erros fora do componente.

Também são relacionados:

• Pagination, para navegar pelas páginas da consulta;
• Select, quando filtros da tabela usam opções remotas;
• Acessibilidade, para comunicar estados ocupados e manter a leitura da tabela.

Virtualização

Como as linhas são fornecidas via slot, a virtualização deve ser controlada pela aplicação. Renderize apenas a janela visível, preserve chaves estáveis e atualize os índices ARIA conforme a posição da linha na coleção completa. Para conjuntos extensos, prefira combinar a tabela com paginação ou com a virtualização nativa do framework utilizado pelo consumidor.

Para reduzir layout e pintura de seções longas ao redor da tabela, consulte o guia de content-visibility. Essa técnica não substitui paginação ou virtualização das linhas.