useTableParams hook

Author: Abdalluh28Created Sep 6, 2026Updated Sep 6, 2026

Is your feature request related to a problem? Please describe. When building data tables (pagination, search, filters), I keep re-implementing the same logic to sync table state with the URL query string, so refreshing or sharing a link reproduces the exact same view. There's no existing hook here for this, so it gets rebuilt by hand in every project.

Describe the solution you'd like A useTableParams hook built on useSearchParams that:

Takes a defaults object declaring which query keys the table cares about and their fallback values Exposes the current values plus setParam/setParams/removeParam/clearParams helpers Removes a key from the URL entirely when its value is empty/null/undefined (keeps URLs clean) Resets pagination back to default whenever a non-page filter changes Skips the navigation update entirely when nothing actually changed (avoids redundant re-renders/history entries)

Example usage:

js const { page, search, setParam } = useTableParams({ page: "0", search: "", status: "active", });

setParam("search", "ahmed"); // → ?search=ahmed, page reset to default setParam("search", ""); // → search key removed from URL entirely

I already have working JavaScript and TypeScript implementations and am happy to open a PR.

Describe alternatives you've considered Rolling this logic manually in each table component, or a generic useSearchParams wrapper without the clean-URL/pagination-reset/no-op behaviors — both end up duplicated per project.

Additional context This depends on react-router-dom's useSearchParams.

Source: antonioru/beautiful-react-hooks