useDataTableUrlState

Keeps the page, sorting, filters and search of a DataTable in the address bar.

Spread the result into a DataTable: the table starts from the query it finds in the URL, and every change rewrites the URL with history.replaceState. A reload or a shared link opens the same view, and the back button still leaves the page instead of undoing a sort.

See alsoData Table

Import

import { useDataTableUrlState } from "@wunderui/react"

Comes with WunderUI Core and Pro, in the @wunderui/react package from your plan. See the plans.

Signature

useDataTableUrlState(options?: DataTableUrlStateOptions & { search?: string; }): { initialState: DataTableQuery; onQueryChange: (query: DataTableQuery) => void; }

Parameters

Returns

{ initialState: DataTableQuery; onQueryChange: (query: DataTableQuery) => void; }

Examples

import { DataTable, useDataTableUrlState } from "@wunderui/react"

export function OrdersTable({ rows }: { rows: Order[] }) {
  const url = useDataTableUrlState({ prefix: "orders." })
  return <DataTable columns={columns} data={rows} initialState={url.initialState} onQueryChange={url.onQueryChange} />
}

Notes

• Give each table on a page its own prefix (for example orders.), so two tables do not share parameters.
• On a server-rendered page, pass the request's query string as search, so the first render matches the server's HTML.
• Parameters that are not the table's stay in the URL untouched.
• With server-side data, fetch with the query onQueryChange hands you, so table and data agree.