rare-sapphire

Set column filter state in the url

Hello guys, just trying to get the column filter state to and from the url. Is there a way to do this without state syncing a useState hook? Anytime I try to pass the url params as the state when using useReactTable I get an infinite loop. Also I have used zod to validate the URL params but even when I don’t use zod and i just cast them I get the same issue. I don’t think that’s the problem. Any advice will be very helpful! Let me know if you need any code samples! Thanks for your time!

10 Replies

other-emerald•2y ago

You could memoize the individual search query parameter, so the the value you pass down into the useReactTable hook doesn't change unless what's in the URL bar changes. Also, consider using a debounce on the input that updates the URL query parameter value so you aren't updating immediately after each keystroke.

deep-jade•2y ago

@Yiannis Did you ever sort this? I was wondering about doing something similar and wondered if you came up with a solution. I have a reusable table component that has the useReactTable hook within it and was wondering whether to move it outside so I can do this in Next JS and make keep the component reusable

rare-sapphireOP•2y ago

@Karl So you just have to sync the use state hooks with the url state. I ended up making my own hook (useDataTableSatae) and they just adds and gets url parameters and then I feed those as the default values of the useState hooks that useTable uses. If you need more assistance or an example I’m happy to share

deep-jade•2y ago

I would really appreciate that if you would, it sounds super useful and almost exactly what I'm looking to do

rare-sapphireOP•2y ago

Sure thing, will pose those in a couple of hours @Karl hey sorry for the delay, the day for the better of me, will share tomorrow @Karl So first is the hook i made to set url params easier:

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

export const useURLParmBuilder = () => {
  const params = useSearchParams();
  const sp = new URLSearchParams(params)!;
  const pathName = usePathname();

  const appendParam = useCallback(
    (name: string, value: string) => {
      const params = new URLSearchParams(sp);
      params.append(name, value);
      return `${pathName}?${params.toString()}`;
    },
    [sp, pathName],
  );
  const upsertParam = useCallback(
    (name: string, value: string) => {
      const params = new URLSearchParams(sp);
      params.set(name, value);

      return `${pathName}?${params.toString()}`;
    },
    [sp, pathName],
  );

  const upsertParams = useCallback(
    (paramsToAdd: { name: string; value: string }[]) => {
      const params = new URLSearchParams(sp);
      paramsToAdd.forEach((param) => {
        params.set(param.name, param.value);
      });

      return `${pathName}?${params.toString()}`;
    },
    [sp, pathName],
  );

  const deleteParam = useCallback(
    (name: string) => {
      const params = new URLSearchParams(sp);
      params.delete(name);

      return `${pathName}?${params.toString()}`;
    },
    [sp, pathName],
  );

  const deleteParams = useCallback(
    (paramsToDelete: string[]) => {
      const params = new URLSearchParams(sp);
      paramsToDelete.forEach((param) => {
        params.delete(param);
      });
      return `${pathName}?${params.toString()}`;
    },
    [pathName, sp],
  );

  return {
    upsertParam,
    upsertParams,
    deleteParam,
    deleteParams,
    appendParam,
  };
};

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

export const useURLParmBuilder = () => {
  const params = useSearchParams();
  const sp = new URLSearchParams(params)!;
  const pathName = usePathname();

  const appendParam = useCallback(
    (name: string, value: string) => {
      const params = new URLSearchParams(sp);
      params.append(name, value);
      return `${pathName}?${params.toString()}`;
    },
    [sp, pathName],
  );
  const upsertParam = useCallback(
    (name: string, value: string) => {
      const params = new URLSearchParams(sp);
      params.set(name, value);

      return `${pathName}?${params.toString()}`;
    },
    [sp, pathName],
  );

  const upsertParams = useCallback(
    (paramsToAdd: { name: string; value: string }[]) => {
      const params = new URLSearchParams(sp);
      paramsToAdd.forEach((param) => {
        params.set(param.name, param.value);
      });

      return `${pathName}?${params.toString()}`;
    },
    [sp, pathName],
  );

  const deleteParam = useCallback(
    (name: string) => {
      const params = new URLSearchParams(sp);
      params.delete(name);

      return `${pathName}?${params.toString()}`;
    },
    [sp, pathName],
  );

  const deleteParams = useCallback(
    (paramsToDelete: string[]) => {
      const params = new URLSearchParams(sp);
      paramsToDelete.forEach((param) => {
        params.delete(param);
      });
      return `${pathName}?${params.toString()}`;
    },
    [pathName, sp],
  );

  return {
    upsertParam,
    upsertParams,
    deleteParam,
    deleteParams,
    appendParam,
  };
};

Then i made a hook that sets and gets params for my table component :

import type { ColumnFilter, VisibilityState } from "@tanstack/react-table";
import { useSearchParams } from "next/navigation";
import { useRouter } from "next/router";
import type { TableNames } from "../types";
import { useURLParmBuilder } from "./useURLParamBuilder";

export const useDataTableState = () => {
  const params = useSearchParams();
  const router = useRouter();
  const {
    upsertParams,
    deleteParams,
    upsertParam,
    appendParam,
    deleteParamWithValue,
  } = useURLParmBuilder();
  const filterId = params.get("filterId");
  const filterValue = params.get("filterValue");

  return {
    columnFilters:
      filterId && filterValue
        ? [
            {
              id: filterId,
              value: filterValue,
            },
          ]
        : [],
  };
};

import type { ColumnFilter, VisibilityState } from "@tanstack/react-table";
import { useSearchParams } from "next/navigation";
import { useRouter } from "next/router";
import type { TableNames } from "../types";
import { useURLParmBuilder } from "./useURLParamBuilder";

export const useDataTableState = () => {
  const params = useSearchParams();
  const router = useRouter();
  const {
    upsertParams,
    deleteParams,
    upsertParam,
    appendParam,
    deleteParamWithValue,
  } = useURLParmBuilder();
  const filterId = params.get("filterId");
  const filterValue = params.get("filterValue");

  return {
    columnFilters:
      filterId && filterValue
        ? [
            {
              id: filterId,
              value: filterValue,
            },
          ]
        : [],
  };
};

so to set the filters from anywhere just do:

const addColumnFilter = async (filterId: string, filterValue:string) => {
    await router.push(upsertParams([
      {
        name: "filterId",
        value: filterId
      },
      {
        name: "filterValue",
        value: filterValue
      }
    ]))
  }

const addColumnFilter = async (filterId: string, filterValue:string) => {
    await router.push(upsertParams([
      {
        name: "filterId",
        value: filterId
      },
      {
        name: "filterValue",
        value: filterValue
      }
    ]))
  }

and then i incorporate the url state in the table state like this:

const { columnFilters } = useDataTableState();

const [urlFilters, setURLFilters] = useState<ColumnFiltersState>(
    columnFilters ?? [],
);

const table = useReactTable({
    //Your table options here...
    onColumnFiltersChange: setColumnFilters,
    state: {
      // Other table state here...
      urlFilters,
    },
  });

const { columnFilters } = useDataTableState();

const [urlFilters, setURLFilters] = useState<ColumnFiltersState>(
    columnFilters ?? [],
);

const table = useReactTable({
    //Your table options here...
    onColumnFiltersChange: setColumnFilters,
    state: {
      // Other table state here...
      urlFilters,
    },
  });

Just to clarify, i have been doing this less than a year professionally so by all means this very well could be bad/an anti pattern etc. I do not claim this is the best or most optimal aproach, could be horrible. It is just what i did and works for me! If any of it isn't clear or making sense feel free to ask anything!

deep-jade•2y ago

Thanks a lot for this, I'm going to take a look over the code but it looks great from what I can see! It's certainly along the lines of what I'm after

rare-sapphireOP•2y ago

Hey another thing to to keep in mind is I don’t update the state once the page has been loaded. Meaning I use this in technique to apply the filter before the table is rendered (I use a pop up table). If you are gonna hook up some ui to this and you want to update the table without reloading the page, when you update the url also update the tables internal state. The table object has api for this. Let me know if you need any help. @Karl

deep-jade•2y ago

Ah great, thanks for letting me know. Yes. I think I will need to do this as the UI will initially load a filtered table and have other filters to update them 🙂

rare-sapphireOP•2y ago

I use mine as a view of filtered values on the current table. Ie some customer has 10 orders, so in the customer table I have an orders column and for each customer I when they click the order cell I open a pop up orders table that has the filter applied already, hence why I only use the url and not the ui.

deep-jade•2y ago

That makes sense, good idea!

Gaming

Programming

Set column filter state in the url

Did you find this page helpful?