From 8ac5bac222d18c329fe31cbc6b20414feea63ed8 Mon Sep 17 00:00:00 2001
From: mpsalunggg <putrasatria893@gmail.com>
Date: Sat, 20 Sep 2025 20:17:35 +0700
Subject: [PATCH] feat: create clear filter search table toolbar

---
 src/components/common/TableData/TableToolbar.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/common/TableData/TableToolbar.tsx b/src/components/common/TableData/TableToolbar.tsx
index ff669ca..4406ec2 100644
--- a/src/components/common/TableData/TableToolbar.tsx
+++ b/src/components/common/TableData/TableToolbar.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { Input } from "@/components/ui/Input";
-import { Search } from "lucide-react";
+import { useQueryParams } from "@/hooks";
+import { Search, X } from "lucide-react";
 
 interface TableToolbarProps {
   searchable?: boolean;
@@ -18,6 +19,13 @@ export const TableToolbar = ({
   onSearchChange,
   rightAction,
 }: TableToolbarProps) => {
+  const { setParam } = useQueryParams();
+
+  const clearSearch = () => {
+    setParam("search", "");
+    onSearchChange?.("");
+  };
+
   return (
     <div className="flex items-center justify-between gap-4">
       {/* Search Section */}
@@ -30,6 +38,7 @@ export const TableToolbar = ({
               value={searchValue}
               onChange={(e) => onSearchChange?.(e.target.value)}
               className="pl-10"
+              suffix={searchValue && <X className="w-5 cursor-pointer" onClick={clearSearch} />}
             />
           </div>
         )}