Add example for Next.JS client-side pages

[neilenns]

Thank you for the amazing hook, it was so fast to get this up and running with my table.

Since I'm using client-side rendering for the page I had to make a few changes to the example in the docs. Perhaps the docs can update to include a client-side example?

Here's how I got it working:

import { usePathname, useRouter, useSearchParams } from "next/navigation";

const router = useRouter();

const stateAndOnChanges = useTableSearchParams({
  query: useSearchParams(),
  pathname: usePathname(),
  replace: router.replace,
});

[taro-28]

@neilenns
Thank you very much!
I have added it here!

[neilenns]

I also had to use the JSON encoding for the global and column filter encoder/decoder. Otherwise it didn't work.

[taro-28]

@neilenns
Can you give us some code or something that can reproduce the problem so we can investigate?👀

[neilenns]

It's been several days, I already forget what the problem was 😅 I'll try ripping out the custom encode/decode and see what the result is and report back.

[neilenns]

If I don't do the custom encode/decode, the string parameters wind up like this:

http://localhost:3000/admin/scenarios?columnFilters=plan.dep.%2522KPDX%2522

And the filtering doesn't work. If I use the custom code, it comes through like this:

http://localhost:3000/admin/scenarios?columnFilters.plan.dep=%22KPDX%22 which works fine.