diff --git a/packages/data-table-view/README.md b/packages/data-table-view/README.md
index 027a98f4501003ecc140582432aadaa2047f5f4b..6a3844ae8033da12ae5e8ef5c6acd0a348b17ccf 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 7f3bd00ca83ab60a53b92806fb7fcf72249133a8..0bd053b9743c1803afa08c0b2167710743f36686 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 4c24e56201c3c8822d72faad9647e08c65cb22ce..1aaa50af7f4ac910336e849d60a4fd25c3503c2d 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 588ced414d2397c911050af7e434ccc5823b7953..3d8a86448a785743df0f3f5e4dbe2dd10ff983e1 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 fdb69d55470209040f26d4c7fb85039d9a919b5f..2d9aaf07b1e44149ee6d758e50289b88c32353c1 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 833dd224c7ecab1caf509d83f58211c2346e8b19..4de91ae325206fc756ad66df87c0b2490672e552 160000
--- a/packages/data-table-view/vendor/common
+++ b/packages/data-table-view/vendor/common
@@ -1 +1 @@
-Subproject commit 833dd224c7ecab1caf509d83f58211c2346e8b19
+Subproject commit 4de91ae325206fc756ad66df87c0b2490672e552