useDataTableSearchParams

Sync DataTable pagination, sorting, and filters to and from TanStack Router search params.

Installation

useDataTableSearchParams keeps a <DataTable>'s pagination, sorting, and column-filter state in the URL via TanStack Router search params — so table views are shareable, bookmarkable, and survive refreshes. It reads state from the current search params and writes updates back with navigate({ search, replace: true }). Each concern can be toggled independently, and a paramPrefix lets multiple tables coexist on one page.

Must be called inside a TanStack Router context — it uses useSearch and useNavigate.

Usage

import { useDataTableSearchParams } from "@/hooks/use-data-table-search-params";
import { DataTable } from "@/components/redpanda-ui/data-table";

function UrlSyncedTable() {
  const { pagination, onPaginationChange, sorting, onSortingChange } =
    useDataTableSearchParams({
      syncPagination: true,
      syncSorting: true,
    });

  return (
    <DataTable
      columns={columns}
      data={data}
      pagination={pagination}
      onPaginationChange={onPaginationChange}
      sorting={sorting}
      onSortingChange={onSortingChange}
    />
  );
}

API