DSNiemeyer
Idioma
PTEN

Data Table

Tabela ordenável, pesquisável e paginada construída sobre o primitivo `Table` — com seleção de linhas, visibilidade de colunas e variante de header fixo.

Mínimo

Apenas linhas, colunas e paginação. Sem toolbar.

Edifício Aurora #100Ana SouzaAtivoR$ 2.5002026-01-15
Torre Estrela #101Bruno PereiraPendenteR$ 2.8502026-02-15
Bloco Sol #102Carla OliveiraInativoR$ 3.2002026-03-15
Residencial Mar #103Diego SantosAtivoR$ 3.5502026-04-15
Condomínio Atlântico #104Eduarda LimaPendenteR$ 3.9002026-05-15
Linhas por página
<DataTableRoot items={rows} columns={columns} defaultPageSize={5}>
  <DataTableContent />
  <DataTablePagination />
</DataTableRoot>

Com toolbar

Busca, visibilidade de colunas, headers ordenáveis e rodapé de paginação.

Alto da Serra #113Nícolas BarrosPendenteR$ 3.9002026-02-15
Alto da Serra #128Nícolas BarrosPendenteR$ 2.8502026-05-15
Bloco Sol #102Carla OliveiraInativoR$ 3.2002026-03-15
Bloco Sol #117Carla OliveiraInativoR$ 5.3002026-06-15
Cidade Nova #112Mariana MendesAtivoR$ 3.5502026-01-15
Cidade Nova #127Mariana MendesAtivoR$ 2.5002026-04-15
Condomínio Atlântico #104Eduarda LimaPendenteR$ 3.9002026-05-15
Condomínio Atlântico #119Eduarda LimaPendenteR$ 2.8502026-02-15
Edifício Aurora #100Ana SouzaAtivoR$ 2.5002026-01-15
Edifício Aurora #115Ana SouzaAtivoR$ 4.6002026-04-15
Linhas por página
<DataTableRoot items={rows} columns={columns}>
  <DataTableToolbar>
    <DataTableSearch />
    <DataTableViewOptions />
  </DataTableToolbar>
  <DataTableContent />
  <DataTablePagination />
</DataTableRoot>

Header fixo + seleção

Altura máxima limitada para que o header fique fixo durante o scroll vertical. Cada linha tem um checkbox de seleção; o rodapé mostra a contagem atual.

Edifício Aurora #100Ana SouzaAtivoR$ 2.5002026-01-15
Torre Estrela #101Bruno PereiraPendenteR$ 2.8502026-02-15
Bloco Sol #102Carla OliveiraInativoR$ 3.2002026-03-15
Residencial Mar #103Diego SantosAtivoR$ 3.5502026-04-15
Condomínio Atlântico #104Eduarda LimaPendenteR$ 3.9002026-05-15
Vila Jardim #105Felipe CostaInativoR$ 4.2502026-06-15
Mirante Ipê #106Gabriela AlvesAtivoR$ 4.6002026-01-15
Mont Blanc #107Henrique DiasPendenteR$ 4.9502026-02-15
Parque das Flores #108Isabela RochaInativoR$ 5.3002026-03-15
Villa Bela #109João AlmeidaAtivoR$ 2.5002026-04-15
Recanto Verde #110Karine RibeiroPendenteR$ 2.8502026-05-15
Solar dos Pinhais #111Lucas CarvalhoInativoR$ 3.2002026-06-15
Cidade Nova #112Mariana MendesAtivoR$ 3.5502026-01-15
Alto da Serra #113Nícolas BarrosPendenteR$ 3.9002026-02-15
Lagoa Azul #114Olivia CastroInativoR$ 4.2502026-03-15
Edifício Aurora #115Ana SouzaAtivoR$ 4.6002026-04-15
Torre Estrela #116Bruno PereiraPendenteR$ 4.9502026-05-15
Bloco Sol #117Carla OliveiraInativoR$ 5.3002026-06-15
Residencial Mar #118Diego SantosAtivoR$ 2.5002026-01-15
Condomínio Atlântico #119Eduarda LimaPendenteR$ 2.8502026-02-15
0 de 30 linha(s) selecionada(s)
Linhas por página
<DataTableRoot items={rows} columns={columns} enableSelection>
  <DataTableToolbar>
    <DataTableSearch />
    <DataTableViewOptions />
  </DataTableToolbar>
  <DataTableContent stickyHeader maxHeight="24rem" />
  <DataTablePagination />
</DataTableRoot>

Seleção de uma única linha

Use `selectionStrategy="single"` quando no máximo uma linha pode estar selecionada — o checkbox do cabeçalho aparece desabilitado e clicar em uma linha substitui a seleção anterior.

Edifício Aurora #100Ana SouzaAtivoR$ 2.5002026-01-15
Torre Estrela #101Bruno PereiraPendenteR$ 2.8502026-02-15
Bloco Sol #102Carla OliveiraInativoR$ 3.2002026-03-15
Residencial Mar #103Diego SantosAtivoR$ 3.5502026-04-15
Condomínio Atlântico #104Eduarda LimaPendenteR$ 3.9002026-05-15
0 de 8 linha(s) selecionada(s)
Linhas por página
<DataTableRoot
  items={rows}
  columns={columns}
  enableSelection
  selectionStrategy="single"
>
  <DataTableContent />
  <DataTablePagination />
</DataTableRoot>

Selecionar tudo entre páginas

Use `selectionStrategy="all"` para que o checkbox do cabeçalho alterne todas as linhas filtradas, e não só a página visível. Internamente alterna uma flag virtual mais um conjunto de exclusões, então funciona da mesma forma com paginação no backend.

Edifício Aurora #100Ana SouzaAtivoR$ 2.5002026-01-15
Torre Estrela #101Bruno PereiraPendenteR$ 2.8502026-02-15
Bloco Sol #102Carla OliveiraInativoR$ 3.2002026-03-15
Residencial Mar #103Diego SantosAtivoR$ 3.5502026-04-15
Condomínio Atlântico #104Eduarda LimaPendenteR$ 3.9002026-05-15
Vila Jardim #105Felipe CostaInativoR$ 4.2502026-06-15
Mirante Ipê #106Gabriela AlvesAtivoR$ 4.6002026-01-15
Mont Blanc #107Henrique DiasPendenteR$ 4.9502026-02-15
Parque das Flores #108Isabela RochaInativoR$ 5.3002026-03-15
Villa Bela #109João AlmeidaAtivoR$ 2.5002026-04-15
0 de 30 linha(s) selecionada(s)
Linhas por página
<DataTableRoot
  items={rows}
  columns={columns}
  enableSelection
  selectionStrategy="all"
  onSelectAllChange={({ allSelected, excludedIds }) => {
    // Gmail-style: act on the whole filtered set minus exclusions.
  }}
>
  <DataTableToolbar>
    <DataTableSearch />
    <DataTableViewOptions />
  </DataTableToolbar>
  <DataTableContent />
  <DataTablePagination />
</DataTableRoot>

Construído sobre o primitivo `Table` do design system — veja também: shadcn/ui — Data Table