Table Header 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-header-cell identifica uma coluna e pode habilitar sua ordenação. Use uma célula para cada coluna, dentro de um <br-table-row> no cabeçalho (<br-table-header>) de <br-table>. Defina o texto que identifica a coluna no conteúdo da célula e adicione sortable quando ela puder ser ordenada:

<br-table>
  <br-table-header slot="header">
    <br-table-row>
      <br-table-header-cell sortable>Nome</br-table-header-cell>
      <br-table-header-cell>Órgão</br-table-header-cell>
    </br-table-row>
  </br-table-header>
</br-table>

Não use br-table-header-cell fora dessa composição de cabeçalho.

Visão Geral

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

Define o conteúdo e as propriedades herdáveis de uma coluna da tabela. Também exibe tooltip quando o conteúdo truncado requer informação adicional.

Propriedades

columnWidth

Atributo	column-width
Descrição	Largura semântica ou CSS aplicada à coluna. Quando omitida, herda da tabela.
Tipo	"content" | "fill" | `${number}fr` | `${number}px`
Valor padrão	---

horizontalAlignment

Atributo	horizontal-alignment
Descrição	Alinhamento horizontal herdado pelas células da coluna. Quando omitido, o cabeçalho herda da linha ou tabela, nessa ordem.
Tipo	"center" | "end" | "start"
Valor padrão	---

overflow

Atributo	overflow
Descrição	Estratégia de overflow herdada pelas células da coluna. Quando omitida, o cabeçalho herda da linha ou tabela, nessa ordem.
Tipo	"truncate" | "wrap"
Valor padrão	---

sortDirection

Atributo	sort-direction
Descrição	Estado atual de ordenação controlado por br-table.
Tipo	"asc" | "desc"
Valor padrão	---

sortable

Atributo	sortable
Descrição	Habilita a ordenação desta coluna.
Tipo	boolean
Valor padrão	false

tooltipMode

Atributo	tooltip-mode
Descrição	Modo de exibição herdado pelos tooltips da coluna. Quando omitido ou definido como inherit, o cabeçalho herda da linha ou tabela, nessa ordem.
Tipo	"disabled" | "enabled" | "inherit"
Valor padrão	---

tooltipState

Atributo	tooltip-state
Descrição	Estado visual herdado pelos tooltips da coluna. Quando omitido, o cabeçalho herda da linha ou tabela, nessa ordem.
Tipo	"danger" | "info" | "success" | "warning"
Valor padrão	---

verticalAlignment

Atributo	vertical-alignment
Descrição	Alinhamento vertical herdado pelas células da coluna. Quando omitido, o cabeçalho herda da linha ou tabela, nessa ordem.
Tipo	"center" | "end" | "start"
Valor padrão	---

Slots

Nome	Descrição
"default"	Conteúdo do cabeçalho da coluna.

Eventos

Evento	Descrição	Depreciação	Propagação
brAlignmentChange	Emitido quando um alinhamento da coluna muda.	---	true
brColumnWidthChange	Emitido quando a largura declarada para a coluna muda.	---	true
brOverflowChange	Emitido quando a estratégia de overflow 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-icon
• br-tooltip

Gráfico