diff --git a/zeppelin-web/Gruntfile.js b/zeppelin-web/Gruntfile.js index 0b513f92fda..3b0f0b844a1 100644 --- a/zeppelin-web/Gruntfile.js +++ b/zeppelin-web/Gruntfile.js @@ -318,6 +318,16 @@ module.exports = function (grunt) { cwd: 'bower_components/jquery-ui/themes/base/images', src: '{,*/}*.{png,jpg,jpeg,gif}', dest: '<%= yeoman.dist %>/styles/images' + }, { + expand: true, + cwd: 'bower_components/datatables/media/images', + src: '{,*/}*.{png,jpg,jpeg,gif}', + dest: '<%= yeoman.dist %>/images' + }, { + expand: true, + cwd: 'bower_components/datatables-tabletools/swf', + src: '{,*/}*.swf', + dest: '<%= yeoman.dist %>/images' }] }, styles: { diff --git a/zeppelin-web/app/scripts/controllers/paragraph.js b/zeppelin-web/app/scripts/controllers/paragraph.js index a1cab47ca6e..a940287ade6 100644 --- a/zeppelin-web/app/scripts/controllers/paragraph.js +++ b/zeppelin-web/app/scripts/controllers/paragraph.js @@ -770,6 +770,19 @@ angular.module('zeppelinWebApp') // set table height var height = $scope.paragraph.config.graph.height; $('#p'+$scope.paragraph.id+'_table').height(height); + + // use datatables + $('#p'+$scope.paragraph.id+'_table .table').DataTable( { + dom: 'Tt', + tableTools: { + "sSwfPath": "images/copy_csv_xls_pdf.swf", + "aButtons": [ "csv", "pdf" ] + }, + lengthChange: false, + searching: false, + ordering: false, + paging: false + }); }; var retryRenderer = function() { diff --git a/zeppelin-web/bower.json b/zeppelin-web/bower.json index 8e0ea6b325e..792102635c0 100644 --- a/zeppelin-web/bower.json +++ b/zeppelin-web/bower.json @@ -23,7 +23,9 @@ "angular-elastic": "~2.4.2", "angular-elastic-input": "~2.0.1", "angular-xeditable" : "0.1.8", - "highlightjs": "~8.4.0" + "highlightjs": "~8.4.0", + "datatables": "~1.10.5", + "datatables-tabletools": "~2.2.3" }, "devDependencies": { "angular-mocks": "1.3.8",