Table
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.
Exemplos
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
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: Baixa densidade (componente maior, mais espaçamento e altura).- medium: Densidade intermediária, padrão recomendado para a maioria dos casos.- large: Alta densidade (componente menor, menos espaçamento e altura).> Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam density. |
| 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
| Atributo | has-column-divider |
| Descrição | Ativa divisores verticais entre colunas. |
| Tipo | boolean |
| Valor padrão | false |
hasRowDivider
| Atributo | has-row-divider |
| 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 | --- |
overflow
| Atributo | overflow |
| Descrição | Define o comportamento de overflow para as células. |
| Tipo | "truncate" | "wrap" |
| Valor padrão | 'wrap' |
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. |