next-helios-fe 1.1.9 → 1.1.10

package/package.json

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

package/src/components/table/index.tsx

@@ -8,20 +8,33 @@ import { Action, type ActionProps } from "./action";
 
 interface TableProps {
   title?: string;
-
   header: {
     title: string;
     key: string;
     render?: (item: any) => React.ReactNode;
   }[];
-  data: any[];
+  data: {
+    id: number | string;
+    [key: string]: any;
+  }[];
   options?: {
     hideToolbar?: boolean;
     hideNumberColumn?: boolean;
-    checkbox?: boolean;
-    height?: "full" | "fit" | "20" | "40" | "80";
+    enableBorder?: boolean;
     maxRow?: 10 | 20 | 50 | 100;
-    border?: boolean;
+    height?: "full" | "fit" | "20" | "40" | "80";
+  };
+  checkbox?: {
+    checked?: {
+      id: number | string;
+      [key: string]: any;
+    }[];
+    onChecked?: (
+      checked: {
+        id: number | string;
+        [key: string]: any;
+      }[]
+    ) => void;
   };
   actions?: (e: any) => React.ReactNode;
   onAddData?: (e: React.MouseEvent<HTMLButtonElement>) => void;
@@ -36,6 +49,7 @@ export const Table: TableComponentProps = ({
   header,
   data,
   options,
+  checkbox,
   actions,
   onAddData,
 }) => {
@@ -43,7 +57,12 @@ export const Table: TableComponentProps = ({
   const [filter, setFilter] = useState<any[]>([]);
   const [maxRow, setMaxRow] = useState<number>(options?.maxRow || 10);
   const [page, setPage] = useState<number>(1);
-  const [selected, setSelected] = useState<number[]>([]);
+  const [selected, setSelected] = useState<
+    {
+      id: number | string;
+      [key: string]: any;
+    }[]
+  >([]);
   const [sortBy, setSortBy] = useState<string[]>(["", ""]);
   const [excluded, setExcluded] = useState<string[]>([]);
 
@@ -66,6 +85,18 @@ export const Table: TableComponentProps = ({
     );
   }, [header]);
 
+  useEffect(() => {
+    if (checkbox?.checked) {
+      setSelected(checkbox?.checked);
+    }
+  }, [checkbox]);
+
+  useEffect(() => {
+    if (selected.length !== 0) {
+      checkbox?.onChecked && checkbox.onChecked(selected);
+    }
+  }, [selected]);
+
   const filteredData = useMemo(() => {
     return data
       ?.filter((item) => {
@@ -180,16 +211,22 @@ export const Table: TableComponentProps = ({
     ?.map((item, index) => {
       return (
         <tr key={item.id}>
-          {options?.checkbox && (
+          {checkbox && (
             <td className="sticky left-0 w-8 px-4 py-1 border-b bg-secondary-bg">
               <Form.Checkbox
                 options={{ disableHover: true }}
-                checked={selected.includes(item.id)}
+                checked={
+                  selected.find((selectedItem) => selectedItem.id === item.id)
+                    ? true
+                    : false
+                }
                 onChange={(e) => {
-                  if (selected.includes(item.id)) {
-                    setSelected(selected.filter((prev) => prev !== item.id));
+                  if (
+                    selected.find((selectedItem) => selectedItem.id === item.id)
+                  ) {
+                    setSelected(selected.filter((prev) => prev.id !== item.id));
                   } else {
-                    setSelected([...selected, item.id]);
+                    setSelected((prev) => [...prev, item]);
                   }
                 }}
               />
@@ -307,13 +344,13 @@ export const Table: TableComponentProps = ({
       )}
       <div
         className={`overflow-auto ${height} ${
-          options?.border && "border rounded-md"
+          options?.enableBorder && "border rounded-md"
         }`}
       >
         <table className="w-full text-sm overflow-x-auto">
           <thead className="sticky top-0 z-10 border-b">
             <tr>
-              {options?.checkbox && (
+              {checkbox && (
                 <th className="sticky left-0 w-8 px-4 py-2 bg-secondary-bg">
                   <div className="flex flex-col">
                     <Form.Checkbox
@@ -323,7 +360,7 @@ export const Table: TableComponentProps = ({
                         if (selected.length === data.length) {
                           setSelected([]);
                         } else {
-                          setSelected(data.map((item) => item.id));
+                          setSelected(data.map((item) => item));
                         }
                       }}
                     />