diff --git a/web/src/components/filterlist-table/columns.tsx b/web/src/components/filterlist-table/columns.tsx
index 20ac660bf..82a63b149 100644
--- a/web/src/components/filterlist-table/columns.tsx
+++ b/web/src/components/filterlist-table/columns.tsx
@@ -1,19 +1,17 @@
-"use client";
-
-import { ColumnDef } from "@tanstack/react-table";
+import { createColumnHelper } from "@tanstack/react-table";
 
 export type FilterList = {
   name: string;
   description: string;
 };
 
-export const columns: ColumnDef<FilterList>[] = [
-  {
-    accessorKey: "name",
+const columnHelper = createColumnHelper<FilterList>();
+
+export const columns = [
+  columnHelper.accessor("name", {
     header: "Name",
-  },
-  {
-    accessorKey: "description",
+  }),
+  columnHelper.accessor("description", {
     header: "Description",
-  },
+  }),
 ];
diff --git a/web/src/components/filterlist-table/index.tsx b/web/src/components/filterlist-table/index.tsx
index a06591251..64c6dc23a 100644
--- a/web/src/components/filterlist-table/index.tsx
+++ b/web/src/components/filterlist-table/index.tsx
@@ -6,7 +6,7 @@ import {
   getCoreRowModel,
   getPaginationRowModel,
   flexRender,
-  ColumnDef,
+  AccessorKeyColumnDef,
 } from "@tanstack/react-table";
 import {
   Table,
@@ -22,7 +22,7 @@ import { FilterListTablePagination } from "./pagination";
 import { FilterListTablePaginationSkeleton } from "./skeleton";
 
 interface FilterListTableProps {
-  columns: ColumnDef<FilterList>[];
+  columns: AccessorKeyColumnDef<FilterList, string>[];
   initialData: FilterList[];
 }