ywana-core8 0.0.865 → 0.0.867

package/package.json

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

package/src/html/table.js

@@ -13,7 +13,7 @@ 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", multisort = false } = props
+    const { columns = [], rows = [], onRowSelection, onSort, onCheckAll, editable, outlined, expanded = false, className, emptyMessage = "No Results Found", multisort = false, filterable = false } = props
     const [sortDir, setSortDir] = useState({})
     const [allChecked, setAllChecked] = useState(false)
 
@@ -122,6 +122,9 @@ export const DataTable = (props) => {
                     </tr>
                 </thead>
                 <tbody>
+
+                    {filterable ? <DataTableFiltersRow columns={columns} /> : null}
+
                     {rows.length > 0 ?
                         multiSort(rows, sortDir).map((row, index) => (
                             <DataTableRow key={row.id} index={index} row={row} columns={columns} onSelect={select} onDrop={moveRow} editable={editable} expanded={expanded} />
@@ -142,6 +145,20 @@ export const DataTable = (props) => {
     )
 }
 
+const DataTableFiltersRow = ({ columns }) => {
+    return (
+        <tr className="filters-row">
+            {columns.map(({ id, filterable, onFilter }) => {
+                return (
+                    <td className='filter-cell'>
+                        {filterable ? <TextField id={id} onChange={onFilter} /> : null}
+                    </td>
+                )
+            })}
+        </tr>
+    )
+}
+
 /**
  * DataTable Row
  */
@@ -264,20 +281,20 @@ const BooleanCellViewer = ({ id, value = false }) => {
  * NumberCellViewer
  */
 const NumberCellViewer = ({ id, value, format, maxDecimals }) => {
-/*
-    function formatNumber(number) {
-        // convert number to numeric
-        if (number === null) return "null"
-        const number2 = Number(number)
-        let result = number2.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;
-        return numberPart.replace(thousands, ".") + (decimalPart ? "," + decimalPart : "");
-    }
-*/
+    /*
+        function formatNumber(number) {
+            // convert number to numeric
+            if (number === null) return "null"
+            const number2 = Number(number)
+            let result = number2.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;
+            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 })
@@ -286,7 +303,7 @@ const NumberCellViewer = ({ id, value, format, maxDecimals }) => {
         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 : "");