next-helios-fe 1.8.121 → 1.8.122

package/package.json

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

package/src/components/table/index.tsx

@@ -117,6 +117,8 @@ export const Table: TableComponentProps = ({
     column: "",
     order: "",
   });
+  const [isReadyForDynamicValue, setIsReadyForDynamicValue] =
+    useState<boolean>(false);
 
   const height =
     options?.height === "fit"
@@ -148,36 +150,43 @@ export const Table: TableComponentProps = ({
       })
     );
 
-    const tempCategoryFilter: any = {};
+    if (data.length !== 0) {
+      const tempCategoryFilter: any = {};
 
-    header
-      ?.filter((item) => item.type === "category")
-      ?.map((item) => {
-        const tempDataByCategory: string[] = [];
+      header
+        ?.filter((item) => item.type === "category")
+        ?.map((item) => {
+          const tempDataByCategory: string[] = [];
 
-        data
-          .map((dataItem) => dataItem[item.key as keyof typeof dataItem])
-          .sort((a, b) =>
-            (a === undefined
-              ? "undefined"
-              : a === null
-              ? "null"
-              : a.toString()
-            ).localeCompare(
-              b === undefined ? "undefined" : b === null ? "null" : b.toString()
+          data
+            .map((dataItem) => dataItem[item.key as keyof typeof dataItem])
+            .sort((a, b) =>
+              (a === undefined
+                ? "undefined"
+                : a === null
+                ? "null"
+                : a.toString()
+              ).localeCompare(
+                b === undefined
+                  ? "undefined"
+                  : b === null
+                  ? "null"
+                  : b.toString()
+              )
             )
-          )
-          .filter((value, index, self) => self.indexOf(value) === index)
-          .map((value) => {
-            if (!tempDataByCategory.includes(value)) {
-              tempDataByCategory.push(value);
-            }
-          });
+            .filter((value, index, self) => self.indexOf(value) === index)
+            .map((value) => {
+              if (!tempDataByCategory.includes(value)) {
+                tempDataByCategory.push(value);
+              }
+            });
 
-        tempCategoryFilter[item.key] = tempDataByCategory;
-      });
+          tempCategoryFilter[item.key] = tempDataByCategory;
+        });
 
-    setCategoryFilter(tempCategoryFilter);
+      setCategoryFilter(tempCategoryFilter);
+      setIsReadyForDynamicValue(true);
+    }
   }, [data]);
 
   useEffect(() => {
@@ -299,17 +308,27 @@ export const Table: TableComponentProps = ({
 
   useEffect(() => {
     if (getDynamicTableValue) {
-      getDynamicTableValue({
-        search,
-        page,
-        dataOffset: (page - 1) * maxRow,
-        maxRow,
-        filter,
-        categoryFilter,
-        sortBy,
-      });
+      if (isReadyForDynamicValue) {
+        getDynamicTableValue({
+          search,
+          page,
+          dataOffset: (page - 1) * maxRow,
+          maxRow,
+          filter,
+          categoryFilter,
+          sortBy,
+        });
+      }
     }
-  }, [search, page, maxRow, filter, categoryFilter, sortBy]);
+  }, [
+    isReadyForDynamicValue,
+    search,
+    page,
+    maxRow,
+    filter,
+    categoryFilter,
+    sortBy,
+  ]);
 
   const headerArr = header
     ?.filter((item) => !excludedColumn?.includes(item.key))
@@ -396,7 +415,7 @@ export const Table: TableComponentProps = ({
                             onClick={() => {
                               const tempCategoryFilter = { ...categoryFilter };
 
-                              if (categoryFilter[item.key].includes(value)) {
+                              if (categoryFilter[item.key]?.includes(value)) {
                                 tempCategoryFilter[item.key] = categoryFilter[
                                   item.key
                                 ].filter(
@@ -424,7 +443,7 @@ export const Table: TableComponentProps = ({
                                     : value?.toString()
                                 }
                                 checked={
-                                  categoryFilter[item.key].includes(value) ??
+                                  categoryFilter[item.key]?.includes(value) ??
                                   false
                                 }
                                 readOnly
@@ -568,7 +587,7 @@ export const Table: TableComponentProps = ({
               return (
                 <td
                   key={headerItem.key}
-                  className="max-w-60 bg-secondary-bg px-4 py-1.5"
+                  className="min-w-32 max-w-60 bg-secondary-bg px-4 py-1.5"
                 >
                   <Tooltip
                     content={item[headerItem.key as keyof typeof item] || "-"}