1 files changed, 59 insertions, 0 deletions
diff --git a/components/client-table-v2/client-table-toolbar.tsx b/components/client-table-v2/client-table-toolbar.tsx
new file mode 100644
index 00000000..089501e1
--- /dev/null
+++ b/components/client-table-v2/client-table-toolbar.tsx
@@ -0,0 +1,59 @@
+"use client"
+
+import * as React from "react"
+import { Search, Download } from "lucide-react"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+
+interface ClientTableToolbarProps {
+  globalFilter: string
+  setGlobalFilter: (value: string) => void
+  totalRows: number
+  visibleRows: number
+  onExport?: () => void
+  actions?: React.ReactNode
+  customToolbar?: React.ReactNode
+  viewOptions?: React.ReactNode
+}
+
+export function ClientTableToolbar({
+  globalFilter,
+  setGlobalFilter,
+  totalRows,
+  visibleRows,
+  onExport,
+  actions,
+  customToolbar,
+  viewOptions,
+}: ClientTableToolbarProps) {
+  return (
+    <div className="flex w-full items-center justify-between gap-4 p-1 overflow-x-auto">
+      <div className="flex items-center gap-2">
+        <div className="relative max-w-sm min-w-[200px]">
+          <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="Search all columns..."
+            value={globalFilter ?? ""}
+            onChange={(e) => setGlobalFilter(e.target.value)}
+            className="pl-8"
+          />
+        </div>
+        <div className="text-sm text-muted-foreground whitespace-nowrap">
+          Showing {visibleRows} of {totalRows}
+        </div>
+        {viewOptions}
+        {onExport && (
+          <Button onClick={onExport} variant="outline" size="sm">
+            <Download className="mr-2 h-4 w-4" />
+            Export
+          </Button>
+        )}  
+      </div>
+
+      <div className="flex items-center gap-2 shrink-0">
+        {customToolbar}
+        {actions}
+      </div>
+    </div>
+  )
+}