Server Table

Same UI as Data Table, but consumer-controlled state. Pass the current page of rows plus the total count; sort/page/search/pageSize are controlled, with onChange callbacks for backend round-trips.

Backend-driven

Controlled sort, search, paging — simulated 400ms fetch

0 of 0 row(s) selected

Rows per page

<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>

Manual-submit search

Use <DataTableSearchForm /> when each keystroke would be an expensive round-trip. The committed search value only changes on form submit, so the backend is hit once per query.

Typing only updates a local draft — the fetch fires on submit (button or Enter).

Fetches fired: 0

		Status

Rows per page

<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>