adding button on search on masterdata

src/pages/master/profession/blocks/ListToolbar.tsx

@@ -1,10 +1,27 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageProfessionContext } from '../hooks/useManageProfessionContext';
 import { Button } from '@/components/ui/button';
+import { useState } from 'react';
+import { set } from 'date-fns';
 
 const ListToolbar = () => {
   const { reload, table } = useDataGrid();
   const { handleAddDialog } = useManageProfessionContext();
+  const [searchProfession, setSearchProfession]= useState('');
+
+  const handleKeyDown = (event: React.KeyboardEvent) =>{
+    if(event.key==='Enter'){
+      handleSearch();
+    }
+  }
+
+  const handleSearch = () =>{
+    table.getColumn('name')?.setFilterValue(searchProfession);
+    table.setPageIndex(0);
+  }
+
+
+
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -16,12 +33,18 @@ const ListToolbar = () => {
               <input
                 type="text"
                 placeholder="Search Profession"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                value={searchProfession}
                 onChange={(event) =>
-                  table.getColumn('name')?.setFilterValue(event.target.value)
+                  setSearchProfession(event.target.value)
                 }
+                onKeyDown={handleKeyDown}
               />
             </label>
+            <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"

src/pages/master/profession/hooks/ManageProfessionContext.tsx

@@ -102,7 +102,7 @@ const ManageProfessionContextProvider = ({ children }: { children: React.ReactNo
           );
         },
         meta: {
-          headerClassName: 'w-[100px]',
+          headerClassName: 'w-[100px] text-center',
           cellClassName: 'text-center'
         }
       }
@@ -151,7 +151,7 @@ const ManageProfessionContextProvider = ({ children }: { children: React.ReactNo
         pagination={{ size: 10 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
-        sorting={[{ id: 'id', desc: false }]}
+        sorting={[{ id: 'name', desc: false }]}
         serverSide={true}
         onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
           getProfessionLists(pageIndex, pageSize, sorting, columnFilters)