Server Table

Mesma UI da Data Table, mas com estado controlado pelo consumidor. Passa a página atual de linhas e o total; sort/page/search/pageSize ficam controlados, com callbacks onChange para o round-trip com o backend.

Dirigido pelo backend

Sort, busca e paginação controlados — fetch simulado em 400ms

0 de 0 linha(s) selecionada(s)

Linhas por página

<ServerTableRoot
  rows={pageData.rows}
  rowCount={pageData.rowCount}
  columns={columns}
  rowKey={(row) => row.id}
  sort={sort} onSortChange={setSort}
  page={page} onPageChange={setPage}
  pageSize={pageSize} onPageSizeChange={setPageSize}
  search={search} onSearchChange={setSearch}
  enableSelection
>
  <DataTableToolbar>
    <DataTableSearch />
    <DataTableViewOptions />
  </DataTableToolbar>
  <DataTableContent stickyHeader maxHeight="28rem" />
  <DataTablePagination />
</ServerTableRoot>

Busca com submit manual

Use <DataTableSearchForm /> quando cada tecla representaria um round-trip caro. O valor de busca só é commitado no submit do form, então o backend é chamado uma vez por consulta.

Digitar atualiza só um draft local — o fetch dispara no submit (botão ou Enter).

Fetches disparados: 0

		Status

Linhas por página

<ServerTableRoot
  rows={pageData.rows}
  rowCount={pageData.rowCount}
  columns={columns}
  rowKey={(row) => row.id}
  search={search} onSearchChange={setSearch}
  /* …other controlled props… */
>
  <DataTableToolbar>
    {/* typing only updates a local draft; fetch fires on submit */}
    <DataTableSearchForm />
    <DataTableViewOptions />
  </DataTableToolbar>
  <DataTableContent stickyHeader maxHeight="28rem" />
  <DataTablePagination />
</ServerTableRoot>