Example or hint for search and pagination state in url params?

[jackblackCH]

I am looking for a sandbox or any implementation how to write pagination and (fuzzy) search state into the url and connect it properly with the props and state of the table (I am using next js but not so important). I already checked all open and closed issues and also discussions and could not find a solution. There are similar questions e.g #3967 and #3923 but sadly no solved solutions.

** I am actually a bit suprised, it tells me, it might be tricky **

Is anyone here who could help with that? A few hints how to start would also work. 🙏 I am happy to share my final implementation.

[tomasmenezes]

Are you doing client- or server-side pagination? I'm handling it client-side on one of my tables (I'm passing the full data object from a server component) and was attempting to quickly switch to a url param state just this morning. Here's a rough design:

import { usePathname, useSearchParams } from 'next/navigation';

const TableComponent = ({columns, data}) => {
    const searchParams = useSearchParams()
    const pathname = usePathname()
    
    const pagination = {
        // page param requires better validation, check if in valid range
        pageIndex: searchParams.get('page') ? Math.floor(Number(searchParams.get('page'))) - 1 : 0,
        pageSize: DEFAULT_PAGE_SIZE
    }
    
    const table = useReactTable({
        data,
        columns,
        state: {pagination, ...}
        onPaginationChange: (updater) => {
            if (typeof updater !== 'function') return;
            const { pageIndex } = updater(pagination);
            const params = new URLSearchParams(searchParams);
            if (pageIndex) {
                params.set('page', `${pageIndex + 1}`);
            } else {
                params.delete('page');
            }
            // window.history is used to prevent reloading/refetch of the data on the parent server component
            window.history.pushState(null, '', `${pathname}?${params.toString()}`);
        },
        getPaginationRowModel: getPaginationRowModel(),
        ...
    })
    ...
}