ywana-core8 0.0.213 → 0.0.217

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.213",
+  "version": "0.0.217",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",

package/src/html/table.js

@@ -74,9 +74,9 @@ export const DataTable = (props) => {
             <table>
                 <thead>
                     <tr>
-                        {columns.map(({ id, label, type, sortable }) => {
+                        {columns.map(({ id, label, type, item, sortable }) => {
                             const sort = sortDir[id] ? sortDir[id] : null
-                            const [rowspan, colspan] = type === TYPES.ENTITY ? [1, 3] : [2, 1]
+                            const [rowspan, colspan] = type === TYPES.ENTITY ? [1, Object.keys(item).length] : [2, 1]
                             return (
                                 <th rowSpan={rowspan} colSpan={colspan}>
                                     {id === "checked" ? <CheckBox onChange={checkAll} /> : <Text key={`th_${id}`}>{label}</Text>}
@@ -94,7 +94,7 @@ export const DataTable = (props) => {
                                     const { item } = column
                                     const fields = item ? Object.values(item) : []
                                     return fields
-                                        .filter(field => !field.column)
+                                        .filter(field => field.column === true)
                                         .map(field => <th>{field.label}</th>)
                                 })
                         }
@@ -145,7 +145,7 @@ const DataTableRow = (props) => {
 const DataTableCell = ({ row, column, cell, editable }) => {
 
     const render = (type) => {
-        const { id, disabled = false, min, max, onChange, format, options } = column
+        const { id, disabled = false, min, max, onChange, format, options, item } = column
         if (id === "checked") {
             return <CheckBox id={id} value={cell} onChange={(id, value) => onChange(row.id, id, value)} />
         } else if (editable && onChange) {
@@ -166,25 +166,27 @@ const DataTableCell = ({ 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} />
-                case TYPES.ENTITY: return <EntityCellViewer id={id} value={cell} />
                 default: return cell
             }
         }
     }
 
-    return (
+    return column.type === TYPES.ENTITY ? <EntityCellViewer id={column.id} item={column.item} value={cell} /> : (
         <td key={column.id} className={column.id}>{render(column.type)}</td>
     )
 }
 
-const EntityCellViewer = ({ id, value }) => {
-    console.log(id, value)
-    const subcells = value ? Object.values(value) : [1, 2, 3]
-    return (
-        <div className='entity-cell-viewer'>
-            {subcells.filter(v => !v).map(v => <div>{v}</div>)}
-        </div>
-    )
+/**
+ * Entity Cell Viewer
+ * @param {*} param0 
+ * @returns 
+ */
+const EntityCellViewer = ({ id, item, value }) => {
+    console.log(id, item, value)
+    const fields = Object.values(item).filter(field => field.column === true)
+    return fields.map( field => {
+        return (<td key={column.id} className={`entity-cell ${column.id}`} >{value[field.id]}</td>)
+    })
 }
 
 /**

package/src/test.js

@@ -6,7 +6,7 @@ const Test = (props) => {
 
         <div>
 
-            <table>
+            <table border="1">
                 <thead>
                     <tr>
                         <th rowspan="2" colspan="1"><div class="checkbox"><input type="checkbox" value=""/><span class="checkmark"></span><label></label></div></th>
@@ -14,8 +14,7 @@ const Test = (props) => {
                         <th rowspan="2" colspan="1"><span>Fecha de Entrada</span></th>
                         <th rowspan="2" colspan="1"><span>Circuito</span></th>
                         <th rowspan="2" colspan="1"><span>Clase de Muestra</span></th>
-                        <th rowspan="2" colspan="3"><span>Referencia</span></th>
-                        <th rowspan="2" colspan="1"></th>
+                        <th colspan="3"><span>Referencia</span></th>
                         <th></th>
                     </tr>
                     <tr>