next-helios-fe 1.4.11 → 1.4.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.4.11",
+  "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;
@@ -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 (