next-helios-fe 1.4.36 → 1.4.37

package/package.json

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

package/src/components/table/index.tsx

@@ -78,6 +78,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 +94,6 @@ export const Table: TableComponentProps = ({
     column: "",
     order: "",
   });
-  const [excluded, setExcluded] = useState<string[]>([]);
 
   const height =
     options?.height === "fit"
@@ -118,10 +118,6 @@ export const Table: TableComponentProps = ({
     }
   }, [selected]);
 
-  useEffect(() => {
-    setPage(1);
-  }, [search, filter, categoryFilter]);
-
   useEffect(() => {
     setFilter(
       header.map((item) => {
@@ -180,12 +176,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 +198,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 +228,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
@@ -403,7 +412,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 +513,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 +526,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>