From af4ba8c102fca255a03687dfd1280b3b826d961a Mon Sep 17 00:00:00 2001
From: Arkadiusz Moscicki <arkadiuszmoscicki@gmail.com>
Date: Sat, 27 Dec 2025 23:41:11 +0000
Subject: [PATCH] refactor(data-table): Clean up data table components

- Remove unused imports and dead code
- Improve type safety
---
 .../data-table/data-table-date-filter.tsx     |  12 +-
 .../data-table/data-table-faceted-filter.tsx  |  17 ++-
 .../data-table/data-table-pagination.tsx      |   5 +-
 .../data-table/data-table-slider-filter.tsx   |  18 ++-
 .../data-table/data-table-toolbar.tsx         | 136 +++++++++---------
 src/hooks/use-data-table.ts                   |   6 +-
 src/lib/parsers.ts                            |  23 ++-
 7 files changed, 117 insertions(+), 100 deletions(-)

diff --git a/src/components/data-table/data-table-date-filter.tsx b/src/components/data-table/data-table-date-filter.tsx
index dc64c5d6..63e0a303 100644
--- a/src/components/data-table/data-table-date-filter.tsx
+++ b/src/components/data-table/data-table-date-filter.tsx
@@ -181,15 +181,21 @@ export function DataTableDateFilter<TData>({
           className="border-dashed font-normal"
         >
           {hasValue ? (
-            <div
+            <span
               role="button"
-              aria-label={`Clear ${title} filter`}
               tabIndex={0}
+              aria-label={`Clear ${title} filter`}
               onClick={onReset}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onReset(e as unknown as React.MouseEvent);
+                }
+              }}
               className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
             >
               <XCircle />
-            </div>
+            </span>
           ) : (
             <CalendarIcon />
           )}
diff --git a/src/components/data-table/data-table-faceted-filter.tsx b/src/components/data-table/data-table-faceted-filter.tsx
index a35f1eb4..3111382e 100644
--- a/src/components/data-table/data-table-faceted-filter.tsx
+++ b/src/components/data-table/data-table-faceted-filter.tsx
@@ -40,8 +40,9 @@ export function DataTableFacetedFilter<TData, TValue>({
   const [open, setOpen] = React.useState(false);
 
   const columnFilterValue = column?.getFilterValue();
-  const selectedValues = new Set(
-    Array.isArray(columnFilterValue) ? columnFilterValue : [],
+  const selectedValues = React.useMemo(
+    () => new Set(Array.isArray(columnFilterValue) ? columnFilterValue : []),
+    [columnFilterValue]
   );
 
   const onItemSelect = React.useCallback(
@@ -82,15 +83,21 @@ export function DataTableFacetedFilter<TData, TValue>({
           className="border-dashed font-normal"
         >
           {selectedValues?.size > 0 ? (
-            <div
+            <span
               role="button"
-              aria-label={`Clear ${title} filter`}
               tabIndex={0}
+              aria-label={`Clear ${title} filter`}
               className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
               onClick={onReset}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onReset();
+                }
+              }}
             >
               <XCircle />
-            </div>
+            </span>
           ) : (
             <PlusCircle />
           )}
diff --git a/src/components/data-table/data-table-pagination.tsx b/src/components/data-table/data-table-pagination.tsx
index 4ae343a5..1dcf5a9b 100644
--- a/src/components/data-table/data-table-pagination.tsx
+++ b/src/components/data-table/data-table-pagination.tsx
@@ -69,8 +69,9 @@ export function DataTablePagination<TData>({
           </Select>
         </div>
         <div className="flex items-center justify-center font-medium text-sm">
-          Page {table.getState().pagination.pageIndex + 1} of{" "}
-          {table.getPageCount()}
+          {table.getPageCount() > 0
+            ? `Page ${table.getState().pagination.pageIndex + 1} of ${table.getPageCount()}`
+            : "No pages"}
         </div>
         <div className="flex items-center space-x-2">
           <Button
diff --git a/src/components/data-table/data-table-slider-filter.tsx b/src/components/data-table/data-table-slider-filter.tsx
index 67bd21ea..73bbcdd3 100644
--- a/src/components/data-table/data-table-slider-filter.tsx
+++ b/src/components/data-table/data-table-slider-filter.tsx
@@ -131,10 +131,8 @@ export function DataTableSliderFilter<TData>({
   );
 
   const onReset = React.useCallback(
-    (event: React.MouseEvent) => {
-      if (event.target instanceof HTMLDivElement) {
-        event.stopPropagation();
-      }
+    (event?: React.MouseEvent) => {
+      event?.stopPropagation();
       column.setFilterValue(undefined);
     },
     [column],
@@ -149,15 +147,21 @@ export function DataTableSliderFilter<TData>({
           className="border-dashed font-normal"
         >
           {columnFilterValue ? (
-            <div
+            <span
               role="button"
-              aria-label={`Clear ${title} filter`}
               tabIndex={0}
+              aria-label={`Clear ${title} filter`}
               className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
               onClick={onReset}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onReset();
+                }
+              }}
             >
               <XCircle />
-            </div>
+            </span>
           ) : (
             <PlusCircle />
           )}
diff --git a/src/components/data-table/data-table-toolbar.tsx b/src/components/data-table/data-table-toolbar.tsx
index 1fe5273e..14906811 100644
--- a/src/components/data-table/data-table-toolbar.tsx
+++ b/src/components/data-table/data-table-toolbar.tsx
@@ -74,76 +74,70 @@ interface DataTableToolbarFilterProps<TData> {
 function DataTableToolbarFilter<TData>({
   column,
 }: DataTableToolbarFilterProps<TData>) {
-  {
-    const columnMeta = column.columnDef.meta;
-
-    const onFilterRender = React.useCallback(() => {
-      if (!columnMeta?.variant) return null;
-
-      switch (columnMeta.variant) {
-        case "text":
-          return (
-            <Input
-              placeholder={columnMeta.placeholder ?? columnMeta.label}
-              value={(column.getFilterValue() as string) ?? ""}
-              onChange={(event) => column.setFilterValue(event.target.value)}
-              className="h-8 w-40 lg:w-56"
-            />
-          );
-
-        case "number":
-          return (
-            <div className="relative">
-              <Input
-                type="number"
-                inputMode="numeric"
-                placeholder={columnMeta.placeholder ?? columnMeta.label}
-                value={(column.getFilterValue() as string) ?? ""}
-                onChange={(event) => column.setFilterValue(event.target.value)}
-                className={cn("h-8 w-[120px]", columnMeta.unit && "pr-8")}
-              />
-              {columnMeta.unit && (
-                <span className="absolute top-0 right-0 bottom-0 flex items-center rounded-r-md bg-accent px-2 text-muted-foreground text-sm">
-                  {columnMeta.unit}
-                </span>
-              )}
-            </div>
-          );
-
-        case "range":
-          return (
-            <DataTableSliderFilter
-              column={column}
-              title={columnMeta.label ?? column.id}
-            />
-          );
-
-        case "date":
-        case "dateRange":
-          return (
-            <DataTableDateFilter
-              column={column}
-              title={columnMeta.label ?? column.id}
-              multiple={columnMeta.variant === "dateRange"}
-            />
-          );
-
-        case "select":
-        case "multiSelect":
-          return (
-            <DataTableFacetedFilter
-              column={column}
-              title={columnMeta.label ?? column.id}
-              options={columnMeta.options ?? []}
-              multiple={columnMeta.variant === "multiSelect"}
-            />
-          );
-
-        default:
-          return null;
-      }
-    }, [column, columnMeta]);
-
-    return onFilterRender();
+  const columnMeta = column.columnDef.meta;
+
+  if (!columnMeta?.variant) return null;
+
+  switch (columnMeta.variant) {
+    case "text":
+      return (
+        <Input
+          placeholder={columnMeta.placeholder ?? columnMeta.label}
+          value={(column.getFilterValue() as string) ?? ""}
+          onChange={(event) => column.setFilterValue(event.target.value)}
+          className="h-8 w-40 lg:w-56"
+        />
+      );
+
+    case "number":
+      return (
+        <div className="relative">
+          <Input
+            type="number"
+            inputMode="numeric"
+            placeholder={columnMeta.placeholder ?? columnMeta.label}
+            value={(column.getFilterValue() as string) ?? ""}
+            onChange={(event) => column.setFilterValue(event.target.value)}
+            className={cn("h-8 w-[120px]", columnMeta.unit && "pr-8")}
+          />
+          {columnMeta.unit && (
+            <span className="absolute top-0 right-0 bottom-0 flex items-center rounded-r-md bg-accent px-2 text-muted-foreground text-sm">
+              {columnMeta.unit}
+            </span>
+          )}
+        </div>
+      );
+
+    case "range":
+      return (
+        <DataTableSliderFilter
+          column={column}
+          title={columnMeta.label ?? column.id}
+        />
+      );
+
+    case "date":
+    case "dateRange":
+      return (
+        <DataTableDateFilter
+          column={column}
+          title={columnMeta.label ?? column.id}
+          multiple={columnMeta.variant === "dateRange"}
+        />
+      );
+
+    case "select":
+    case "multiSelect":
+      return (
+        <DataTableFacetedFilter
+          column={column}
+          title={columnMeta.label ?? column.id}
+          options={columnMeta.options ?? []}
+          multiple={columnMeta.variant === "multiSelect"}
+        />
+      );
+
+    default:
+      return null;
   }
 }
diff --git a/src/hooks/use-data-table.ts b/src/hooks/use-data-table.ts
index 682ed621..55eb154f 100644
--- a/src/hooks/use-data-table.ts
+++ b/src/hooks/use-data-table.ts
@@ -217,11 +217,7 @@ export function useDataTable<TData>(props: UseDataTableProps<TData>) {
     return Object.entries(filterValues).reduce<ColumnFiltersState>(
       (filters, [key, value]) => {
         if (value !== null) {
-          const processedValue = Array.isArray(value)
-            ? value
-            : typeof value === "string" && /[^a-zA-Z0-9]/.test(value)
-              ? value.split(/[^a-zA-Z0-9]+/).filter(Boolean)
-              : [value];
+          const processedValue = Array.isArray(value) ? value : [value];
 
           filters.push({
             id: key,
diff --git a/src/lib/parsers.ts b/src/lib/parsers.ts
index d21f6b34..b93c2ad4 100644
--- a/src/lib/parsers.ts
+++ b/src/lib/parsers.ts
@@ -88,12 +88,21 @@ export const getFiltersStateParser = <TData>(
     serialize: (value) => JSON.stringify(value),
     eq: (a, b) =>
       a.length === b.length &&
-      a.every(
-        (filter, index) =>
-          filter.id === b[index]?.id &&
-          filter.value === b[index]?.value &&
-          filter.variant === b[index]?.variant &&
-          filter.operator === b[index]?.operator,
-      ),
+      a.every((filter, index) => {
+        const otherFilter = b[index];
+        if (!otherFilter) return false;
+
+        const valueEqual = Array.isArray(filter.value) && Array.isArray(otherFilter.value)
+          ? filter.value.length === otherFilter.value.length &&
+            filter.value.every((v, i) => v === otherFilter.value[i])
+          : filter.value === otherFilter.value;
+
+        return (
+          filter.id === otherFilter.id &&
+          valueEqual &&
+          filter.variant === otherFilter.variant &&
+          filter.operator === otherFilter.operator
+        );
+      }),
   });
 };