DSNiemeyer
Language
PTEN

Data Table

Sortable, searchable, paginated table built on top of the `Table` primitive — with row selection, column visibility, and a sticky header variant.

Minimal

Just rows, columns, and pagination. No toolbar.

Edifício Aurora #100Ana SouzaActiveR$ 2.5002026-01-15
Torre Estrela #101Bruno PereiraPendingR$ 2.8502026-02-15
Bloco Sol #102Carla OliveiraInactiveR$ 3.2002026-03-15
Residencial Mar #103Diego SantosActiveR$ 3.5502026-04-15
Condomínio Atlântico #104Eduarda LimaPendingR$ 3.9002026-05-15
Rows per page
<DataTableRoot items={rows} columns={columns} defaultPageSize={5}>
  <DataTableContent />
  <DataTablePagination />
</DataTableRoot>

With toolbar

Search, column visibility, sortable headers, and the pagination footer.

Alto da Serra #113Nícolas BarrosPendingR$ 3.9002026-02-15
Alto da Serra #128Nícolas BarrosPendingR$ 2.8502026-05-15
Bloco Sol #102Carla OliveiraInactiveR$ 3.2002026-03-15
Bloco Sol #117Carla OliveiraInactiveR$ 5.3002026-06-15
Cidade Nova #112Mariana MendesActiveR$ 3.5502026-01-15
Cidade Nova #127Mariana MendesActiveR$ 2.5002026-04-15
Condomínio Atlântico #104Eduarda LimaPendingR$ 3.9002026-05-15
Condomínio Atlântico #119Eduarda LimaPendingR$ 2.8502026-02-15
Edifício Aurora #100Ana SouzaActiveR$ 2.5002026-01-15
Edifício Aurora #115Ana SouzaActiveR$ 4.6002026-04-15
Rows per page
<DataTableRoot items={rows} columns={columns}>
  <DataTableToolbar>
    <DataTableSearch />
    <DataTableViewOptions />
  </DataTableToolbar>
  <DataTableContent />
  <DataTablePagination />
</DataTableRoot>

Sticky header + selection

Bounded `maxHeight` so the header pins on vertical scroll. Each row has a selection checkbox; the footer shows the running count.

Edifício Aurora #100Ana SouzaActiveR$ 2.5002026-01-15
Torre Estrela #101Bruno PereiraPendingR$ 2.8502026-02-15
Bloco Sol #102Carla OliveiraInactiveR$ 3.2002026-03-15
Residencial Mar #103Diego SantosActiveR$ 3.5502026-04-15
Condomínio Atlântico #104Eduarda LimaPendingR$ 3.9002026-05-15
Vila Jardim #105Felipe CostaInactiveR$ 4.2502026-06-15
Mirante Ipê #106Gabriela AlvesActiveR$ 4.6002026-01-15
Mont Blanc #107Henrique DiasPendingR$ 4.9502026-02-15
Parque das Flores #108Isabela RochaInactiveR$ 5.3002026-03-15
Villa Bela #109João AlmeidaActiveR$ 2.5002026-04-15
Recanto Verde #110Karine RibeiroPendingR$ 2.8502026-05-15
Solar dos Pinhais #111Lucas CarvalhoInactiveR$ 3.2002026-06-15
Cidade Nova #112Mariana MendesActiveR$ 3.5502026-01-15
Alto da Serra #113Nícolas BarrosPendingR$ 3.9002026-02-15
Lagoa Azul #114Olivia CastroInactiveR$ 4.2502026-03-15
Edifício Aurora #115Ana SouzaActiveR$ 4.6002026-04-15
Torre Estrela #116Bruno PereiraPendingR$ 4.9502026-05-15
Bloco Sol #117Carla OliveiraInactiveR$ 5.3002026-06-15
Residencial Mar #118Diego SantosActiveR$ 2.5002026-01-15
Condomínio Atlântico #119Eduarda LimaPendingR$ 2.8502026-02-15
0 of 30 row(s) selected
Rows per page
<DataTableRoot items={rows} columns={columns} enableSelection>
  <DataTableToolbar>
    <DataTableSearch />
    <DataTableViewOptions />
  </DataTableToolbar>
  <DataTableContent stickyHeader maxHeight="24rem" />
  <DataTablePagination />
</DataTableRoot>

Single-row selection

Use `selectionStrategy="single"` when at most one row should be selectable — the header checkbox renders disabled and clicking a row replaces the prior selection.

Edifício Aurora #100Ana SouzaActiveR$ 2.5002026-01-15
Torre Estrela #101Bruno PereiraPendingR$ 2.8502026-02-15
Bloco Sol #102Carla OliveiraInactiveR$ 3.2002026-03-15
Residencial Mar #103Diego SantosActiveR$ 3.5502026-04-15
Condomínio Atlântico #104Eduarda LimaPendingR$ 3.9002026-05-15
0 of 8 row(s) selected
Rows per page
<DataTableRoot
  items={rows}
  columns={columns}
  enableSelection
  selectionStrategy="single"
>
  <DataTableContent />
  <DataTablePagination />
</DataTableRoot>

Select all across pages

Use `selectionStrategy="all"` so the header checkbox toggles every filtered row, not just the visible page. Internally it flips a virtual flag plus an exclusion set, so it works the same way against backend-paginated data.

Edifício Aurora #100Ana SouzaActiveR$ 2.5002026-01-15
Torre Estrela #101Bruno PereiraPendingR$ 2.8502026-02-15
Bloco Sol #102Carla OliveiraInactiveR$ 3.2002026-03-15
Residencial Mar #103Diego SantosActiveR$ 3.5502026-04-15
Condomínio Atlântico #104Eduarda LimaPendingR$ 3.9002026-05-15
Vila Jardim #105Felipe CostaInactiveR$ 4.2502026-06-15
Mirante Ipê #106Gabriela AlvesActiveR$ 4.6002026-01-15
Mont Blanc #107Henrique DiasPendingR$ 4.9502026-02-15
Parque das Flores #108Isabela RochaInactiveR$ 5.3002026-03-15
Villa Bela #109João AlmeidaActiveR$ 2.5002026-04-15
0 of 30 row(s) selected
Rows per page
<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>

Built on the design-system `Table` primitive — see also: shadcn/ui — Data Table