styling and sort indication

resources/frontend_client/app/components/mb_data_table/mb_data_table.css

@@ -5,11 +5,25 @@
     cursor: pointer;
 }
 
-.MB-DataTable-header .Icon-chevrondown       { opacity: 0; }
-.MB-DataTable-header:hover .Icon-chevrondown { opacity: 1; }
+.MB-DataTable-header .Icon       { opacity: 0; }
+.MB-DataTable-header:hover .Icon,
+.MB-DataTable-header--sorted .Icon     {
+    opacity: 1;
+    transition: opacity .3s linear;
+}
+
+.PagingButtons {
+    border: 1px solid #ddd;
+}
+
+/* if the column is the one that is being sorted*/
+.MB-DataTable-header--sorted {
+     color: var(--brand-color);
+}
 
 /* what follows is a war crime but such is the state of FE development */
 .Visualization .public_fixedDataTable_main {
+    border-color: rgb(205, 205, 205);
 }
 
 .Visualization .public_fixedDataTableCell_main {
@@ -32,5 +46,11 @@
 
 .Visualization .public_fixedDataTable_header,
 .Visualization .public_fixedDataTable_header .public_fixedDataTableCell_main {
+    background-color: #fff;
     background-image: none;
 }
+
+.Visualization .public_fixedDataTable_header,
+.Visualization .public_fixedDataTable_header .public_fixedDataTableCell_main {
+    background-color: #fff;
+}

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

@@ -316,7 +316,9 @@ export default React.createClass({
                             data={this.props.result.data}
                             maxRows={this.props.tableRowsPerPage}
                             page={this.state.tablePage}
-                            setSortFn={this.props.setSortFn} />
+                            setSortFn={this.props.setSortFn}
+                            sort={this.props.card.dataset_query.query.order_by}
+                        />
                     );
 
                 } else {
@@ -364,18 +366,16 @@ export default React.createClass({
 
         return (
             <div className="relative full flex flex-column">
-                <ReactCSSTransitionGroup transitionName="Transition-qb-section">
-                    {queryModified}
-                </ReactCSSTransitionGroup>
+                {queryModified}
                 {loading}
-                <ReactCSSTransitionGroup className={visualizationClasses} transitionName="animation-viz">
+                <div className={visualizationClasses}>
                     {viz}
-                </ReactCSSTransitionGroup>
-                <div className="VisualizationSettings QueryBuilder-section clearfix">
-                    <div className="float-right">
+                </div>
+                <div className="VisualizationSettings QueryBuilder-section flex align-center">
+                    {this.renderVizControls()}
+                    <div className="flex flex-align-right">
                         {pagingControls}
                     </div>
-                    {this.renderVizControls()}
                 </div>
             </div>
         );

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

@@ -3,13 +3,15 @@
 import FixedDataTable from 'fixed-data-table';
 import Icon from './icon.react';
 
+var cx = React.addons.classSet;
 var Table = FixedDataTable.Table;
 var Column = FixedDataTable.Column;
 
 export default React.createClass({
     displayName: 'QueryVisualizationTable',
     propTypes: {
-        data: React.PropTypes.object
+        data: React.PropTypes.object,
+        sort: React.PropTypes.object
     },
 
     getDefaultProps: function() {
@@ -44,7 +46,6 @@ export default React.createClass({
         var width = element.parentElement.offsetWidth;
         var height = element.parentElement.offsetHeight;
 
-        console.log(width, height);
         if (width !== prevState.width || height !== prevState.height) {
             console.log('updating dims');
             this.setState({
@@ -79,15 +80,30 @@ export default React.createClass({
 
     tableHeaderRenderer: function(columnIndex) {
         var column = this.props.data.cols[columnIndex],
-            colVal = (column !== null) ? column.name.toString() : null,
-            headerClasses = 'MB-DataTable-header flex align-center';
+            colVal = (column !== null) ? column.name.toString() : null;
+
+
+
+        var headerClasses = cx({
+            'MB-DataTable-header' : true,
+            'flex': true,
+            'align-center': true,
+            'MB-DataTable-header--sorted': (this.props.sort && (this.props.sort[0][0] === column.id)),
+        });
+
+        // set the initial state of the sorting indicator chevron
+        var sortChevron = (<Icon name="chevrondown" width="8px" height="8px"></Icon>);
+
+        if(this.props.sort && this.props.sort[0][1] === 'ascending') {
+            sortChevron = (<Icon name="chevronup" width="8px" height="8px"></Icon>);
+        }
 
         if (this.isSortable()) {
             return (
                 <div className={headerClasses} onClick={this.setSort.bind(null, column.id)}>
                     {colVal}
-                    <span className="flex-align-right">
-                        <Icon name="chevrondown" width="12px" height="12px"></Icon>
+                    <span className="ml1">
+                        {sortChevron}
                     </span>
                 </div>
             );
@@ -141,7 +157,7 @@ export default React.createClass({
                 rowsCount={rowCount}
                 width={this.state.width}
                 height={this.state.height}
-                headerHeight={35}
+                headerHeight={50}
                 onColumnResizeEndCallback={component.columnResized}>
                 {tableColumns}
             </Table>