next-helios-fe 1.4.10 → 1.4.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.4.10",
+  "version": "1.4.12",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/table/index.tsx

@@ -83,7 +83,10 @@ export const Table: TableComponentProps = ({
       [key: string]: any;
     }[]
   >([]);
-  const [sortBy, setSortBy] = useState<string[]>(["", ""]);
+  const [sortBy, setSortBy] = useState<any>({
+    column: "",
+    order: "",
+  });
   const [excluded, setExcluded] = useState<string[]>([]);
 
   const height =
@@ -132,7 +135,7 @@ export const Table: TableComponentProps = ({
   }, [header, data]);
 
   const filteredData = useMemo(() => {
-    return data
+    const tempData = data
       ?.filter((item) => {
         if (search === "") {
           return item;
@@ -140,8 +143,8 @@ export const Table: TableComponentProps = ({
           header.some((headerItem) => {
             return item[headerItem.key as keyof typeof item]
               ?.toString()
-              .toLowerCase()
-              .includes(search.toLowerCase());
+              ?.toLowerCase()
+              ?.includes(search.toLowerCase());
           })
         ) {
           return item;
@@ -150,9 +153,9 @@ export const Table: TableComponentProps = ({
       ?.filter((item) => {
         return filter.every((filterItem) => {
           return item[filterItem.key as keyof typeof item]
-            .toString()
-            .toLowerCase()
-            .includes(filterItem.value.toLowerCase());
+            ?.toString()
+            ?.toLowerCase()
+            ?.includes(filterItem.value.toLowerCase());
         });
       })
       .filter((item) => {
@@ -164,7 +167,27 @@ export const Table: TableComponentProps = ({
             );
           });
       });
-  }, [header, data, filter, categoryFilter, search]);
+
+    if (sortBy.column === "") {
+      return tempData;
+    } else {
+      return tempData?.sort((a, b): any => {
+        if (sortBy.column === "") {
+          return a.id > b.id ? 1 : -1;
+        } else if (sortBy.order === "asc") {
+          return a[sortBy.column as keyof typeof a] >
+            b[sortBy.column as keyof typeof b]
+            ? 1
+            : -1;
+        } else if (sortBy.order === "desc") {
+          return a[sortBy.column as keyof typeof a] <
+            b[sortBy.column as keyof typeof b]
+            ? 1
+            : -1;
+        }
+      });
+    }
+  }, [header, data, filter, categoryFilter, search, sortBy]);
 
   const headerArr = header
     ?.filter((item) => !excluded.includes(item.key))
@@ -180,18 +203,18 @@ export const Table: TableComponentProps = ({
                 type="button"
                 className="group/header flex justify-between items-center gap-4 w-full"
                 onClick={() => {
-                  setSortBy([
-                    sortBy[0] !== item.key
-                      ? item.key
-                      : sortBy[0] === item.key && sortBy[1] === "asc"
-                      ? item.key
-                      : "",
-                    sortBy[0] !== item.key
-                      ? "asc"
-                      : sortBy[0] === item.key && sortBy[1] === "asc"
-                      ? "desc"
-                      : "",
-                  ]);
+                  setSortBy((prev: any) => {
+                    if (prev.column !== item.key) {
+                      return { column: item.key, order: "asc" };
+                    } else if (
+                      prev.column === item.key &&
+                      prev.order === "asc"
+                    ) {
+                      return { column: item.key, order: "desc" };
+                    } else {
+                      return { column: "", order: "" };
+                    }
+                  });
                 }}
               >
                 {item.title}
@@ -309,19 +332,6 @@ export const Table: TableComponentProps = ({
     });
 
   const dataArr = filteredData
-    ?.sort((a, b) => {
-      if (sortBy[1] === "asc") {
-        return a[sortBy[0] as keyof typeof a] > b[sortBy[0] as keyof typeof b]
-          ? 1
-          : -1;
-      } else if (sortBy[1] === "desc") {
-        return a[sortBy[0] as keyof typeof a] < b[sortBy[0] as keyof typeof b]
-          ? 1
-          : -1;
-      } else {
-        return a.id > b.id ? 1 : -1;
-      }
-    })
     ?.slice((page - 1) * maxRow, page * maxRow)
     ?.map((item, index) => {
       return (
@@ -578,7 +588,7 @@ export const Table: TableComponentProps = ({
                 { label: "50", value: "50" },
                 { label: "100", value: "100" },
               ]}
-              value={maxRow.toString()}
+              value={maxRow?.toString()}
               onChange={(e) => {
                 setMaxRow(Number(e.target.value));
               }}