1 files changed, 20 insertions, 6 deletions
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 25098baf1..4ddebb833 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -14,6 +14,7 @@ import { TableBox } from './components/TableBox';
 import './DataVizBox.scss';
 import { Histogram } from './components/Histogram';
 import { PieChart } from './components/PieChart';
+import { Toggle, ToggleType } from 'browndash-components';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -103,7 +104,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         if (!this.pairs) return 'no data';
         // prettier-ignore
         switch (this.dataVizView) {
-            case DataVizView.TABLE:     return <TableBox pairs={this.pairs} axes={this.axes} docView={this.props.DocumentView} selectAxes={this.selectAxes}/>;
+            case DataVizView.TABLE:     return <TableBox pairs={this.pairs} axes={this.axes} rootDoc={this.rootDoc} docView={this.props.DocumentView} selectAxes={this.selectAxes}/>;
             case DataVizView.LINECHART: return <LineChart ref={r => (this._chartRenderer = r ?? undefined)} height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />;
             case DataVizView.HISTOGRAM: return <Histogram height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />;
             case DataVizView.PIECHART: return <PieChart height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />;
@@ -150,11 +151,24 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         { passive: false }
                     )
                 }>
-                {/* <button onClick={e => this.changeViewHandler(e)}>{this.dataVizView === DataVizView.TABLE ? DataVizView.LINECHART : DataVizView.TABLE}</button> */}
-                <button className={'datatype-button'} style={{background: this.layoutDoc._dataVizView == DataVizView.TABLE? 'grey': 'black'}} onClick={e => this.layoutDoc._dataVizView = DataVizView.TABLE}> TABLE </button>
-                <button className={'datatype-button'} style={{background: this.layoutDoc._dataVizView == DataVizView.LINECHART? 'grey': 'black'}} onClick={e => this.layoutDoc._dataVizView = DataVizView.LINECHART}> LINE CHART </button>
-                <button className={'datatype-button'} style={{background: this.layoutDoc._dataVizView == DataVizView.HISTOGRAM? 'grey': 'black'}} onClick={e => this.layoutDoc._dataVizView = DataVizView.HISTOGRAM}> HISTOGRAM </button>
-                <button className={'datatype-button'} style={{background: this.layoutDoc._dataVizView == DataVizView.PIECHART? 'grey': 'black'}} onClick={e => this.layoutDoc._dataVizView = DataVizView.PIECHART}> PIE CHART </button>
+                <div className={'datatype-button'}>
+                    <Toggle text={"TABLE"} toggleType={ToggleType.BUTTON} type={"secondary"} color={"black"} 
+                        onClick={e => this.layoutDoc._dataVizView = DataVizView.TABLE} 
+                        toggleStatus={this.layoutDoc._dataVizView == DataVizView.TABLE} 
+                    />
+                    <Toggle text={"LINECHART"} toggleType={ToggleType.BUTTON} type={"secondary"} color={"black"} 
+                        onClick={e => this.layoutDoc._dataVizView = DataVizView.LINECHART} 
+                        toggleStatus={this.layoutDoc._dataVizView == DataVizView.LINECHART} 
+                    />
+                    <Toggle text={"HISTOGRAM"} toggleType={ToggleType.BUTTON} type={"secondary"} color={"black"} 
+                        onClick={e => this.layoutDoc._dataVizView = DataVizView.HISTOGRAM} 
+                        toggleStatus={this.layoutDoc._dataVizView == DataVizView.HISTOGRAM} 
+                    />
+                    <Toggle text={"PIE CHART"} toggleType={ToggleType.BUTTON} type={"secondary"} color={"black"} 
+                        onClick={e => this.layoutDoc._dataVizView = DataVizView.PIECHART} 
+                        toggleStatus={this.layoutDoc._dataVizView == DataVizView.PIECHART} 
+                    />
+                </div>
                 {this.selectView}
             </div>
         );