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

package/dist/index.js

@@ -735,6 +735,18 @@ 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) {
@@ -746,8 +758,8 @@ var TableElement = (props) => {
     columns = [
       {
         title: "#",
-        dataIndex: "#",
-        key: "#",
+        dataIndex: "index",
+        key: "index",
         fixed: "left"
       },
       ...thead.map((col, ind) => ({
@@ -758,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]);
             }
           }
@@ -790,11 +802,15 @@ var TableElement = (props) => {
       });
     }
   }
-  const dataSource = tbody && tbody.map((row, index) => ({
-    ...row,
-    key: index,
-    [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) {
@@ -823,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

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,13 +664,23 @@ var ModelElement = (props) => {
 };
 
 // src/Components/TableElement.tsx
-import {
-  EyeOutlined
-} from "@ant-design/icons";
+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) {
@@ -682,8 +692,8 @@ var TableElement = (props) => {
     columns = [
       {
         title: "#",
-        dataIndex: "#",
-        key: "#",
+        dataIndex: "index",
+        key: "index",
         fixed: "left"
       },
       ...thead.map((col, ind) => ({
@@ -694,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]);
             }
           }
@@ -726,11 +736,15 @@ var TableElement = (props) => {
       });
     }
   }
-  const dataSource = tbody && tbody.map((row, index) => ({
-    ...row,
-    key: index,
-    [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) {
@@ -759,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
@@ -980,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;
@@ -1017,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(
@@ -1269,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);
@@ -1280,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();
@@ -1342,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-Beta154",
+  "version": "0.0.14-Beta155",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",