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

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	---

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