ywana-core8 0.0.200 → 0.0.204

package/package.json

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

package/src/html/table.js

@@ -74,10 +74,11 @@ export const DataTable = (props) => {
             <table>
                 <thead>
                     <tr>
-                        {columns.map(({ id, label, sortable }) => {
+                        {columns.map(({ id, label, type, sortable }) => {
                             const sort = sortDir[id] ? sortDir[id] : null
+                            const colspan = type === TYPES.ENTITY ?  3 : 1
                             return (
-                                <th>
+                                <th rowSpan={2} colSpan={colspan}>
                                     {id === "checked" ? <CheckBox onChange={checkAll} /> : <Text key={`th_${id}`}>{label}</Text>}
                                     {sortable ? <Icon icon="arrow_up" size="small" clickable /> : null}
                                 </th>
@@ -85,6 +86,13 @@ export const DataTable = (props) => {
                         })}
                         <th></th>
                     </tr>
+                    <tr>x
+                        {
+                            columns
+                                .filter(({ type }) => type === TYPES.ENTITY)
+                                .map(({ label }) => [<th>{label}</th>,<th>{label}</th>,<th>{label}</th>])
+                        }
+                    </tr>
                 </thead>
                 <tbody>
                     {
@@ -111,7 +119,7 @@ const DataTableRow = (props) => {
     return (
         <Fragment>
             <tr onClick={ev => onSelect(row, ev)}>
-                {columns.map((column,index) => <DataTableCell key={`${column.id}_${index}`} row={row} column={column} cell={row[column.id]} editable={editable} />)}
+                {columns.map((column, index) => <DataTableCell key={`${column.id}_${index}`} row={row} column={column} cell={row[column.id]} editable={editable} />)}
                 {row.info ? <td><Icon icon={infoIcon} clickable action={() => toggleInfo(!isInfoOpen)} /></td> : <td></td>}
             </tr>
             {row.info && isInfoOpen ? (
@@ -164,9 +172,11 @@ const DataTableCell = ({ row, column, cell, editable }) => {
 }
 
 const EntityCellViewer = ({ id, value }) => {
+    console.log(id, value)
+    const subcells = value ? Object.values(value) : [1, 2, 3]
     return (
         <div className='entity-cell-viewer'>
-            {value.map(v => <div>{v}</div>)}
+            {subcells.filter(v => !v).map(v => <div>{v}</div>)}
         </div>
     )
 }

package/src/test.js

@@ -1,5 +1,41 @@
-<template>
-    <div class="x">
-        XXX
-    </div>
-</template>
+import React from 'react'
+
+const Test = (props) => {
+
+    return (
+
+
+        <table border="1">
+            <thead>
+                <tr>
+                    <th rowSpan={2}>Uno</th>
+                    <th rowSpan={2}>Dos</th>
+                    <th rowSpan={2}>Tres</th>
+                    <th colspan="4">Cuatro</th>
+                    <th rowSpan={2}>Ocho</th>
+                </tr>
+                <tr>
+                    <th>a</th>
+                    <th>b</th>
+                    <th>c</th>
+                    <th>d</th>
+                </tr>
+            </thead>
+            <tbody>
+
+                <tr>
+                    <td>1</td>
+                    <td>2</td>
+                    <td>3</td>
+                    <td>4</td>
+                    <td>5</td>
+                    <td>6</td>
+                    <td>7</td>
+                    <td>8</td>
+                </tr>
+            </tbody>
+        </table>
+
+
+    )
+}