Added search to table

src/dashboards/MasterStatistical.tsx

@@ -16,6 +16,7 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import Checkbox from "@/components/Low/Checkbox";
+import { useListSearch } from "@/hooks/useListSearch";
 
 interface Props {
   corporateUsers: User[];
@@ -24,6 +25,7 @@ interface Props {
 
 interface TableData {
   user: string;
+  email: string;
   correct: number;
   corporate: string;
   submitted: boolean;
@@ -37,6 +39,8 @@ interface UserCount {
   maxUserCount: number;
 }
 
+const searchFilters = [["email"], ["user"], ["userId"], ];
+
 const MasterStatistical = (props: Props) => {
   const { users, corporateUsers } = props;
 
@@ -72,10 +76,12 @@ const MasterStatistical = (props: Props) => {
         const userResults = a.assignees.map((assignee) => {
           const userStats =
             a.results.find((r) => r.user === assignee)?.stats || [];
-          const userName = users.find((u) => u.id === assignee)?.name || "";
+          const userData = users.find((u) => u.id === assignee)
           const corporate = users.find((u) => u.id === a.assigner)?.name || "";
           const commonData = {
-            user: userName,
+            user: userData?.name || "",
+            email: userData?.email || "",
+            userId: assignee,
             corporateId: a.corporateId,
             corporate,
             assignment: a.name,
@@ -146,6 +152,13 @@ const MasterStatistical = (props: Props) => {
         return <span>{info.getValue()}</span>;
       },
     }),
+    columnHelper.accessor("email", {
+      header: "Email",
+      id: "email",
+      cell: (info) => {
+        return <span>{info.getValue()}</span>;
+      },
+    }),
     columnHelper.accessor("corporate", {
       header: "Corporate",
       id: "corporate",
@@ -192,12 +205,19 @@ const MasterStatistical = (props: Props) => {
     }),
   ];
 
+  const { rows: filteredRows, renderSearch } = useListSearch(
+    searchFilters,
+    tableResults,
+  );
+
   const table = useReactTable({
-    data: tableResults,
+    data: filteredRows,
     columns: defaultColumns,
     getCoreRowModel: getCoreRowModel(),
   });
 
+  
+
   const areAllSelected = selectedCorporates.length === corporates.length;
 
   const getStudentsConsolidateScore = () => {
@@ -261,7 +281,8 @@ const MasterStatistical = (props: Props) => {
           );
         })}
       </div>
-      <div className="flex flex-col gap-3 w-full">
+      <div className="flex gap-3 w-full">
+        <div className="flex flex-col gap-3">
         <label className="font-normal text-base text-mti-gray-dim">Date</label>
         <ReactDatePicker
           dateFormat="dd/MM/yyyy"
@@ -283,6 +304,9 @@ const MasterStatistical = (props: Props) => {
           }}
         />
         </div>
+        {renderSearch()}
+      </div>
+
       <div>
         <table className="rounded-xl h-full bg-mti-purple-ultralight/40 w-full">
           <thead>