ywana-core8 0.0.912 → 0.0.913

package/package.json

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

package/src/html/table.js

@@ -148,10 +148,13 @@ export const DataTable = (props) => {
 const DataTableFiltersRow = ({ columns }) => {
     return (
         <tr className="filters-row">
-            {columns.map(({ id, filterable, onFilter }) => {
+            {columns.map(({ id, filterable, onFilter, options }) => {
+
+                const field = options ? <DropDown id={id} options={options} onChange={onFilter} outlined /> : <TextField id={id} onChange={onFilter} outlined /> 
+
                 return (
                     <td className='filter-cell'>
-                        {filterable ? <TextField id={id} onChange={onFilter} outlined /> : null}
+                        {filterable ? field : null}
                     </td>
                 )
             })}

package/src/html/table.test.js

@@ -43,8 +43,13 @@ export const TableTest = (prop) => {
         columns: [
             { id: "index"      , label: "#"          , type: "INDEX"                         },
             { id: "checked"                                          , onChange: check       },
-            { id: "name"       , label: "Name"       , type: "String", sortable: true, filtrable: true, resizable: true },
-            { id: "description", label: "Description", type: "String", sortable: true        },
+            { id: "name"       , label: "Name"       , type: "String", sortable: true, filterable: true, resizable: true },
+            { id: "category"  , label: "Category"   , type: "String", sortable: true, filterable: true, resizable: false, options: [
+                { label: "A", value: "A" },
+                { label: "B", value: "B" },
+                { label: "C", value: "C" },
+            ]},
+            { 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, sortable: true},
@@ -58,7 +63,7 @@ export const TableTest = (prop) => {
                 <DataTable {...table1} onRowSelection={select} outlined multisort={true}/>
             </div>
             <div style={{ maxHeight: "20rem", overflow: "auto", margin: "2rem" }}>
-                <DataTable {...table1} onRowSelection={select} onCheckAll={checkAll} />
+                <DataTable {...table1} onRowSelection={select} onCheckAll={checkAll} filterable={true} />
             </div>
         </>
     )