@apexcura/ui-components 0.0.14-Beta153 → 0.0.14-Beta155

package/dist/index.js

@@ -730,10 +730,23 @@ var ModelElement = (props) => {
 };
 
 // src/Components/TableElement.tsx
+var import_icons4 = require("@ant-design/icons");
 var TableElement = (props) => {
   const { thead, tbody } = props;
   const [selectedRecord, setSelectedRecord] = (0, import_react20.useState)({});
   const [model, setModel] = (0, import_react20.useState)(false);
+  const [dataSource, setDataSource] = (0, import_react20.useState)([]);
+  (0, import_react20.useEffect)(() => {
+    if (tbody) {
+      setDataSource(
+        tbody.map((row, index) => ({
+          ...row,
+          key: index,
+          index: index + 1
+        }))
+      );
+    }
+  }, [tbody]);
   const handleChange = (record) => {
     console.log("record", record);
     if (props.onChange) {
@@ -745,8 +758,8 @@ var TableElement = (props) => {
     columns = [
       {
         title: "#",
-        dataIndex: "#",
-        key: "#",
+        dataIndex: "index",
+        key: "index",
         fixed: "left"
       },
       ...thead.map((col, ind) => ({
@@ -757,9 +770,9 @@ var TableElement = (props) => {
         render: col.render,
         sorter: {
           compare: (a, b) => {
-            if (typeof a[col.key] === "number" && typeof a[col.key] === "number") {
+            if (typeof a[col.key] === "number" && typeof b[col.key] === "number") {
               return a[col.key] - b[col.key];
-            } else if (typeof a[col.key] === "string" && typeof a[col.key] === "string") {
+            } else if (typeof a[col.key] === "string" && typeof b[col.key] === "string") {
               return a[col.key].localeCompare(b[col.key]);
             }
           }
@@ -783,17 +796,21 @@ var TableElement = (props) => {
                 }
               }
             },
-            "View"
+            /* @__PURE__ */ import_react20.default.createElement(import_icons4.EyeOutlined, null)
           );
         }
       });
     }
   }
-  const dataSource = tbody && tbody.map((row, index) => ({
-    ...row,
-    key: index + 1,
-    [columns[0].key]: index + 1
-  }));
+  const onChangeTable = (pagination, filters, sorter) => {
+    const { currentDataSource } = sorter;
+    setDataSource(
+      currentDataSource.map((row, index) => ({
+        ...row,
+        index: index + 1
+      }))
+    );
+  };
   const count = dataSource ? dataSource.length : 0;
   const onChangePage = (page, pageSize) => {
     if (props.onChange) {
@@ -822,9 +839,19 @@ var TableElement = (props) => {
       dataSource,
       columns,
       size: props.size,
-      bordered: true
+      bordered: true,
+      onChange: onChangeTable
+    }
+  ), model && /* @__PURE__ */ import_react20.default.createElement(
+    ModelElement,
+    {
+      selectedRecord,
+      ...props,
+      columns,
+      model,
+      onCancel: () => setModel(false)
     }
-  ), model && /* @__PURE__ */ import_react20.default.createElement(ModelElement, { selectedRecord, ...props, columns, model, onCancel: () => setModel(false) }));
+  ));
 };
 
 // src/Components/DatePicker.tsx
@@ -958,7 +985,7 @@ var DropDownGroup = (props) => {
 // src/Components/FilesUpload.tsx
 var import_react26 = __toESM(require("react"));
 var import_antd19 = require("antd");
-var import_icons4 = require("@ant-design/icons");
+var import_icons5 = require("@ant-design/icons");
 var FileUpload = (props) => {
   const { Dragger } = import_antd19.Upload;
   const [files, setFiles] = (0, import_react26.useState)([]);
@@ -989,7 +1016,7 @@ var FileUpload = (props) => {
       showUploadList: true,
       customRequest
     },
-    /* @__PURE__ */ import_react26.default.createElement("p", null, /* @__PURE__ */ import_react26.default.createElement(import_icons4.InboxOutlined, null)),
+    /* @__PURE__ */ import_react26.default.createElement("p", null, /* @__PURE__ */ import_react26.default.createElement(import_icons5.InboxOutlined, null)),
     /* @__PURE__ */ import_react26.default.createElement("p", null, "Click or drag file to upload")
   ));
 };

package/dist/index.mjs

@@ -608,7 +608,7 @@ var Navbar = (props) => {
 };
 
 // src/Components/TableElement.tsx
-import React20, { useState as useState6 } from "react";
+import React20, { useState as useState6, useEffect as useEffect3 } from "react";
 import { Table as Table2 } from "antd";
 
 // src/Components/Model.tsx
@@ -664,10 +664,23 @@ var ModelElement = (props) => {
 };
 
 // src/Components/TableElement.tsx
+import { EyeOutlined } from "@ant-design/icons";
 var TableElement = (props) => {
   const { thead, tbody } = props;
   const [selectedRecord, setSelectedRecord] = useState6({});
   const [model, setModel] = useState6(false);
+  const [dataSource, setDataSource] = useState6([]);
+  useEffect3(() => {
+    if (tbody) {
+      setDataSource(
+        tbody.map((row, index) => ({
+          ...row,
+          key: index,
+          index: index + 1
+        }))
+      );
+    }
+  }, [tbody]);
   const handleChange = (record) => {
     console.log("record", record);
     if (props.onChange) {
@@ -679,8 +692,8 @@ var TableElement = (props) => {
     columns = [
       {
         title: "#",
-        dataIndex: "#",
-        key: "#",
+        dataIndex: "index",
+        key: "index",
         fixed: "left"
       },
       ...thead.map((col, ind) => ({
@@ -691,9 +704,9 @@ var TableElement = (props) => {
         render: col.render,
         sorter: {
           compare: (a, b) => {
-            if (typeof a[col.key] === "number" && typeof a[col.key] === "number") {
+            if (typeof a[col.key] === "number" && typeof b[col.key] === "number") {
               return a[col.key] - b[col.key];
-            } else if (typeof a[col.key] === "string" && typeof a[col.key] === "string") {
+            } else if (typeof a[col.key] === "string" && typeof b[col.key] === "string") {
               return a[col.key].localeCompare(b[col.key]);
             }
           }
@@ -717,17 +730,21 @@ var TableElement = (props) => {
                 }
               }
             },
-            "View"
+            /* @__PURE__ */ React20.createElement(EyeOutlined, null)
           );
         }
       });
     }
   }
-  const dataSource = tbody && tbody.map((row, index) => ({
-    ...row,
-    key: index + 1,
-    [columns[0].key]: index + 1
-  }));
+  const onChangeTable = (pagination, filters, sorter) => {
+    const { currentDataSource } = sorter;
+    setDataSource(
+      currentDataSource.map((row, index) => ({
+        ...row,
+        index: index + 1
+      }))
+    );
+  };
   const count = dataSource ? dataSource.length : 0;
   const onChangePage = (page, pageSize) => {
     if (props.onChange) {
@@ -756,9 +773,19 @@ var TableElement = (props) => {
       dataSource,
       columns,
       size: props.size,
-      bordered: true
+      bordered: true,
+      onChange: onChangeTable
     }
-  ), model && /* @__PURE__ */ React20.createElement(ModelElement, { selectedRecord, ...props, columns, model, onCancel: () => setModel(false) }));
+  ), model && /* @__PURE__ */ React20.createElement(
+    ModelElement,
+    {
+      selectedRecord,
+      ...props,
+      columns,
+      model,
+      onCancel: () => setModel(false)
+    }
+  ));
 };
 
 // src/Components/DatePicker.tsx
@@ -977,7 +1004,7 @@ var Upload2 = (props) => {
 };
 
 // src/Components/OtpElement.tsx
-import React30, { useState as useState11, useRef, useEffect as useEffect3 } from "react";
+import React30, { useState as useState11, useRef, useEffect as useEffect4 } from "react";
 import { Input as Input3 } from "antd";
 var OtpElement = (props) => {
   const length = props.length;
@@ -1014,7 +1041,7 @@ var OtpElement = (props) => {
       });
     }
   };
-  useEffect3(() => {
+  useEffect4(() => {
     inputRefs.current[0]?.focus();
   }, []);
   return /* @__PURE__ */ React30.createElement("div", { className: props.containerClassName }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React30.createElement(
@@ -1266,7 +1293,7 @@ var HorizontalBarChart = (props) => {
 };
 
 // src/Components/LineChart.tsx
-import React34, { useEffect as useEffect4, useRef as useRef2 } from "react";
+import React34, { useEffect as useEffect5, useRef as useRef2 } from "react";
 import Chart from "chart.js/auto";
 var LineChart = (props) => {
   const chartRef = useRef2(null);
@@ -1277,7 +1304,7 @@ var LineChart = (props) => {
     { label: "Conversion Rate", data: [50, 100, 150, 180, 50] }
   ];
   const labels = ["Instagram", "Whatsapp", "Messages", "Telegram", "Linkedin"];
-  useEffect4(() => {
+  useEffect5(() => {
     if (chartRef.current) {
       if (chartInstance.current) {
         chartInstance.current.destroy();
@@ -1339,12 +1366,12 @@ var LineChart = (props) => {
 };
 
 // src/Components/DoubleBarChart.tsx
-import React35, { useEffect as useEffect5, useRef as useRef3 } from "react";
+import React35, { useEffect as useEffect6, useRef as useRef3 } from "react";
 import Chart2 from "chart.js/auto";
 var DoubleBarChart = (props) => {
   const chartRef = useRef3(null);
   const chartInstance = useRef3(null);
-  useEffect5(() => {
+  useEffect6(() => {
     if (chartRef.current) {
       if (chartInstance.current) {
         chartInstance.current.destroy();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.14-Beta153",
+  "version": "0.0.14-Beta155",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",