next-helios-fe 1.4.36 → 1.4.38

package/package.json

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

package/src/components/table/index.tsx

@@ -55,12 +55,14 @@ interface TableProps {
       id: number | string;
       [key: string]: any;
     }[];
-    onCheck?: (
-      checked: {
-        id: number | string;
-        [key: string]: any;
-      }[]
-    ) => void;
+    onChange?: (e: {
+      target: {
+        checked: {
+          id: number | string;
+          [key: string]: any;
+        }[];
+      };
+    }) => void;
   };
   actionColumn?: (e: any) => React.ReactNode;
 }
@@ -78,6 +80,7 @@ export const Table: TableComponentProps = ({
   actionColumn,
 }) => {
   const paginationRef = useRef<HTMLDivElement>(null);
+  const [excludedColumn, setExcludedColumn] = useState<string[]>([]);
   const [search, setSearch] = useState<string>("");
   const [filter, setFilter] = useState<any[]>([]);
   const [categoryFilter, setCategoryFilter] = useState<any[]>([]);
@@ -93,7 +96,6 @@ export const Table: TableComponentProps = ({
     column: "",
     order: "",
   });
-  const [excluded, setExcluded] = useState<string[]>([]);
 
   const height =
     options?.height === "fit"
@@ -107,21 +109,20 @@ export const Table: TableComponentProps = ({
       : "flex-1 h-full";
 
   useEffect(() => {
-    if (checkbox?.checked) {
+    if (checkbox?.checked && checkbox?.checked?.length !== 0) {
       setSelected(checkbox?.checked);
     }
   }, [checkbox]);
 
   useEffect(() => {
-    if (selected.length !== 0) {
-      checkbox?.onCheck && checkbox.onCheck(selected);
-    }
+    checkbox?.onChange &&
+      checkbox.onChange({
+        target: {
+          checked: selected,
+        },
+      });
   }, [selected]);
 
-  useEffect(() => {
-    setPage(1);
-  }, [search, filter, categoryFilter]);
-
   useEffect(() => {
     setFilter(
       header.map((item) => {
@@ -180,12 +181,14 @@ export const Table: TableComponentProps = ({
         if (search === "") {
           return item;
         } else if (
-          header.some((headerItem) => {
-            return item[headerItem.key as keyof typeof item]
-              ?.toString()
-              ?.toLowerCase()
-              ?.includes(search.toLowerCase());
-          })
+          header
+            .filter((item) => !excludedColumn.includes(item.key))
+            .some((headerItem) => {
+              return item[headerItem.key as keyof typeof item]
+                ?.toString()
+                ?.toLowerCase()
+                ?.includes(search.toLowerCase());
+            })
         ) {
           return item;
         }
@@ -200,6 +203,7 @@ export const Table: TableComponentProps = ({
       })
       .filter((item) => {
         return header
+          .filter((item) => !excludedColumn.includes(item.key))
           .filter((headerItem) => headerItem.type === "category")
           .every((headerItem) => {
             return categoryFilter.includes(
@@ -229,8 +233,18 @@ export const Table: TableComponentProps = ({
     }
   }, [header, data, filter, categoryFilter, search, sortBy]);
 
+  useEffect(() => {
+    if (page > Math.ceil(filteredData.length / maxRow)) {
+      setPage(1);
+      paginationRef.current?.scrollTo({
+        left: 0,
+        behavior: "smooth",
+      });
+    }
+  }, [filteredData]);
+
   const headerArr = header
-    ?.filter((item) => !excluded.includes(item.key))
+    ?.filter((item) => !excludedColumn.includes(item.key))
     ?.map((item) => {
       return (
         <th
@@ -385,7 +399,7 @@ export const Table: TableComponentProps = ({
                     ? true
                     : false
                 }
-                onChange={(e) => {
+                onClick={() => {
                   if (
                     selected.find((selectedItem) => selectedItem.id === item.id)
                   ) {
@@ -403,7 +417,7 @@ export const Table: TableComponentProps = ({
             </td>
           )}
           {header
-            ?.filter((headerItem) => !excluded.includes(headerItem.key))
+            ?.filter((headerItem) => !excludedColumn.includes(headerItem.key))
             ?.map((headerItem) => {
               if (headerItem?.render) {
                 return (
@@ -504,12 +518,12 @@ export const Table: TableComponentProps = ({
                     <Dropdown.Item
                       key={item.key}
                       onClick={() => {
-                        if (excluded.includes(item.key)) {
-                          setExcluded(
-                            excluded.filter((prev) => prev !== item.key)
+                        if (excludedColumn.includes(item.key)) {
+                          setExcludedColumn(
+                            excludedColumn.filter((prev) => prev !== item.key)
                           );
                         } else {
-                          setExcluded([...excluded, item.key]);
+                          setExcludedColumn([...excludedColumn, item.key]);
                         }
                       }}
                     >
@@ -517,7 +531,7 @@ export const Table: TableComponentProps = ({
                         <Form.Checkbox
                           options={{ disableHover: true }}
                           label={item.title}
-                          checked={!excluded.includes(item.key)}
+                          checked={!excludedColumn.includes(item.key)}
                         />
                       </div>
                     </Dropdown.Item>