table layout started

components.js

@@ -196,18 +196,74 @@ let Modifier = props =>
     `;
 }
 
-let PivotBranch = ({node, widths}) =>
+let PivotBranch = props =>
 {
-    let sumCells = node.Meta.Row.map(column=>h("td", null, column));
+    let row = props.node.Meta.Row;
+    let displayCells = row.map(column=>h("td", null, column));
+    let displayCellsModify = row.map(column=>false);
+    props.node.Meta.IndexSum.forEach(i=>
+    {
+        displayCellsModify[i] = html`<td><input type="number" value=${row[i]}/></td>`;
+    });
+    displayCellsModify.forEach((cell, i)=>
+    {
+        if(!cell)
+        {
+            displayCellsModify[i] = html`<td>${row[i]}</td>`
+        }
+    });
+
     return html`
-    <tr>
-        <td></td>
-        ${sumCells}
-    </tr>
+    <tbody>
+        <tr>
+            <td colspan=${displayCells.length+1}><hr/></td>
+        </tr>
+        <tr>
+            <td>
+                <strong>${props.node.Meta.Label}</strong>
+            </td>
+            ${displayCells}
+        </tr>
+        <tr>
+            <td colspan=${displayCells.length+1}>Modifications</td>
+        </tr>
+        <tr>
+            <td>At</td>
+            ${displayCellsModify}
+        </tr>
+        <tr>
+            <td>Below</td>
+            ${displayCells}
+        </tr>
+        <tr>
+            <td>Above</td>
+            ${displayCells}
+        </tr>
+        <tr>
+            <td>Outside</td>
+            ${displayCells}
+        </tr>
+        <tr>
+            <td>Computed</td>
+            ${displayCells}
+        </tr>
+        <tr>
+            <td colspan=${displayCells.length+1}>Goals</td>
+        </tr>
+        <tr>
+            <td>Max</td>
+            ${displayCells}
+        </tr>
+        <tr>
+            <td>Min</td>
+            ${displayCells}
+        </tr>
+    </tbody>
     `;
 };
 
-let PivotRoot = ({pivot, children}) =>
+
+let PivotRoot = ({pivot}) =>
 {
 
     let stylesRoot = css`
@@ -223,13 +279,16 @@ let PivotRoot = ({pivot, children}) =>
     `;
 
     let modifiers = N.Step(pivot, "ModifyUp", false) || [];
-
     let handleDelete = ()=>
     {
         Pivot.Delete(pivot);
         Render();
     };
 
+    let rows = [];
+    N.ID.Walk++;
+    N.Walk(n=>rows.push(h(PivotBranch, {node:n}, null)), pivot, "Hierarchy");
+
     return html`
     <div class=${stylesRoot}>
         <div key="heading" class=${stylesHeading}>${pivot.Meta.Label}</div>
@@ -240,7 +299,9 @@ let PivotRoot = ({pivot, children}) =>
             ${ !modifiers.length ? html`<em>No modifiers</em>` : modifiers.map( m => html`<${Modifier} modifier=${m}/>`)}
         <//>
         <${Section} key="tree" label=${"Tree"}>
-            ${children}
+            <table>
+            ${rows}
+            </table>
         <//>
     </div>
     `;

index.html

@@ -366,7 +366,7 @@ import {PivotRoot, PivotForm} from './components.js';
 
 Pivot.Init(
     ["id", "type-a", "type-b", "count", "extra"],
-    ["", "label", "label", "sum", "sum"],
+    ["label", "label", "label", "sum", "sum"],
     [
     ["#1", "a", "long",  1, 4],
     ["#2", "b", "long",  2, 4],