1 files changed, 49 insertions, 0 deletions
diff --git a/components/data-table/data-table-grobal-filter.tsx b/components/data-table/data-table-grobal-filter.tsx
new file mode 100644
index 00000000..a1f0a6f3
--- /dev/null
+++ b/components/data-table/data-table-grobal-filter.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import * as React from "react"
+import { useQueryState } from "nuqs"
+import { Input } from "@/components/ui/input"
+import { useDebouncedCallback } from "@/hooks/use-debounced-callback"
+
+/**
+ * A generic "Global Filter" input that syncs its value with `?search=...` in the URL (shallow).
+ * Uses a custom `useDebouncedCallback` to reduce rapid updates.
+ */
+export function DataTableGlobalFilter() {
+  // The actual "search" state is still read/written from URL
+  const [searchValue, setSearchValue] = useQueryState("search", {
+    parse: (str) => str,
+    serialize: (val) => val,
+    eq: (a, b) => a === b,
+    clearOnDefault: true,
+    shallow: false, 
+  })
+
+  // Local tempValue to update instantly on user keystroke
+  const [tempValue, setTempValue] = React.useState(searchValue ?? "")
+
+  // Debounced callback that sets the URL param after `delay` ms
+  const debouncedSetSearch = useDebouncedCallback((value: string) => {
+    setSearchValue(value)
+  }, 300) // 300ms or chosen delay
+
+  // When user types, update local `tempValue` immediately,
+  // then call the debounced function to update the query param
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value
+    setTempValue(val)
+    debouncedSetSearch(val)
+  }
+
+  // Debug
+  console.log("tempValue:", tempValue, "searchValue:", searchValue)
+
+  return (
+    <Input
+      value={tempValue}
+      onChange={handleChange}
+      placeholder="Search..."
+      className="h-8 w-24 sm:w-40"
+    />
+  )
+}
+\ No newline at end of file