ZEPPELIN-672] Add Datatables instead of normal tables

zeppelin-web/Gruntfile.js

@@ -354,6 +354,11 @@ module.exports = function (grunt) {
           cwd: '<%= yeoman.app %>',
           dest: '<%= yeoman.dist %>',
           src: ['app/**/*.html', 'components/**/*.html']
+        }, {
+          expand: true,
+          cwd: 'bower_components/datatables/media/images',
+          src: '{,*/}*.{png,jpg,jpeg,gif}',
+          dest: '<%= yeoman.dist %>/images'
         }, {
           expand: true,
           cwd: '.tmp/images',

zeppelin-web/bower.json

@@ -30,7 +30,9 @@
     "ngtoast": "~2.0.0",
     "ng-focus-if": "~1.0.2",
     "bootstrap3-dialog": "bootstrap-dialog#~1.34.7",
-    "floatThead": "~1.3.2"
+    "floatThead": "~1.3.2",
+    "datatables.net-bs": "~1.10.11",
+    "datatables.net-buttons-bs": "~1.1.2"
   },
   "devDependencies": {
     "angular-mocks": "1.5.0"

zeppelin-web/src/app/notebook/paragraph/paragraph-results.html

@@ -13,6 +13,7 @@
 -->
 <div
   id="p{{paragraph.id}}_resize"
+  style='padding-bottom: 5px;'
   resize='{"allowresize": "{{!asIframe && !viewOnly}}", "graphType": "{{getResultType()}}"}'
      resizable on-resize="resizeParagraph(width, height);">
   <div ng-include src="'app/notebook/paragraph/paragraph-graph.html'"></div>

zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js

@@ -1260,40 +1260,55 @@ angular.module('zeppelinWebApp')
               return '&#'+i.charCodeAt(0)+';';
             });
           }
-          html += '      <td>'+formatTableContent(v)+'</td>';
+        html += '      <td>'+formatTableContent(v)+'</td>';
         }
         html += '    </tr>';
       }
       html += '  </tbody>';
       html += '</table>';
 
-      angular.element('#p' + $scope.paragraph.id + '_table').html(html);
+      var tableDomEl = angular.element('#p' + $scope.paragraph.id + '_table');
+      tableDomEl.html(html);
+      var oTable = tableDomEl.children(1).DataTable({
+        paging:       false,
+        info:         false,
+        autoWidth:    false,
+        lengthChange: false,
+        searching: false,
+        dom: '<>'
+      });
+
       if ($scope.paragraph.result.msgTable.length > 10000) {
-        angular.element('#p' + $scope.paragraph.id + '_table').css('overflow', 'scroll');
-        // set table height
-        var height = $scope.paragraph.config.graph.height;
-        angular.element('#p' + $scope.paragraph.id + '_table').css('height', height);
+        tableDomEl.css({
+          'overflow': 'scroll',
+          'height': $scope.paragraph.config.graph.height
+        });
       } else {
+
         var dataTable = angular.element('#p' + $scope.paragraph.id + '_table .table');
         dataTable.floatThead({
-          scrollContainer: function (dataTable) {
-            return angular.element('#p' + $scope.paragraph.id + '_table');
+          scrollContainer: function(dataTable) {
+            return tableDomEl;
           }
         });
-        angular.element('#p' + $scope.paragraph.id + '_table .table').on('remove', function () {
-          angular.element('#p' + $scope.paragraph.id + '_table .table').floatThead('destroy');
+
+        dataTable.on('remove', function () {
+          dataTable.floatThead('destroy');
+        });
+
+        tableDomEl.css({
+          'position': 'relative',
+          'height': '100%'
         });
+        tableDomEl.perfectScrollbar('destroy')
+                  .perfectScrollbar({minScrollbarLength: 20});
 
-        angular.element('#p' + $scope.paragraph.id + '_table').css('position', 'relative');
-        angular.element('#p' + $scope.paragraph.id + '_table').css('height', '100%');
-        angular.element('#p' + $scope.paragraph.id + '_table').perfectScrollbar('destroy');
-        angular.element('#p' + $scope.paragraph.id + '_table').perfectScrollbar();
         angular.element('.ps-scrollbar-y-rail').css('z-index', '1002');
 
         // set table height
         var psHeight = $scope.paragraph.config.graph.height;
-        angular.element('#p' + $scope.paragraph.id + '_table').css('height', psHeight);
-        angular.element('#p' + $scope.paragraph.id + '_table').perfectScrollbar('update');
+        tableDomEl.css('height', psHeight);
+        tableDomEl.perfectScrollbar('update');
       }
 
     };

zeppelin-web/src/app/notebook/paragraph/paragraph.css

@@ -52,6 +52,21 @@
   width: 100%;
 }
 
+table.dataTable {
+  margin-top: 0px !important;
+  margin-bottom: 6px !important;
+}
+
+table.dataTable.table-condensed > thead > tr > th {
+  padding-right: 28px;
+}
+
+table.dataTable.table-condensed .sorting:after,
+table.dataTable.table-condensed .sorting_asc:after,
+table.dataTable.table-condensed .sorting_desc:after {
+  right: 12px;
+}
+
 .graphContainer {
   position: relative;
   margin-bottom: 5px;

zeppelin-web/src/index.html

@@ -44,6 +44,8 @@
     <link rel="stylesheet" href="bower_components/highlightjs/styles/github.css" />
     <link rel="stylesheet" href="bower_components/ngtoast/dist/ngToast.css" />
     <link rel="stylesheet" href="bower_components/bootstrap3-dialog/dist/css/bootstrap-dialog.min.css" />
+    <link rel="stylesheet" href="bower_components/datatables.net-bs/css/dataTables.bootstrap.css" />
+    <link rel="stylesheet" href="bower_components/datatables.net-buttons-bs/css/buttons.bootstrap.css" />
     <!-- endbower -->
     <link rel="stylesheet" href="bower_components/jquery-ui/themes/base/all.css" />
     <!-- endbuild -->
@@ -131,6 +133,14 @@
     <script src="bower_components/bootstrap3-dialog/dist/js/bootstrap-dialog.min.js"></script>
     <script src="bower_components/floatThead/dist/jquery.floatThead.js"></script>
     <script src="bower_components/floatThead/dist/jquery.floatThead.min.js"></script>
+    <script src="bower_components/datatables.net/js/jquery.dataTables.js"></script>
+    <script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.js"></script>
+    <script src="bower_components/datatables.net-buttons/js/dataTables.buttons.js"></script>
+    <script src="bower_components/datatables.net-buttons/js/buttons.colVis.js"></script>
+    <script src="bower_components/datatables.net-buttons/js/buttons.flash.js"></script>
+    <script src="bower_components/datatables.net-buttons/js/buttons.html5.js"></script>
+    <script src="bower_components/datatables.net-buttons/js/buttons.print.js"></script>
+    <script src="bower_components/datatables.net-buttons-bs/js/buttons.bootstrap.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
     <!-- build:js({.tmp,src}) scripts/scripts.js -->