diff --git a/examples/next-pages-router/src/pages/index.tsx b/examples/next-pages-router/src/pages/index.tsx
index 0e99b70..3742a57 100644
--- a/examples/next-pages-router/src/pages/index.tsx
+++ b/examples/next-pages-router/src/pages/index.tsx
@@ -51,7 +51,7 @@ export default function Home() {
         <label>
           Global Filter
           <input
-            className="ml-2"
+            className="ml-2 border"
             placeholder="Search..."
             onChange={(e) => table.setGlobalFilter(String(e.target.value))}
             value={table.getState().globalFilter ?? ""}
@@ -81,6 +81,58 @@ export default function Home() {
                       }
                     })()}
                   </button>
+                  <div>
+                    {header.column.id === "age" ? (
+                      <div className="flex space-x-2">
+                        <input
+                          type="number"
+                          value={
+                            (
+                              header.column.getFilterValue() as [number, number]
+                            )?.[0] ?? ""
+                          }
+                          onChange={(e) =>
+                            header.column.setFilterValue(
+                              (old: [number, number]) => [
+                                e.target.value,
+                                old?.[1],
+                              ],
+                            )
+                          }
+                          placeholder="Min"
+                          className="border w-24"
+                        />
+                        <input
+                          type="number"
+                          value={
+                            (
+                              header.column.getFilterValue() as [number, number]
+                            )?.[1] ?? ""
+                          }
+                          onChange={(e) =>
+                            header.column.setFilterValue(
+                              (old: [number, number]) => [
+                                old?.[0],
+                                e.target.value,
+                              ],
+                            )
+                          }
+                          placeholder="Max"
+                          className="border w-24"
+                        />
+                      </div>
+                    ) : (
+                      <input
+                        className="border"
+                        onChange={(e) =>
+                          header.column.setFilterValue(e.target.value)
+                        }
+                        placeholder="Search..."
+                        type="text"
+                        value={(header.column.getFilterValue() ?? "") as string}
+                      />
+                    )}
+                  </div>
                 </th>
               ))}
             </tr>
@@ -173,6 +225,7 @@ export default function Home() {
             globalFilter: table.getState().globalFilter,
             sorting: table.getState().sorting,
             pagination: table.getState().pagination,
+            columnFilters: table.getState().columnFilters,
           },
           null,
           2,
diff --git a/packages/tanstack-table-search-params/src/encoder-decoder/columnFilters.test.ts b/packages/tanstack-table-search-params/src/encoder-decoder/columnFilters.test.ts
new file mode 100644
index 0000000..6cacba6
--- /dev/null
+++ b/packages/tanstack-table-search-params/src/encoder-decoder/columnFilters.test.ts
@@ -0,0 +1,438 @@
+import { describe, expect, test } from "vitest";
+import { decodeColumnFilters, encodeColumnFilters } from "./columnFilters";
+
+describe("columnFilters", () => {
+  describe("encode", () =>
+    test.each<{
+      name: string;
+      columnFilters: Parameters<typeof encodeColumnFilters>[0];
+      want: ReturnType<typeof encodeColumnFilters>;
+    }>([
+      {
+        name: "empty array",
+        columnFilters: [],
+        want: undefined,
+      },
+      {
+        name: "string value",
+        columnFilters: [{ id: "foo", value: "bar" }],
+        want: "foo.%22bar%22",
+      },
+      {
+        name: "number value",
+        columnFilters: [{ id: "foo", value: 42 }],
+        want: "foo.42",
+      },
+      {
+        name: "boolean value",
+        columnFilters: [{ id: "foo", value: true }],
+        want: "foo.true",
+      },
+      {
+        name: "null value",
+        columnFilters: [{ id: "foo", value: null }],
+        want: "foo.null",
+      },
+      {
+        name: "undefined value",
+        columnFilters: [{ id: "foo", value: undefined }],
+        want: "foo.undefined",
+      },
+      {
+        name: "empty object value",
+        columnFilters: [{ id: "foo", value: {} }],
+        want: "foo.%7B%7D",
+      },
+      {
+        name: "string object value",
+        columnFilters: [{ id: "foo", value: { bar: "baz" } }],
+        want: "foo.%7B%22bar%22%3A%22baz%22%7D",
+      },
+      {
+        name: "number object value",
+        columnFilters: [{ id: "foo", value: { bar: 42 } }],
+        want: "foo.%7B%22bar%22%3A42%7D",
+      },
+      {
+        name: "boolean object value",
+        columnFilters: [{ id: "foo", value: { bar: true } }],
+        want: "foo.%7B%22bar%22%3Atrue%7D",
+      },
+      {
+        name: "null object value",
+        columnFilters: [{ id: "foo", value: { bar: null } }],
+        want: "foo.%7B%22bar%22%3Anull%7D",
+      },
+      {
+        name: "undefined object value",
+        columnFilters: [{ id: "foo", value: { bar: undefined } }],
+        want: "foo.%7B%7D",
+      },
+      {
+        name: "array object value",
+        columnFilters: [{ id: "foo", value: { bar: ["baz"] } }],
+        want: "foo.%7B%22bar%22%3A%5B%22baz%22%5D%7D",
+      },
+      {
+        name: "object object value",
+        columnFilters: [{ id: "foo", value: { bar: { baz: "qux" } } }],
+        want: "foo.%7B%22bar%22%3A%7B%22baz%22%3A%22qux%22%7D%7D",
+      },
+      {
+        name: "mixed object value",
+        columnFilters: [
+          {
+            id: "foo",
+            value: {
+              string: "baz",
+              number: 42,
+              boolean: true,
+              null: null,
+              undefined: undefined,
+              object: { garply: "waldo" },
+              array: ["aaa", "bbb"],
+            },
+          },
+        ],
+        want: "foo.%7B%22string%22%3A%22baz%22%2C%22number%22%3A42%2C%22boolean%22%3Atrue%2C%22null%22%3Anull%2C%22object%22%3A%7B%22garply%22%3A%22waldo%22%7D%2C%22array%22%3A%5B%22aaa%22%2C%22bbb%22%5D%7D",
+      },
+      {
+        name: "empty array value",
+        columnFilters: [{ id: "foo", value: [] }],
+        want: "foo.%5B%5D",
+      },
+      {
+        name: "string array value",
+        columnFilters: [{ id: "foo", value: ["bar", "baz"] }],
+        want: "foo.%5B%22bar%22%2C%22baz%22%5D",
+      },
+      {
+        name: "number array value",
+        columnFilters: [{ id: "foo", value: [42, 43] }],
+        want: "foo.%5B42%2C43%5D",
+      },
+      {
+        name: "boolean array value",
+        columnFilters: [{ id: "foo", value: [true, false] }],
+        want: "foo.%5Btrue%2Cfalse%5D",
+      },
+      {
+        name: "null array value",
+        columnFilters: [{ id: "foo", value: [null, null] }],
+        want: "foo.%5Bnull%2Cnull%5D",
+      },
+      {
+        name: "object array value",
+        columnFilters: [{ id: "foo", value: [{ bar: "baz" }, { bar: "qux" }] }],
+        want: "foo.%5B%7B%22bar%22%3A%22baz%22%7D%2C%7B%22bar%22%3A%22qux%22%7D%5D",
+      },
+      {
+        name: "array array value",
+        columnFilters: [{ id: "foo", value: [["bar"], ["baz"]] }],
+        want: "foo.%5B%5B%22bar%22%5D%2C%5B%22baz%22%5D%5D",
+      },
+      {
+        name: "mixed array value",
+        columnFilters: [
+          {
+            id: "foo",
+            value: ["bar", 42, true, null, { bar: "baz" }, ["qux"]],
+          },
+        ],
+        want: "foo.%5B%22bar%22%2C42%2Ctrue%2Cnull%2C%7B%22bar%22%3A%22baz%22%7D%2C%5B%22qux%22%5D%5D",
+      },
+    ])("$name", ({ columnFilters, want }) =>
+      expect(encodeColumnFilters(columnFilters)).toEqual(want),
+    ));
+
+  describe("decode", () =>
+    test.each<{
+      name: string;
+      queryValue: Parameters<typeof decodeColumnFilters>[0];
+      want: ReturnType<typeof decodeColumnFilters>;
+    }>([
+      {
+        name: "empty array",
+        queryValue: "",
+        want: [],
+      },
+      {
+        name: "string value",
+        queryValue: "foo.%22bar%22",
+        want: [{ id: "foo", value: "bar" }],
+      },
+      {
+        name: "number value",
+        queryValue: "foo.42",
+        want: [{ id: "foo", value: 42 }],
+      },
+      {
+        name: "boolean value",
+        queryValue: "foo.true",
+        want: [{ id: "foo", value: true }],
+      },
+      {
+        name: "null value",
+        queryValue: "foo.null",
+        want: [{ id: "foo", value: null }],
+      },
+      {
+        name: "undefined value",
+        queryValue: "foo.undefined",
+        want: [{ id: "foo", value: undefined }],
+      },
+      {
+        name: "empty object value",
+        queryValue: "foo.%7B%7D",
+        want: [{ id: "foo", value: {} }],
+      },
+      {
+        name: "string object value",
+        queryValue: "foo.%7B%22bar%22%3A%22baz%22%7D",
+        want: [{ id: "foo", value: { bar: "baz" } }],
+      },
+      {
+        name: "number object value",
+        queryValue: "foo.%7B%22bar%22%3A42%7D",
+        want: [{ id: "foo", value: { bar: 42 } }],
+      },
+      {
+        name: "boolean object value",
+        queryValue: "foo.%7B%22bar%22%3Atrue%7D",
+        want: [{ id: "foo", value: { bar: true } }],
+      },
+      {
+        name: "null object value",
+        queryValue: "foo.%7B%22bar%22%3Anull%7D",
+        want: [{ id: "foo", value: { bar: null } }],
+      },
+      {
+        name: "undefined object value",
+        queryValue: "foo.%7B%7D",
+        want: [{ id: "foo", value: {} }],
+      },
+      {
+        name: "array object value",
+        queryValue: "foo.%7B%22bar%22%3A%5B%22baz%22%5D%7D",
+        want: [{ id: "foo", value: { bar: ["baz"] } }],
+      },
+      {
+        name: "object object value",
+        queryValue: "foo.%7B%22bar%22%3A%7B%22baz%22%3A%22qux%22%7D%7D",
+        want: [{ id: "foo", value: { bar: { baz: "qux" } } }],
+      },
+      {
+        name: "mixed object value",
+        queryValue:
+          "foo.%7B%22string%22%3A%22baz%22%2C%22number%22%3A42%2C%22boolean%22%3Atrue%2C%22null%22%3Anull%2C%22object%22%3A%7B%22garply%22%3A%22waldo%22%7D%2C%22array%22%3A%5B%22aaa%22%2C%22bbb%22%5D%7D",
+        want: [
+          {
+            id: "foo",
+            value: {
+              string: "baz",
+              number: 42,
+              boolean: true,
+              null: null,
+              object: { garply: "waldo" },
+              array: ["aaa", "bbb"],
+            },
+          },
+        ],
+      },
+      {
+        name: "empty array value",
+        queryValue: "foo.%5B%5D",
+        want: [{ id: "foo", value: [] }],
+      },
+      {
+        name: "string array value",
+        queryValue: "foo.%5B%22bar%22%2C%22baz%22%5D",
+        want: [{ id: "foo", value: ["bar", "baz"] }],
+      },
+      {
+        name: "number array value",
+        queryValue: "foo.%5B42%2C43%5D",
+        want: [{ id: "foo", value: [42, 43] }],
+      },
+      {
+        name: "boolean array value",
+        queryValue: "foo.%5Btrue%2Cfalse%5D",
+        want: [{ id: "foo", value: [true, false] }],
+      },
+      {
+        name: "null array value",
+        queryValue: "foo.%5Bnull%2Cnull%5D",
+        want: [{ id: "foo", value: [null, null] }],
+      },
+      {
+        name: "object array value",
+        queryValue:
+          "foo.%5B%7B%22bar%22%3A%22baz%22%7D%2C%7B%22bar%22%3A%22qux%22%7D%5D",
+        want: [{ id: "foo", value: [{ bar: "baz" }, { bar: "qux" }] }],
+      },
+      {
+        name: "array array value",
+        queryValue: "foo.%5B%5B%22bar%22%5D%2C%5B%22baz%22%5D%5D",
+        want: [{ id: "foo", value: [["bar"], ["baz"]] }],
+      },
+      {
+        name: "mixed array value",
+        queryValue:
+          "foo.%5B%22bar%22%2C42%2Ctrue%2Cnull%2C%7B%22bar%22%3A%22baz%22%7D%2C%5B%22qux%22%5D%5D",
+        want: [
+          {
+            id: "foo",
+            value: ["bar", 42, true, null, { bar: "baz" }, ["qux"]],
+          },
+        ],
+      },
+      {
+        name: "invalid string array",
+        queryValue: ["invalid"],
+        want: [],
+      },
+      {
+        name: "undefined",
+        queryValue: undefined,
+        want: [],
+      },
+      {
+        name: "empty string",
+        queryValue: "",
+        want: [],
+      },
+      {
+        name: "invalid string",
+        queryValue: "foo",
+        want: [],
+      },
+      {
+        name: "invalid value",
+        queryValue: "foo.bar",
+        want: [],
+      },
+    ])("$name", ({ queryValue, want }) =>
+      expect(decodeColumnFilters(queryValue)).toEqual(want),
+    ));
+
+  describe("encode and decode", () =>
+    test.each<{
+      name: string;
+      columnFilters: Parameters<typeof encodeColumnFilters>[0];
+    }>([
+      {
+        name: "empty array",
+        columnFilters: [],
+      },
+      {
+        name: "string value",
+        columnFilters: [{ id: "foo", value: "bar" }],
+      },
+      {
+        name: "number value",
+        columnFilters: [{ id: "foo", value: 42 }],
+      },
+      {
+        name: "boolean value",
+        columnFilters: [{ id: "foo", value: true }],
+      },
+      {
+        name: "null value",
+        columnFilters: [{ id: "foo", value: null }],
+      },
+      {
+        name: "undefined value",
+        columnFilters: [{ id: "foo", value: undefined }],
+      },
+      {
+        name: "empty object value",
+        columnFilters: [{ id: "foo", value: {} }],
+      },
+      {
+        name: "string object value",
+        columnFilters: [{ id: "foo", value: { bar: "baz" } }],
+      },
+      {
+        name: "number object value",
+        columnFilters: [{ id: "foo", value: { bar: 42 } }],
+      },
+      {
+        name: "boolean object value",
+        columnFilters: [{ id: "foo", value: { bar: true } }],
+      },
+      {
+        name: "null object value",
+        columnFilters: [{ id: "foo", value: { bar: null } }],
+      },
+      {
+        name: "undefined object value",
+        columnFilters: [{ id: "foo", value: { bar: undefined } }],
+      },
+      {
+        name: "array object value",
+        columnFilters: [{ id: "foo", value: { bar: ["baz"] } }],
+      },
+      {
+        name: "object object value",
+        columnFilters: [{ id: "foo", value: { bar: { baz: "qux" } } }],
+      },
+      {
+        name: "mixed object value",
+        columnFilters: [
+          {
+            id: "foo",
+            value: {
+              string: "baz",
+              number: 42,
+              boolean: true,
+              null: null,
+              undefined: undefined,
+              object: { garply: "waldo" },
+              array: ["aaa", "bbb"],
+            },
+          },
+        ],
+      },
+      {
+        name: "empty array value",
+        columnFilters: [{ id: "foo", value: [] }],
+      },
+      {
+        name: "string array value",
+        columnFilters: [{ id: "foo", value: ["bar", "baz"] }],
+      },
+      {
+        name: "number array value",
+        columnFilters: [{ id: "foo", value: [42, 43] }],
+      },
+      {
+        name: "boolean array value",
+        columnFilters: [{ id: "foo", value: [true, false] }],
+      },
+      {
+        name: "null array value",
+        columnFilters: [{ id: "foo", value: [null, null] }],
+      },
+      {
+        name: "object array value",
+        columnFilters: [{ id: "foo", value: [{ bar: "baz" }, { bar: "qux" }] }],
+      },
+      {
+        name: "array array value",
+        columnFilters: [{ id: "foo", value: [["bar"], ["baz"]] }],
+      },
+      {
+        name: "mixed array value",
+        columnFilters: [
+          {
+            id: "foo",
+            value: ["bar", 42, true, null, { bar: "baz" }, ["qux"]],
+          },
+        ],
+      },
+    ])("$name", ({ columnFilters }) => {
+      expect(decodeColumnFilters(encodeColumnFilters(columnFilters))).toEqual(
+        columnFilters,
+      );
+    }));
+});
diff --git a/packages/tanstack-table-search-params/src/encoder-decoder/columnFilters.ts b/packages/tanstack-table-search-params/src/encoder-decoder/columnFilters.ts
new file mode 100644
index 0000000..0be70f8
--- /dev/null
+++ b/packages/tanstack-table-search-params/src/encoder-decoder/columnFilters.ts
@@ -0,0 +1,45 @@
+import type { State } from "..";
+import type { Query } from "../types";
+
+export const encodeColumnFilters = (
+  columnFilters: State["columnFilters"],
+): Query[string] =>
+  columnFilters.length === 0
+    ? undefined
+    : columnFilters
+        .map(
+          ({ id, value }) =>
+            `${id}.${encodeURIComponent(JSON.stringify(value))}`,
+        )
+        .join(",");
+
+export const decodeColumnFilters = (
+  queryValue: Query[string],
+): State["columnFilters"] => {
+  if (typeof queryValue !== "string" || queryValue === "") return [];
+
+  try {
+    return queryValue
+      .split(",")
+      .map((item) => {
+        const [id, stringValue] = item.split(".");
+        if (!id) throw new Error("Invalid columnFilters");
+        if (stringValue === undefined) throw new Error("Invalid columnFilters");
+
+        try {
+          return {
+            id,
+            value:
+              stringValue === "undefined"
+                ? undefined
+                : JSON.parse(decodeURIComponent(stringValue)),
+          };
+        } catch {
+          return null;
+        }
+      })
+      .filter((x) => x !== null);
+  } catch {
+    return [];
+  }
+};
diff --git a/packages/tanstack-table-search-params/src/index.ts b/packages/tanstack-table-search-params/src/index.ts
index 4b86f94..8c350ec 100644
--- a/packages/tanstack-table-search-params/src/index.ts
+++ b/packages/tanstack-table-search-params/src/index.ts
@@ -5,6 +5,10 @@ import {
   functionalUpdate,
 } from "@tanstack/react-table";
 import { useCallback, useMemo } from "react";
+import {
+  decodeColumnFilters,
+  encodeColumnFilters,
+} from "./encoder-decoder/columnFilters";
 import {
   decodeGlobalFilter,
   encodeGlobalFilter,
@@ -16,13 +20,17 @@ import {
 import { decodeSorting, encodeSorting } from "./encoder-decoder/sorting";
 import type { Router } from "./types";
 
-export type State = Pick<TableState, "globalFilter" | "sorting" | "pagination">;
+export type State = Pick<
+  TableState,
+  "globalFilter" | "sorting" | "pagination" | "columnFilters"
+>;
 
 const PARAM_NAMES = {
   GLOBAL_FILTER: "globalFilter",
   SORTING: "sorting",
   PAGE_INDEX: "pageIndex",
   PAGE_SIZE: "pageSize",
+  COLUMN_FILTERS: "columnFilters",
 } as const;
 
 type Returns<T_DATA extends RowData> = {
@@ -36,6 +44,10 @@ type Returns<T_DATA extends RowData> = {
     TableOptions<T_DATA>["onPaginationChange"],
     undefined
   >;
+  onColumnFiltersChange: Exclude<
+    TableOptions<T_DATA>["onColumnFiltersChange"],
+    undefined
+  >;
 };
 
 export const useTableSearchParams = <T_DATA extends RowData>(
@@ -64,9 +76,15 @@ export const useTableSearchParams = <T_DATA extends RowData>(
     [pageIndexQueryValue, pageSizeQueryValue],
   );
 
+  const columnFiltersQueryValue = router.query[PARAM_NAMES.COLUMN_FILTERS];
+  const columnFilters = useMemo(
+    () => decodeColumnFilters(columnFiltersQueryValue),
+    [columnFiltersQueryValue],
+  );
+
   const state = useMemo(
-    () => ({ sorting, pagination, globalFilter }),
-    [sorting, pagination, globalFilter],
+    () => ({ sorting, pagination, globalFilter, columnFilters }),
+    [sorting, pagination, globalFilter, columnFilters],
   );
 
   return {
@@ -141,5 +159,29 @@ export const useTableSearchParams = <T_DATA extends RowData>(
       },
       [router, pagination],
     ),
+    onColumnFiltersChange: useCallback(
+      async (updater) => {
+        const newColumnFilters = functionalUpdate(updater, columnFilters);
+        const newQueryValue = encodeColumnFilters(newColumnFilters);
+
+        if (newQueryValue === encodeColumnFilters(columnFilters)) {
+          return;
+        }
+
+        const { [PARAM_NAMES.COLUMN_FILTERS]: _, ...excludedQuery } =
+          router.query;
+        await router.push({
+          pathname: router.pathname,
+          query:
+            newQueryValue === undefined
+              ? excludedQuery
+              : {
+                  ...excludedQuery,
+                  [PARAM_NAMES.COLUMN_FILTERS]: newQueryValue,
+                },
+        });
+      },
+      [router, columnFilters],
+    ),
   };
 };
diff --git a/packages/tanstack-table-search-params/src/tests/columnFilters.test.ts b/packages/tanstack-table-search-params/src/tests/columnFilters.test.ts
new file mode 100644
index 0000000..a6b4962
--- /dev/null
+++ b/packages/tanstack-table-search-params/src/tests/columnFilters.test.ts
@@ -0,0 +1,152 @@
+import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { act } from "@testing-library/react";
+import { renderHook } from "@testing-library/react";
+import mockRouter from "next-router-mock";
+import { describe, expect, test } from "vitest";
+import { useTableSearchParams } from "..";
+
+describe("columnFilters", () => {
+  test("single column: string value", () => {
+    const { result, rerender } = renderHook(() => {
+      const stateAndOnChanges = useTableSearchParams(mockRouter);
+      return useReactTable({
+        columns: [{ accessorKey: "id" }, { accessorKey: "name" }],
+        data: [
+          { id: 0, name: "John" },
+          { id: 1, name: "Mary" },
+        ],
+        getCoreRowModel: getCoreRowModel(),
+        ...stateAndOnChanges,
+      });
+    });
+
+    // initial state
+    expect(result.current.getState().columnFilters).toEqual([]);
+    expect(mockRouter.query).toEqual({});
+
+    // set string value for column filter
+    act(() => result.current.getFlatHeaders()[1]?.column.setFilterValue("J"));
+    rerender();
+    expect(result.current.getState().columnFilters).toEqual([
+      { id: "name", value: "J" },
+    ]);
+    expect(mockRouter.query).toEqual({ columnFilters: "name.%22J%22" });
+
+    // reset
+    act(() => {
+      result.current.getFlatHeaders()[1]?.column.setFilterValue("");
+    });
+    rerender();
+    expect(result.current.getState().columnFilters).toEqual([]);
+    expect(mockRouter.query).toEqual({});
+  });
+
+  test("single column: array value", () => {
+    const { result, rerender } = renderHook(() => {
+      const stateAndOnChanges = useTableSearchParams(mockRouter);
+      return useReactTable({
+        columns: [
+          { accessorKey: "id" },
+          { accessorKey: "name" },
+          { accessorKey: "age" },
+        ],
+        data: [
+          { id: 0, name: "John", age: 20 },
+          { id: 1, name: "Mary", age: 30 },
+          { id: 2, name: "Jane", age: 40 },
+          { id: 3, name: "John", age: 50 },
+        ],
+        getCoreRowModel: getCoreRowModel(),
+        ...stateAndOnChanges,
+      });
+    });
+
+    // initial state
+    expect(result.current.getState().columnFilters).toEqual([]);
+    expect(mockRouter.query).toEqual({});
+
+    // set array value for column filter
+    act(() =>
+      result.current.getFlatHeaders()[2]?.column.setFilterValue([30, 40]),
+    );
+    rerender();
+    expect(result.current.getState().columnFilters).toEqual([
+      { id: "age", value: [30, 40] },
+    ]);
+    expect(mockRouter.query).toEqual({ columnFilters: "age.%5B30%2C40%5D" });
+
+    // reset
+    act(() => {
+      result.current.getFlatHeaders()[2]?.column.setFilterValue([]);
+    });
+    rerender();
+    expect(result.current.getState().columnFilters).toEqual([]);
+    expect(mockRouter.query).toEqual({});
+  });
+
+  test("multiple columns", () => {
+    const { result, rerender } = renderHook(() => {
+      const stateAndOnChanges = useTableSearchParams(mockRouter);
+      return useReactTable({
+        columns: [
+          { accessorKey: "id" },
+          { accessorKey: "name" },
+          { accessorKey: "age" },
+        ],
+        data: [
+          { id: 0, name: "John", age: 20 },
+          { id: 1, name: "Mary", age: 30 },
+          { id: 2, name: "Jane", age: 40 },
+          { id: 3, name: "John", age: 50 },
+        ],
+        getCoreRowModel: getCoreRowModel(),
+        ...stateAndOnChanges,
+      });
+    });
+
+    // initial state
+    expect(result.current.getState().columnFilters).toEqual([]);
+    expect(mockRouter.query).toEqual({});
+
+    // set string value for column filter
+    act(() => {
+      result.current.getFlatHeaders()[1]?.column.setFilterValue("J");
+    });
+    rerender();
+    expect(result.current.getState().columnFilters).toEqual([
+      { id: "name", value: "J" },
+    ]);
+    expect(mockRouter.query).toEqual({
+      columnFilters: "name.%22J%22",
+    });
+
+    // set array value for column filter
+    act(() => {
+      result.current.getFlatHeaders()[2]?.column.setFilterValue([30, 40]);
+    });
+    rerender();
+    expect(result.current.getState().columnFilters).toEqual([
+      { id: "name", value: "J" },
+      { id: "age", value: [30, 40] },
+    ]);
+
+    // reset
+    act(() => {
+      result.current.getFlatHeaders()[1]?.column.setFilterValue("");
+    });
+    rerender();
+    expect(result.current.getState().columnFilters).toEqual([
+      { id: "age", value: [30, 40] },
+    ]);
+    expect(mockRouter.query).toEqual({
+      columnFilters: "age.%5B30%2C40%5D",
+    });
+
+    act(() => {
+      result.current.getFlatHeaders()[2]?.column.setFilterValue([]);
+    });
+    rerender();
+    expect(result.current.getState().columnFilters).toEqual([]);
+    expect(mockRouter.query).toEqual({});
+  });
+});