Merge branch 'datatable-export-buttons' into 'master'

Datatable export buttons

See merge request VPU/WebComponents/datatableview!1

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

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"
   },

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'},
             ],
         }),
 

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">

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>

common @ 4de91ae3

-Subproject commit 833dd224c7ecab1caf509d83f58211c2346e8b19
+Subproject commit 4de91ae325206fc756ad66df87c0b2490672e552