Table

Organiza dados relacionais para leitura e comparação por coluna, com semântica HTML nativa e comportamento controlado pela aplicação. Organizes relational data for reading and comparison by column, with native HTML semantics and application-controlled behavior.

Quando usarWhen to use

Use Table quandoUse Table when

Os dados têm colunas estáveis, rótulos claros e precisam ser comparados entre linhas. Data has stable columns, clear labels, and needs to be compared across rows.

Não use Table quandoDo not use Table when

O conteúdo é uma lista simples, uma grade de layout ou uma planilha editável com navegação de grid. Content is a simple list, a layout grid, or an editable spreadsheet requiring grid navigation.

ExemploExample

Clientes
	Status	E-mail	Ações
Selecionar Ana Silva Ana Silva	Ativo	ana.silva@tis.com.br
Selecionar Bruno Lima Bruno Lima	Pendente	bruno.lima@tis.com.br

<div class="ds-table-region" role="region" aria-label="Tabela de clientes" tabindex="0">
  <table class="ds-table ds-table--md">
    <caption class="ds-table__caption">Clientes</caption>
    <thead class="ds-table__header">
      <tr>
        <th class="ds-table__header-cell" scope="col">Cliente</th>
      </tr>
    </thead>
    <tbody class="ds-table__body">
      <tr class="ds-table__row">
        <td class="ds-table__cell">Ana Silva</td>
      </tr>
    </tbody>
  </table>
</div>

API públicaPublic API

Component / part	ContratoContract
`Table`	`ds-table`; `ds-table--md`, `ds-table--fixed`, `ds-table--nowrap`.
`Table/Header Row`	`thead.ds-table__header`.
`Table/Header Cell`	`th.ds-table__header-cell`; sortable e alinhamento end são modifiers.
`Table/Row`	`tr.ds-table__row`; states Default, Hover e Selected.
`Table/Cell`	`td.ds-table__cell`; conteúdo, controles, alinhamento e truncate são composição.

Tamanhos e estadosSizes and states

Size	Row height	Modifier
Small	40	PadrãoDefault
Medium	48	`ds-table--md`

Row state	ContratoContract
Default	`ds-table__row`
Hover	`:hover`; `ds-table__row--hover` apenas para demonstração estática.
Selected	`ds-table__row--selected` ou `data-selected="true"`; Checkbox comunica a seleção sem transformar a table em grid.

Semântica e comportamentoSemantics and behavior

Use table, caption, thead, tbody, th scope, tr e td nativos. Não use role="grid" para leitura tabular.Use native table, caption, thead, tbody, th scope, tr, and td. Do not use a grid role for reading tables.
aria-sort pertence somente ao th ordenável; o button atualiza os dados e o atributo.aria-sort belongs only on the sortable th; the button updates data and the attribute.
Sort, seleção, filtros e paginação são controlados pela aplicação. Controles compostos permanecem stops normais na ordem de Tab.Sorting, selection, filters, and pagination are application-controlled. Composed controls remain normal stops in the Tab order.
O wrapper rolável precisa de nome acessível e foco visível quando entra na ordem de Tab.The scroll wrapper needs an accessible name and visible focus when included in the Tab order.

Mapeamento de tokensToken mapping

PartePart	Component tokens	CSS
Table / Header / Row	`component.table.{container\|header\|row}.*`	`--ds-table-container-`, `--ds-table-header-`, `--ds-table-row-*`
Cell	`component.table.cell.{padding-x\|padding-y\|gap}`	`--ds-table-cell-*`
Body / Caption	`component.table.{body\|caption}.*`	`--ds-table-body-`, `--ds-table-caption-`
Divider / Sort	`component.table.{divider\|sort}.*`	`--ds-table-divider-`, `--ds-table-sort-`
Focus Ring	`component.focus-ring.*`	`--ds-focus-ring-*`

Accessibility

WCAG	ImplementaçãoImplementation	Status
1.3.1 Info and Relationships	`table`, `caption`, `thead`, `tbody`, `th scope="col"`, `tr` e `td` nativos.	✓
2.1.1 Keyboard	A região de overflow, sort, Checkbox e ações são operáveis por teclado.The overflow region, sort, Checkbox, and actions are keyboard operable.	✓
2.4.11 Focus Not Obscured	Sort e região usam Focus Ring dedicado sem recorte pelas cells.Sort and region use a dedicated Focus Ring without cell clipping.	✓
4.1.2 Name, Role, Value	`aria-sort` fica no header ativo; Checkbox e Buttons têm nomes acessíveis.	✓