ywana-core8 0.0.780 → 0.0.782

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.780",
+  "version": "0.0.782",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/html/table.js

@@ -38,6 +38,12 @@ export const DataTable = (props) => {
         const keySort = (a, b, direction) => {
             direction = direction !== null ? direction : 1;
 
+            // check if a and b are numbers and compare as numbers
+            if (!isNaN(a) && !isNaN(b)) {
+                a = Number(a);
+                b = Number(b);
+            }
+
             if (a === b) { // If the values are the same, do not switch positions.
                 return 0;
             }
@@ -168,7 +174,7 @@ const DataTableRow = (props) => {
 const DataTableCell = ({ index, row, column, cell, editable }) => {
 
     const render = (type) => {
-        const { id, disabled = false, min, max, onChange, format, options, item, action } = column
+        const { id, disabled = false, min, max, onChange, format, options, item, action, maxDecimals } = column
 
 
         if (id === "checked") {
@@ -192,7 +198,7 @@ const DataTableCell = ({ index, row, column, cell, editable }) => {
                 case "ICON": return <Icon icon={cell} />
                 case "Boolean": return <BooleanCellViewer id={id} value={cell} />
                 case "String": return <StringCellViewer id={id} value={cell} format={format} options={options} action={action} />
-                case "Number": return <NumberCellViewer id={id} value={cell} format={format} />
+                case "Number": return <NumberCellViewer id={id} value={cell} format={format} maxDecimals={maxDecimals} />
                 default: return cell
             }
         }
@@ -254,7 +260,7 @@ const BooleanCellViewer = ({ id, value = false }) => {
  * NumberCellViewer
  */
 const NumberCellViewer = ({ id, value, format, maxDecimals }) => {
-
+/*
     function formatNumber(number) {
         // convert number to numeric
         if (number === null) return "null"
@@ -267,6 +273,20 @@ const NumberCellViewer = ({ id, value, format, maxDecimals }) => {
         const thousands = /\B(?=(\d{3})+(?!\d))/g;
         return numberPart.replace(thousands, ".") + (decimalPart ? "," + decimalPart : "");
     }
+*/
+    function formatNumber(number, maxDecimals = 0) {
+        if (number === null) return "null"
+        let result = number.toLocaleString('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+        // thousands separator is a dot
+        var parts = result.toString().split(",");
+        const numberPart = parts[0];
+        const decimalPart = parts[1];
+        const thousands = /\B(?=(\d{3})+(?!\d))/g;
+    
+        // limit decimal part to maxdecimals
+        const decimal = decimalPart ? decimalPart.substring(0, maxDecimals) : null;
+        return numberPart.replace(thousands, ".") + (decimal ? "," + decimal : "");
+    }
 
     if (format) {
         switch (format) {
@@ -282,11 +302,8 @@ const NumberCellViewer = ({ id, value, format, maxDecimals }) => {
                 // if value is not a number, return value
                 if (isNaN(number)) return value
 
-                // if maxDecimals is defined, round number
-                if (maxDecimals) number = number.toFixed(maxDecimals)
-
                 // format number
-                return <span>{formatNumber(number)}</span>
+                return <span>{formatNumber(number, maxDecimals)}</span>
 
             default:
                 return <span>{value}</span>

package/src/html/table.test.js

@@ -6,15 +6,15 @@ export const TableTest = (prop) => {
 
     const [rows, setRows] = useState(
         [
-            { id: 1, checked: false, name: "John Smith"    , description: "lorem ipsum 9", thumb: "https://w7.pngwing.com/pngs/881/826/png-transparent-pikachu-ash-ketchum-pokemon-vrste-pikachu-leaf-flower-meme-thumbnail.png" },
-            { id: 2, checked: false, name: "Ann Martin"    , description: "lorem ipsum 2", color: "#CCFFFF" },
-            { id: 3, checked: false, name: "Ann Martin"    , description: "lorem ipsum 8", color: "#CCFFFF" },
-            { id: 4, checked: false, name: "Zack McCracken", description: "lorem ipsum 4", color: "#CCFFFF" },
-            { id: 5, checked: false, name: "Ann Martin"    , description: "lorem ipsum 1", color: "#CCFFFF" },
-            { id: 6, checked: false, name: "John Smith"    , description: "lorem ipsum 2", color: "#CCFFFF" },
-            { id: 7, checked: false, name: "Ann Martin"    , description: "lorem ipsum 1", color: "#CCFFFF" },
-            { id: 8, checked: false, name: "Martin Freeman", description: "lorem ipsum 4", color: "#CCFFFF" , num: 890.1234567890 },
-            { id: 9, checked: false, name: "Ann Martin"    , description: "lorem ipsum 5", color: "#CCFFFF", date: new Date().toString() },
+            { id: 1, checked: false, name: "John Smith"    , description: "lorem ipsum 9", color: "#CACAFF", num: "25", thumb: "https://w7.pngwing.com/pngs/881/826/png-transparent-pikachu-ash-ketchum-pokemon-vrste-pikachu-leaf-flower-meme-thumbnail.png" },
+            { id: 2, checked: false, name: "Ann Martin"    , description: "lorem ipsum 2", color: "#CCFFFF", num: "1234567890.1234567890" },
+            { id: 3, checked: false, name: "Ann Martin"    , description: "lorem ipsum 8", color: "#CCFFFF", num: "12340.1234567890" },
+            { id: 4, checked: false, name: "Zack McCracken", description: "lorem ipsum 4", color: "#CCFFFF", num: "567890.1234567890" },
+            { id: 5, checked: false, name: "Ann Martin"    , description: "lorem ipsum 1", color: "#CCFFFF", num: "23670.190" },
+            { id: 6, checked: false, name: "John Smith"    , description: "lorem ipsum 2", color: "#CCFFFF", num: "71230.10" },
+            { id: 7, checked: false, name: "Ann Martin"    , description: "lorem ipsum 1", color: "#CCFFFF", num: "3490.23" },
+            { id: 8, checked: false, name: "Martin Freeman", description: "lorem ipsum 4", color: "#CCFFFF" , num: "890.1234567890" },
+            { id: 9, checked: false, name: "Ann Martin"    , description: "lorem ipsum 5", color: "#CCFFFF", num: "365", date: new Date().toString() },
         ]
     )
 
@@ -47,7 +47,7 @@ export const TableTest = (prop) => {
             { id: "description", label: "Description", type: "String", sortable: true        },
             { id: "color"      , label: "Color"      , type: "String", format: FORMATS.COLOR },
             { id: "date"       , label: "Date"       , type: "String", format: FORMATS.DATE  },
-            { id: "num"        , label: "Num"        , type: "Number", maxDecimals: 2 },
+            { id: "num"        , label: "Num"        , type: "Number", maxDecimals: 2, sortable: true},
         ],
         rows
     }
@@ -55,7 +55,7 @@ export const TableTest = (prop) => {
     return (
         <>
             <div style={{ maxHeight: "20rem", overflow: "auto", margin: "2rem", display: "flex" }}>
-                x<DataTable {...table1} onRowSelection={select} outlined multisort={true}/>
+                z<DataTable {...table1} onRowSelection={select} outlined multisort={true}/>
             </div>
             <div style={{ maxHeight: "20rem", overflow: "auto", margin: "2rem" }}>
                 <DataTable {...table1} onRowSelection={select} onCheckAll={checkAll} />