cleanup some of the rendering of the non-pivoted column headings.

resources/frontend_client/app/css/query_builder.css

@@ -590,3 +590,8 @@
 .PopoverBody.AddToDashboard {
     min-width: 25em;
 }
+
+.MB-DataTable.MB-DataTable--pivot .fixedDataTableCellGroup_cellGroup .public_fixedDataTableCell_main:first-child {
+    font-weight: bold;
+    border-right: 1px solid color(var(--base-grey) shade(40%));
+}
\ No newline at end of file

resources/frontend_client/app/lib/data_grid.js

@@ -40,7 +40,7 @@ var DataGrid = {
 
 
         // make sure that the first element in the pivoted column list is null which makes room for the label of the other column
-        pivotColValues.unshift(null);
+        pivotColValues.unshift(data.cols[normalCol].display_name);
 
         // start with an empty grid that we'll fill with the appropriate values
         var pivotedRows = [];
@@ -60,7 +60,12 @@ var DataGrid = {
         }
 
         // provide some column metadata to maintain consistency
-        var cols = pivotColValues.map(function(val) {
+        var cols = pivotColValues.map(function(val, idx) {
+            if (idx === 0) {
+                // first column is always the coldef of the normal column
+                return data.cols[normalCol];
+            }
+
             var colDef = _.clone(data.cols[pivotCol]);
             colDef['display_name'] = val || "";
             colDef['name'] = val || "";

resources/frontend_client/app/query_builder/visualization_table.react.js

@@ -277,19 +277,25 @@ export default React.createClass({
             );
         });
 
+        var classes = cx({
+            'MB-DataTable': true,
+            'MB-DataTable--pivot': this.props.pivot
+        });
+
         return (
-            <Table
-                className="MB-DataTable"
-                rowHeight={35}
-                rowGetter={this.rowGetter}
-                rowsCount={this.state.data.rows.length}
-                width={this.state.width}
-                maxHeight={this.state.height}
-                headerHeight={50}
-                isColumnResizing={this.isColumnResizing}
-                onColumnResizeEndCallback={component.columnResized}>
-                {tableColumns}
-            </Table>
+            <span className={classes}>
+                <Table
+                    rowHeight={35}
+                    rowGetter={this.rowGetter}
+                    rowsCount={this.state.data.rows.length}
+                    width={this.state.width}
+                    maxHeight={this.state.height}
+                    headerHeight={50}
+                    isColumnResizing={this.isColumnResizing}
+                    onColumnResizeEndCallback={component.columnResized}>
+                    {tableColumns}
+                </Table>
+            </span>
         );
     }
 });