Table Cell

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.

Subcomponente de Composição

O br-table-cell representa uma célula de dados. Use-o dentro de <br-table-row>, que deve estar no corpo (<br-table-body>) da tabela (<br-table>). Coloque no conteúdo da célula o dado ou conteúdo correspondente à coluna:

<br-table>
  <br-table-body slot="body">
    <br-table-row>
      <br-table-cell>Nome da pessoa</br-table-cell>
      <br-table-cell>Órgão</br-table-cell>
    </br-table-row>
  </br-table-body>
</br-table>

Use uma célula para cada valor da linha e não a instancie fora dessa composição.

A API getMeasuredHeight() retorna uma Promise<number> com a altura, em pixels, da superfície visual renderizada da célula. Antes de a superfície existir, o resultado é zero.

Visão Geral

Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.

Representa uma célula de dados, com suporte a alinhamento, overflow, tooltip e agrupamento automático de ações excedentes.

Propriedades

actionDensity

Atributo	action-density
Descrição	Densidade visual aplicada ao trigger de ações agrupadas.
Tipo	"large" | "medium" | "small"
Valor padrão	---

cellActionsLimit

Atributo	cell-actions-limit
Descrição	Limite local de ações exibidas diretamente.
Tipo	number
Valor padrão	---

horizontalAlignment

Atributo	horizontal-alignment
Descrição	Alinhamento horizontal específico da célula. Quando omitido, herda da linha, coluna ou tabela, nessa ordem.
Tipo	"center" | "end" | "start"
Valor padrão	---

moreActionsLabel

Atributo	more-actions-label
Descrição	Texto completo do tooltip do botão de ações agrupadas desta célula. A propriedade moreActionsLabel de br-table prevalece quando informada. Valores vazios ou compostos apenas por espaços usam "Mais ações". Não altera o nome acessível do botão nem os rótulos das ações. Aceita texto simples por atributo ou propriedade, sem reflexão.
Tipo	string
Valor padrão	'Mais ações'

overflow

Atributo	overflow
Descrição	Estratégia de overflow específica da célula. Quando omitida, herda da linha, coluna ou tabela, nessa ordem.
Tipo	"truncate" | "wrap"
Valor padrão	---

sortValue

Atributo	sort-value
Descrição	Valor utilizado pela ordenação da coluna. Quando omitido, a tabela usa o texto renderizado da célula.
Tipo	number | string
Valor padrão	---

tooltipMode

Atributo	tooltip-mode
Descrição	Modo de exibição do tooltip da célula. Quando omitido, herda da linha, coluna ou tabela, nessa ordem. No modo enabled, exibe o conteúdo somente quando estiver truncado na largura disponível.
Tipo	"disabled" | "enabled" | "inherit"
Valor padrão	---

tooltipState

Atributo	tooltip-state
Descrição	Estado visual do tooltip da célula. Quando omitido, herda da linha, coluna ou tabela, nessa ordem.
Tipo	"danger" | "info" | "success" | "warning"
Valor padrão	---

verticalAlignment

Atributo	vertical-alignment
Descrição	Alinhamento vertical específico da célula. Quando omitido, herda da linha, coluna ou tabela, nessa ordem.
Tipo	"center" | "end" | "start"
Valor padrão	---

Métodos

getMeasuredHeight

Descrição	Retorna a altura renderizada da superfície visual desta célula, em pixels.
Assinatura	getMeasuredHeight() => Promise<number>
Parâmetros	---

Slots

Nome	Descrição
"default"	Conteúdo ou ações da célula.

Eventos

Evento	Descrição	Depreciação	Propagação
brAlignmentChange	Emitido quando um alinhamento específico da célula muda.	---	true
brOverflowChange	Emitido quando a estratégia de overflow da célula muda.	---	true

CSS Shadow Parts

Nome	Descrição
"cell"	Superfície visual da célula.
"content"	Contêiner responsável pelo alinhamento.

Dependências

Componente pai

• br-table

Usado por

• br-table

Depende de

• br-dropdown
• br-button
• br-icon
• br-list
• br-item
• br-tooltip

Gráfico