Server-side DataTable

True server-side operations: pagination, sorting, filtering, and search all happen on the server. State persisted in URL.

All Operations Server-side

Page 1 of 5 fetched from server
Showing 10 of 50 total users
Search, sort, and filter changes trigger server re-fetch
State persisted in URL for bookmarking and sharing

How it works

URL contains state: ?page=0&pageSize=10&sortBy=name&search=engineering
Server Component parses URL → builds TableQuery
fetchDemoTable(query) runs on server, returns paginated results
Client renders with manualPagination + manualSorting + manualFiltering
User changes → URL updates → server re-fetches (no client-side filtering)

Current Server Query

{
  "page": 0,
  "pageSize": 10
}

Users

Page 1 of 5 • 50 total users

10 of 50 users (server-paginated)


Alex Smith	alex.smith@example.com	Engineering	Manager	Active	High	90%	Jan 1, 2023
Jordan Smith	jordan.smith@example.com	Design	Manager	Inactive	High	51%	Jan 8, 2023
Taylor Smith	taylor.smith@example.com	Marketing	Senior Developer	Pending	High	72%	Jan 15, 2023
Morgan Smith	morgan.smith@example.com	Sales	Senior Developer	Active	Medium	83%	Jan 22, 2023
Casey Smith	casey.smith@example.com	Operations	Designer	Inactive	Medium	44%	Jan 29, 2023
Riley Smith	riley.smith@example.com	Finance	Designer	Pending	Medium	65%	Feb 5, 2023
Quinn Smith	quinn.smith@example.com	HR	Analyst	Active	Low	76%	Feb 12, 2023
Avery Smith	avery.smith@example.com	Product	Analyst	Inactive	Low	37%	Feb 19, 2023
Parker Smith	parker.smith@example.com	Support	Coordinator	Pending	Low	58%	Feb 26, 2023
Charlie Smith	charlie.smith@example.com	Legal	Coordinator	Active	High	99%	Mar 5, 2023

0 of 10 row(s) selected.

Rows per page

Page 1 of 5

Code Pattern

page.tsx (Server Component)

// Parse URL searchParams → TableQuery
const query = parseSearchParams(params);

// Fetch on server
const result = await fetchDemoTable(query);

// Pass to client with manual mode
<ServerDemoTable
  data={result.items}
  total={result.total}
  pageCount={result.pageCount}
  currentState={currentState}
/>

client-table.tsx ("use client")

<BaseDataTable
  data={data}
  manualPagination
  manualSorting
  manualFiltering
  pageCount={pageCount}
  externalState={currentState}
  onPaginationChange={updateURL}
  onSortingChange={updateURL}
  onGlobalFilterChange={updateURL}
/>