From d4f9c7fbafbbb83f3316ec525db3c9effeca7dcb Mon Sep 17 00:00:00 2001
From: "Neuber, Eugen" <eugen.neuber@tugraz.at>
Date: Fri, 29 Nov 2019 10:28:00 +0100
Subject: [PATCH] Merge branch 'datatable-export-buttons' into 'master'
Datatable export buttons
See merge request VPU/WebComponents/datatableview!1
---
packages/data-table-view/README.md | 4 +++
packages/data-table-view/package.json | 5 ++-
packages/data-table-view/rollup.config.js | 3 +-
.../src/vpu-data-table-view-demo.js | 4 +--
.../src/vpu-data-table-view.js | 33 +++++++++++++++++++
packages/data-table-view/vendor/common | 2 +-
6 files changed, 46 insertions(+), 5 deletions(-)
diff --git a/packages/data-table-view/README.md b/packages/data-table-view/README.md
index 027a98f4..6a3844ae 100644
--- a/packages/data-table-view/README.md
+++ b/packages/data-table-view/README.md
@@ -17,6 +17,10 @@
- example `<vpu-data-table-view searching></vpu-data-table-view>`
- `columns.count` (optional, default: 1): add placeholder columns before first table setup
- example `<vpu-data-table-view column-count="7"></vpu-data-table-view>`
+- `exportable` (optional): set to display export buttons
+ - example `<vpu-data-table-view exportable></pu-data-table-view>`
+- `export-name` (optional, default: 'Data Export'): add name for download file (without extension)
+ - example `<vpu-data-table-view exportable export-name="All Items"></pu-data-table-view>`
# Local development
```bash
diff --git a/packages/data-table-view/package.json b/packages/data-table-view/package.json
index 7f3bd00c..0bd053b9 100644
--- a/packages/data-table-view/package.json
+++ b/packages/data-table-view/package.json
@@ -28,11 +28,14 @@
},
"dependencies": {
"@webcomponents/webcomponentsjs": "^2.2.10",
- "datatables.net-dt": "^1.10.19",
+ "datatables.net-buttons": "^1.6.1",
+ "datatables.net-buttons-dt": "^1.6.1",
+ "datatables.net-dt": "^1.10.20",
"datatables.net-responsive": "^2.2.3",
"datatables.net-responsive-dt": "^2.2.3",
"i18next": "^17.0.3",
"jquery": "^3.4.1",
+ "jszip": "^3.2.2",
"lit-element": "^2.2.1",
"lit-html": "^1.1.1"
},
diff --git a/packages/data-table-view/rollup.config.js b/packages/data-table-view/rollup.config.js
index 4c24e562..1aaa50af 100644
--- a/packages/data-table-view/rollup.config.js
+++ b/packages/data-table-view/rollup.config.js
@@ -33,7 +33,7 @@ export default {
if (warning.code === 'CIRCULAR_DEPENDENCY') {
return;
}
- throw new Error(warning);
+ //throw new Error(warning);
},
watch: {
chokidar: true,
@@ -76,6 +76,7 @@ export default {
{src: 'node_modules/datatables.net-dt/css', dest: 'dist/local/vpu-data-table-view'},
{src: 'node_modules/datatables.net-dt/images', dest: 'dist/local/vpu-data-table-view'},
{src: 'node_modules/datatables.net-responsive-dt/css', dest: 'dist/local/vpu-data-table-view'},
+ {src: 'node_modules/datatables.net-buttons-dt/css', dest: 'dist/local/vpu-data-table-view'},
],
}),
diff --git a/packages/data-table-view/src/vpu-data-table-view-demo.js b/packages/data-table-view/src/vpu-data-table-view-demo.js
index 588ced41..3d8a8644 100644
--- a/packages/data-table-view/src/vpu-data-table-view-demo.js
+++ b/packages/data-table-view/src/vpu-data-table-view-demo.js
@@ -160,9 +160,9 @@ class DataTableViewDemo extends LitElement {
</div>
${this.getAuthComponentHtml()}
<div class="content">
- <h4>DataTable: with data, paging and searching</h4>
+ <h4>DataTable: with data, paging and searching AND exportable</h4>
<div class="box">
- <vpu-data-table-view lang="${this.lang}" paging searching id="vdtv1"></vpu-data-table-view>
+ <vpu-data-table-view lang="${this.lang}" paging searching exportable export-name="Demo Export" id="vdtv1"></vpu-data-table-view>
</div>
<h4>DataTable: no data, no paging, no searching</h4>
<div class="box">
diff --git a/packages/data-table-view/src/vpu-data-table-view.js b/packages/data-table-view/src/vpu-data-table-view.js
index fdb69d55..2d9aaf07 100644
--- a/packages/data-table-view/src/vpu-data-table-view.js
+++ b/packages/data-table-view/src/vpu-data-table-view.js
@@ -2,6 +2,11 @@ import $ from 'jquery';
import dt from 'datatables.net';
import resp from 'datatables.net-responsive';
import resp2 from 'datatables.net-responsive-dt';
+import jszip from 'jszip/dist/jszip.js';
+import bttn from 'datatables.net-buttons-dt';
+import bttn2 from 'datatables.net-buttons';
+import bttnHtml5 from 'datatables.net-buttons/js/buttons.html5.js';
+import bttnPrint from 'datatables.net-buttons/js/buttons.print.js';
import {i18n} from './i18n';
import {css, html, LitElement} from 'lit-element';
import de from '../assets/datatables/i18n/German';
@@ -13,6 +18,10 @@ import * as commonStyles from 'vpu-common/styles';
dt(window, $);
resp(window, $);
resp2(window, $);
+bttn(window, $);
+bttn2(window, $);
+bttnHtml5(window, $, jszip);
+bttnPrint(window, $);
class DataTableView extends LitElement {
constructor() {
@@ -28,6 +37,8 @@ class DataTableView extends LitElement {
this.data = [];
this.cc = 1;
this.cssStyle = '';
+ this.exportable = false;
+ this.exportName = 'Data Export';
}
setCSSStyle(style) {
@@ -45,6 +56,8 @@ class DataTableView extends LitElement {
data: { type: Array, attribute: false },
cc: {type: Number, attribute: 'columns-count'},
cssStyle: { type: String, attribute: false },
+ exportable: { type: Boolean },
+ exportName: { type: String, attribute: 'export-name' }
};
}
@@ -83,6 +96,24 @@ class DataTableView extends LitElement {
searching: this.searching,
columns: this.columns,
columnDefs: this.columnDefs,
+ dom: (this.exportable ? 'B' : '') + 'frtip',
+ buttons: [
+ {
+ extend: 'csvHtml5',
+ text: 'CSV',
+ title: this.exportName,
+ },
+ {
+ extend: 'excelHtml5',
+ text: 'XSLX',
+ title: this.exportName,
+ },
+ {
+ extend: 'print',
+ text: 'Drucken',
+ title: this.exportName,
+ },
+ ]
});
try {
@@ -127,10 +158,12 @@ class DataTableView extends LitElement {
commonUtils.initAssetBaseURL('vpu-data-table-view-src');
let dt_css = commonUtils.getAssetURL('local/vpu-data-table-view/css/jquery.dataTables.min.css');
let rs_css = commonUtils.getAssetURL('local/vpu-data-table-view/css/responsive.dataTables.css');
+ let bt_css = commonUtils.getAssetURL('local/vpu-data-table-view/css/button.dataTables.css');
return html`
<link rel="stylesheet" href="${dt_css}">
<link rel="stylesheet" href="${rs_css}">
+ <link rel="stylesheet" href="${bt_css}">
<style>
${this.cssStyle}
</style>
diff --git a/packages/data-table-view/vendor/common b/packages/data-table-view/vendor/common
index 833dd224..4de91ae3 160000
--- a/packages/data-table-view/vendor/common
+++ b/packages/data-table-view/vendor/common
@@ -1 +1 @@
-Subproject commit 833dd224c7ecab1caf509d83f58211c2346e8b19
+Subproject commit 4de91ae325206fc756ad66df87c0b2490672e552
--
GitLab