1 files changed, 13 insertions, 8 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 1b239b5e5..c9491da59 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -36,6 +36,7 @@ interface TableBoxProps {
 export class TableBox extends ObservableReactComponent<TableBoxProps> {
     _inputChangedDisposer?: IReactionDisposer;
     _containerRef: HTMLDivElement | null = null;
+    @observable settingTitle: boolean = false;
 
     @observable _scrollTop = -1;
     @observable _tableHeight = 0;
@@ -155,7 +156,8 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
             },
             emptyFunction,
             action(e => {
-                if (e.shiftKey){
+                if (e.shiftKey || this.settingTitle){
+                    if (this.settingTitle) this.settingTitle = false;
                     if (this._props.titleCol == col) this._props.titleCol = "";
                     else this._props.titleCol = col;
                     this._props.selectTitleCol(this._props.titleCol);
@@ -184,9 +186,14 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                             this._props.layoutDoc.dataViz_selectedRows = new List<number>(this._tableDataIds);
                         }
                     }}>
-                    <div className="selectAll-buttons">
-                        <Button onClick={action(() => (this._props.layoutDoc.dataViz_selectedRows = new List<number>(this._tableDataIds)))} text="Select All" type={Type.SEC} color={'black'} />
-                        <Button onClick={action(() => (this._props.layoutDoc.dataViz_selectedRows = new List<number>()))} text="Deselect All" type={Type.SEC} color={'black'} />
+                    <div className="select-buttons">
+                        <div className="selectTitle">
+                            <Button onClick={action(() => (this.settingTitle = !this.settingTitle))} text="Select Title Column" type={Type.SEC} color={'black'} />
+                            </div>
+                        <div className="selectAll">
+                            <Button onClick={action(() => (this._props.layoutDoc.dataViz_selectedRows = new List<number>(this._tableDataIds)))} text="Select All" type={Type.SEC} color={'black'} />
+                            <Button onClick={action(() => (this._props.layoutDoc.dataViz_selectedRows = new List<number>()))} text="Deselect All" type={Type.SEC} color={'black'} />
+                        </div>
                     </div>
                     <div
                         className={`tableBox-container ${this.columns[0]}`}
@@ -223,12 +230,10 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                                 color: this._props.axes.slice().reverse().lastElement() === col ? 'darkgreen' 
                                                     : (this._props.axes.length>2 && this._props.axes.lastElement() === col) ? 'darkred' 
                                                     : (this._props.axes.lastElement()===col || (this._props.axes.length>2 && this._props.axes[1]==col))? 'darkblue' : undefined,
-                                                background: this._props.axes.slice().reverse().lastElement() === col ? '#E3fbdb' 
+                                                background: this.settingTitle? 'lightgrey'
+                                                    : this._props.axes.slice().reverse().lastElement() === col ? '#E3fbdb' 
                                                     : (this._props.axes.length>2 && this._props.axes.lastElement() === col) ? '#Fbdbdb' 
                                                     : (this._props.axes.lastElement()===col || (this._props.axes.length>2 && this._props.axes[1]==col))? '#c6ebf7' : undefined,
-                                                // blue: #ADD8E6
-                                                // green: #E3fbdb
-                                                // red: #Fbdbdb
                                                 fontWeight: 'bolder',
                                                 border: '3px solid black',
                                             }}