Recipe

Data table design

Sort, filter, and paginate — a reusable pattern for admin panels and dashboards.

Ingredients

URL search params for sort column, direction, page, and filter value
Server component reads params, fetches page from database
Column headers are links that toggle asc/desc
Filter input uses debounced client navigation
Page controls show prev/next with disabled states

Flow

Page receives searchParams from Next.js
Parse sort, order, page, q with safe defaults
Calculate offset = (page - 1) * pageSize
Run two queries: rows + total count
Render table, header links, filter input, pagination

Schema

sort?: string    // column key
order?: "asc" | "desc"
page?: number    // 1-based
q?: string       // filter text
pageSize?: number

Pagination

1

Current page

20

Rows per page

7

Total pages

Gotchas

•Always sanitize sort column against an allowlist — never pass raw param to SQL.
•Use cursor pagination for large datasets; offset drifts under concurrent writes.
•Debounce filter input at 300ms to avoid hammering the database.