From ab71ee4f93abe6a2f83f367258fcc6f812640008 Mon Sep 17 00:00:00 2001
From: x4base <x4base@gmail.com>
Date: Wed, 22 Jun 2016 18:16:27 -0500
Subject: [PATCH] Make the headers of tables and pivot tables fixed (#651)

---
 caravel/assets/javascripts/modules/utils.js  | 12 +++++++++++-
 caravel/assets/visualizations/pivot_table.js |  9 ++++++++-
 caravel/assets/visualizations/table.js       |  9 ++++++++-
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/caravel/assets/javascripts/modules/utils.js b/caravel/assets/javascripts/modules/utils.js
index 94dfb81400c10..96992dcc31e4e 100644
--- a/caravel/assets/javascripts/modules/utils.js
+++ b/caravel/assets/javascripts/modules/utils.js
@@ -96,8 +96,18 @@ var toggleCheckbox = function (apiUrlPrefix, selector) {
   });
 };
 
+/**
+ * Fix the height of the table body of a DataTable with scrollY set
+ */
+var fixDataTableBodyHeight = function ($tableDom, height) {
+  var headHeight = $tableDom.find('.dataTables_scrollHead').height();
+  $tableDom.find('.dataTables_scrollBody')
+      .css('max-height', height - headHeight);
+};
+
 module.exports = {
   wrapSvgText: wrapSvgText,
   showModal: showModal,
-  toggleCheckbox: toggleCheckbox
+  toggleCheckbox: toggleCheckbox,
+  fixDataTableBodyHeight: fixDataTableBodyHeight
 };
diff --git a/caravel/assets/visualizations/pivot_table.js b/caravel/assets/visualizations/pivot_table.js
index fa1fc8aa3ee0f..bc16a9d1eeb32 100644
--- a/caravel/assets/visualizations/pivot_table.js
+++ b/caravel/assets/visualizations/pivot_table.js
@@ -4,6 +4,7 @@ var jQuery = window.jQuery = $;
 require('datatables.net-bs');
 require('./pivot_table.css');
 require('../node_modules/datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css');
+var utils = require('../javascripts/modules/utils');
 
 module.exports = function (slice) {
   var container = slice.container;
@@ -13,12 +14,18 @@ module.exports = function (slice) {
       var form_data = json.form_data;
       container.html(json.data);
       if (form_data.groupby.length === 1) {
+        var height = container.height();
         var table = container.find('table').DataTable({
           paging: false,
           searching: false,
-          bInfo: false
+          bInfo: false,
+          scrollY: height + "px",
+          scrollCollapse: true,
+          scrollX: true
         });
         table.column('-1').order('desc').draw();
+        utils.fixDataTableBodyHeight(
+            container.find('.dataTables_wrapper'), height);
       }
       slice.done(json);
     }).fail(function (xhr) {
diff --git a/caravel/assets/visualizations/table.js b/caravel/assets/visualizations/table.js
index 53a07fca14d82..5683819eef06d 100644
--- a/caravel/assets/visualizations/table.js
+++ b/caravel/assets/visualizations/table.js
@@ -6,6 +6,7 @@ var px = window.px || require('../javascripts/modules/caravel.js');
 require('./table.css');
 require('datatables.net-bs');
 require('../node_modules/datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css');
+var utils = require('../javascripts/modules/utils');
 
 function tableVis(slice) {
   var f = d3.format('.3s');
@@ -115,11 +116,17 @@ function tableVis(slice) {
             return d.val;
           }
         });
+      var height = slice.container.height();
       var datatable = slice.container.find('.dataTable').DataTable({
         paging: false,
         searching: form_data.include_search,
-        bInfo: false
+        bInfo: false,
+        scrollY: height + "px",
+        scrollCollapse: true,
+        scrollX: true
       });
+      utils.fixDataTableBodyHeight(
+          slice.container.find('.dataTables_wrapper'), height);
       // Sorting table by main column
       if (form_data.metrics.length > 0) {
         var main_metric = form_data.metrics[0];