update search filter

- add debounce
- set default value page to 1 each time search

src/pages/menu/manage-menu/blocks/ListToolbar.tsx

@@ -1,12 +1,14 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageMenusContext } from '../hooks/useManageMenusContext';
 import { Button } from '@/components/ui/button';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useManageMenusContext();
-  const [searchValue, setSearchValue] = useState('');
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('name')?.getFilterValue() as string) ?? ''
+  );
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === 'Enter') {
@@ -18,6 +20,15 @@ const ListToolbar = () => {
     table.getColumn('name')?.setFilterValue(searchValue);
   };
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('name')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
+
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
@@ -30,25 +41,12 @@ const ListToolbar = () => {
                 placeholder="Search Menu"
                 value={searchValue}
                 onChange={(event) => setSearchValue(event.target.value)}
-                onKeyDown={handleKeyDown}
               />
             </label>
-            <DefaultTooltip title={'Search'} placement={'top'}>
+            {/* <DefaultTooltip title={'Search'} placement={'top'}>
               <Button variant="outline" className="h-7.5" onClick={handleSearch}>
                 <KeenIcon icon="magnifier" />
               </Button>
-            </DefaultTooltip>
-            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
-              <Button
-                variant="outline"
-                className="h-7.5 disabled:bg-gray-400"
-                // disabled={isLoading}
-                // onClick={handleFilterData}
-              >
-                {/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
-            {/* <KeenIcon icon="filter" />
->>>>>>> raja
-              </Button>
             </DefaultTooltip> */}
           </div>
           <div className="flex gap-3 items-center">