column visibility

index.html

@@ -713,7 +713,6 @@ let ModificationsIcon = ({node}) =>
 let PivotBranch = props =>
 {
     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=>
     {
@@ -727,6 +726,20 @@ let PivotBranch = props =>
         }
     });
 
+    let displayCells = (node, visible) =>
+    {
+        let output = [];
+        node.Meta.Row.forEach((column, i)=>
+        {
+            if(visible[i])
+            {
+                output.push( h("td", null, column) );
+            }
+        }
+        );
+        return output;
+    }
+
     let stylesLeaf = css`
         background:#ddd;
         color:#333;
@@ -741,7 +754,7 @@ let PivotBranch = props =>
             <td>
                 <${ModificationsIcon} node=${props.node}><//>
             </td>
-            ${displayCells}
+            ${displayCells(props.node, props.visible)}
         </tr>
         ${(N.Step(props.node, "Leaf")||[]).map(leaf =>
         {
@@ -749,9 +762,7 @@ let PivotBranch = props =>
             <tr class=${stylesLeaf}>
                 <td></td>
                 <td><${ModificationsIcon} node=${leaf}><//></td>
-                ${
+                ${displayCells(leaf, props.visible)}
-                    leaf.Meta.Row.map(column=>h("td", null, column))
-                }
             </tr>
             `;
         }
@@ -763,6 +774,9 @@ let PivotBranch = props =>
 let PivotRoot = ({pivot}) =>
 {
 
+    let labels = (N.Step(Pivot.Schema, "all")||[]).map(column => column.Meta.Label);
+    let [visibleGet, visibleSet] = useState(labels.map(column=>true));
+
     let stylesRoot = css`
         display:block;
         box-sizing:border-box;
@@ -784,13 +798,36 @@ let PivotRoot = ({pivot}) =>
 
     let rows = [];
     N.ID.Walk++;
-    N.Walk(n=>rows.push(h(PivotBranch, {node:n}, null)), pivot, "Hierarchy");
+    N.Walk(n=>rows.push(h(PivotBranch, {node:n, visible:visibleGet}, null)), pivot, "Hierarchy");
 
     return html`
     <div class=${stylesRoot}>
         <div key="heading" class=${stylesHeading}>${pivot.Meta.Label}</div>
         <${Section} key="settings" label=${`Settings`}>
+            <h3>pivot</h3>
             <button onClick=${handleDelete}>Destroy Pivot</button>
+            <h3>columns</h3>
+            <div>
+                <button onClick=${e =>
+                {
+                    visibleSet(visibleGet.map(v=>true))
+                }
+                }>Show All</button>
+                <button onClick=${e =>
+                {
+                    visibleSet(visibleGet.map(v=>false))
+                }
+                }>Hide All</button>
+            </div>
+            <div>
+                ${visibleGet.map((v, i) => html`<button onClick=${e=>
+                {
+                    let clone = [...visibleGet];
+                    clone[i] = !v;
+                    visibleSet(clone);
+                }
+                }>${labels[i]} ${v ? `visible`:`hidden`}</button>`)}
+            </div>
         <//>
         <${Section} key="tree" label=${"Tree"}>
             <table>