ywana-core8 0.0.779 → 0.0.781

package/package.json

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

package/src/html/table.js

@@ -13,14 +13,19 @@ const isFunction = value => value && (Object.prototype.toString.call(value) ===
  */
 export const DataTable = (props) => {
 
-    const { columns = [], rows = [], onRowSelection, onSort, onCheckAll, editable, outlined, expanded = false, className, emptyMessage = "No Results Found" } = props
+    const { columns = [], rows = [], onRowSelection, onSort, onCheckAll, editable, outlined, expanded = false, className, emptyMessage = "No Results Found", multisort = false } = props
     const [sortDir, setSortDir] = useState({})
     const [allChecked, setAllChecked] = useState(false)
 
     function changeSort(id) {
-        const nextDir = sortDir[id] ? sortDir[id] * -1 : 1
-        const next = Object.assign({}, sortDir, { [id]: nextDir })
-        setSortDir(next)
+        if (multisort) {
+            const nextDir = sortDir[id] ? sortDir[id] * -1 : 1
+            const next = Object.assign({}, sortDir, { [id]: nextDir })
+            setSortDir(next)
+        } else {
+            const nextDir = sortDir[id] ? sortDir[id] * -1 : 1
+            setSortDir({ [id]: nextDir })
+        }
     }
 
     function multiSort(array, sortObject = {}) {
@@ -33,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;
             }
@@ -270,10 +281,10 @@ const NumberCellViewer = ({ id, value, format, maxDecimals }) => {
             case FORMATS.PERCENT:
                 return <span>{value.toLocaleString('es-ES', { style: 'percent', minimumFractionDigits: 2 })}</span>
             case "ES_es":
-                
+
                 // convert value to number
                 let number = Number(value)
-                
+
                 // if value is not a number, return value
                 if (isNaN(number)) return value
 

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 ", 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 ", color: "#CCFFFF" },
-            { id: 3, checked: false, name: "Ann Martin"    , description: "lorem ipsum ", color: "#CCFFFF" },
-            { id: 4, checked: false, name: "Zack McCracken", description: "lorem ipsum ", color: "#CCFFFF" },
-            { id: 5, checked: false, name: "Ann Martin"    , description: "lorem ipsum ", color: "#CCFFFF" },
-            { id: 6, checked: false, name: "John Smith"    , description: "lorem ipsum ", color: "#CCFFFF" },
-            { id: 7, checked: false, name: "Ann Martin"    , description: "lorem ipsum ", color: "#CCFFFF" },
-            { id: 8, checked: false, name: "Martin Freeman", description: "lorem ipsum ", color: "#CCFFFF" , num: 890.1234567890 },
-            { id: 9, checked: false, name: "Ann Martin"    , description: "lorem ipsum ", 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", date: new Date().toString() },
         ]
     )
 
@@ -44,10 +44,10 @@ export const TableTest = (prop) => {
             { id: "index"      , label: "#"          , type: "INDEX"                         },
             { id: "checked"                                          , onChange: check       },
             { id: "name"       , label: "Name"       , type: "String", sortable: true, filtrable: true },
-            { id: "description", label: "Description", type: "String"                        },
+            { 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" }}>
-                <DataTable {...table1} onRowSelection={select} outlined />
+                x<DataTable {...table1} onRowSelection={select} outlined multisort={true}/>
             </div>
             <div style={{ maxHeight: "20rem", overflow: "auto", margin: "2rem" }}>
                 <DataTable {...table1} onRowSelection={select} onCheckAll={checkAll} />