[vis] fix pivot table scrolling when using more than 1 groupy col (#2674

)

* fix scrolling when more than 1 groupby

* generalize function arguments

* fix pivot table scrolling in js

* add padding rules back

* linting

superset/assets/javascripts/explorev2/components/ChartContainer.jsx

@@ -81,11 +81,8 @@ class ChartContainer extends React.PureComponent {
           // this should be a callback to clear the contents of the slice container
           $(this.state.selector).html(data);
         },
-        css: (dim, size) => {
-          // dimension can be 'height'
-          // pixel string can be '300px'
-          // should call callback to adjust height of chart
-          $(this.state.selector).css(dim, size);
+        css: (property, value) => {
+          $(this.state.selector).css(property, value);
         },
         height: getHeight,
         show: () => { },

superset/assets/visualizations/pivot_table.css

@@ -1,17 +1,4 @@
-.slice-grid .widget.pivot_table .slice_container {
-    overflow: auto !important;
-}
-
-.widget.pivot_table table {
-    margin: 0px !important;
-}
-
-.widget.pivot_table tr>th {
-    padding: 1px 5px !important;
-    font-size: small !important;
-}
-
-.widget.pivot_table tr>td {
-    padding: 1px 5px !important;
-    font-size: small !important;
+.widget.pivot_table tr > th,
+.widget.pivot_table tr > td {
+  padding: 1px 5px;
 }

superset/assets/visualizations/pivot_table.js

@@ -1,31 +1,41 @@
 import 'datatables.net';
 import dt from 'datatables.net-bs';
-
+import $ from 'jquery';
+import 'datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css';
 import { fixDataTableBodyHeight } from '../javascripts/modules/utils';
-
-const $ = require('jquery');
-
-require('./pivot_table.css');
-require('datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css');
+import './pivot_table.css';
 
 dt(window, $);
 
 module.exports = function (slice, payload) {
   const container = slice.container;
   const fd = slice.formData;
+  const height = container.height();
+
+  // payload data is a string of html with a single table element
   container.html(payload.data);
+
   if (fd.groupby.length === 1) {
-    const height = container.height();
+    // When there is only 1 group by column,
+    // we use the DataTable plugin to make the header fixed.
+    // The plugin takes care of the scrolling so we don't need
+    // overflow: 'auto' on the table.
+    container.css('overflow', 'hidden');
     const table = container.find('table').DataTable({
       paging: false,
       searching: false,
       bInfo: false,
-      scrollY: height + 'px',
+      scrollY: `${height}px`,
       scrollCollapse: true,
       scrollX: true,
     });
     table.column('-1').order('desc').draw();
-    fixDataTableBodyHeight(
-        container.find('.dataTables_wrapper'), height);
+    fixDataTableBodyHeight(container.find('.dataTables_wrapper'), height);
+  } else {
+    // When there is more than 1 group by column we just render the table, without using
+    // the DataTable plugin, so we need to handle the scrolling ourselves.
+    // In this case the header is not fixed.
+    container.css('overflow', 'auto');
+    container.css('height', `${height + 10}px`);
   }
 };