next-helios-fe 1.8.67 → 1.8.68

package/package.json

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

package/src/components/table/index.tsx

@@ -16,10 +16,11 @@ interface TableProps {
     render?: (item: any) => React.ReactNode;
   }[];
   data: {
-    id: number | string;
+    id?: number | string;
     [key: string]: any;
   }[];
   options?: {
+    customDataIdName?: string;
     toolbar?: {
       addData?: {
         show?: boolean;
@@ -54,12 +55,12 @@ interface TableProps {
   };
   checkbox?: {
     checked: {
-      id: number | string;
+      id?: number | string;
       [key: string]: any;
     }[];
     onChange: (
       checked: {
-        id: number | string;
+        id?: number | string;
         [key: string]: any;
       }[]
     ) => void;
@@ -90,7 +91,7 @@ export const Table: TableComponentProps = ({
   const [page, setPage] = useState<number>(1);
   const [selected, setSelected] = useState<
     {
-      id: number | string;
+      id?: number | string;
       [key: string]: any;
     }[]
   >([]);
@@ -224,7 +225,10 @@ export const Table: TableComponentProps = ({
     } else {
       return tempData?.sort((a, b): any => {
         if (sortBy?.column === "") {
-          return a.id > b.id ? 1 : -1;
+          return a?.[options?.customDataIdName ?? "id"] >
+            b?.[options?.customDataIdName ?? "id"]
+            ? 1
+            : -1;
         } else if (sortBy?.order === "asc") {
           return a[sortBy?.column as keyof typeof a] >
             b[sortBy?.column as keyof typeof b]
@@ -400,28 +404,44 @@ export const Table: TableComponentProps = ({
       : filteredData
   )?.map((item, index) => {
     return (
-      <tr key={item.id}>
+      <tr key={item?.[options?.customDataIdName ?? "id"]}>
         {checkbox && (
           <td className="sticky left-0 w-8 px-4 py-1.5 bg-secondary-bg">
             <Form.Checkbox
               options={{ disableHover: true }}
               checked={
-                selected?.find((selectedItem) => selectedItem.id === item.id)
+                selected?.find(
+                  (selectedItem) =>
+                    selectedItem?.[options?.customDataIdName ?? "id"] ===
+                    item?.[options?.customDataIdName ?? "id"]
+                )
                   ? true
                   : false
               }
               readOnly
               onClick={(e) => {
                 if (
-                  selected?.find((selectedItem) => selectedItem.id === item.id)
+                  selected?.find(
+                    (selectedItem) =>
+                      selectedItem?.[options?.customDataIdName ?? "id"] ===
+                      item?.[options?.customDataIdName ?? "id"]
+                  )
                 ) {
                   if (checkbox?.onChange) {
                     checkbox?.onChange(
-                      selected?.filter((prev) => prev.id !== item.id)
+                      selected?.filter(
+                        (prev) =>
+                          prev?.[options?.customDataIdName ?? "id"] !==
+                          item?.[options?.customDataIdName ?? "id"]
+                      )
                     );
                   } else {
                     setSelected(
-                      selected?.filter((prev) => prev.id !== item.id)
+                      selected?.filter(
+                        (prev) =>
+                          prev?.[options?.customDataIdName ?? "id"] !==
+                          item?.[options?.customDataIdName ?? "id"]
+                      )
                     );
                   }
                 } else {