Add plugin responsive to datatable

TODO: table still too wide (on wide last columns)

packages/data-table-view/package.json

@@ -27,11 +27,13 @@
   },
   "dependencies": {
     "@webcomponents/webcomponentsjs": "^2.2.10",
+    "datatables.net-dt": "^1.10.19",
+    "datatables.net-responsive": "^2.2.3",
+    "datatables.net-responsive-dt": "^2.2.3",
     "i18next": "^17.0.3",
-    "lit-element": "^2.1.0",
-    "lit-html": "^1.1.1",
     "jquery": "^3.4.1",
-    "datatables.net-dt": "^1.10.19"
+    "lit-element": "^2.1.0",
+    "lit-html": "^1.1.1"
   },
   "scripts": {
     "clean": "rm dist/*",

packages/data-table-view/rollup.config.js

@@ -12,7 +12,7 @@ const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : '
 console.log("build: " + build);
 
 export default {
-    input: (build != 'test') ? 'src/demo.js' : 'test/**/*.js',
+    input: (build !== 'test') ? 'src/demo.js' : 'test/**/*.js',
     output: {
         file: 'dist/bundle.js',
         format: 'esm'
@@ -43,7 +43,8 @@ export default {
         copy({
             targets: [
                 'node_modules/datatables.net-dt/css',
-                'node_modules/datatables.net-dt/images'
+                'node_modules/datatables.net-dt/images',
+                'node_modules/datatables.net-responsive-dt/css'
             ],
             outputFolder: 'dist/datatables'
         }),

packages/data-table-view/src/data-table-view.js

 import $ from 'jquery';
 import dt from 'datatables.net';
+import resp from 'datatables.net-responsive';
+import resp2 from 'datatables.net-responsive-dt';
 import {setting, getAPiUrl, getAssetURL, } from './utils.js';
 import {i18n} from './i18n';
 import {html, LitElement} from 'lit-element';
@@ -7,6 +9,7 @@ import JSONLD from 'vpu-common/jsonld';
 import commonUtils from 'vpu-common/utils';
 
 dt(window, $);
+resp(window, $);
 
 class DataTableView extends LitElement {
     constructor() {
@@ -24,6 +27,7 @@ class DataTableView extends LitElement {
         this.display_columns = []; // all possible columns, in desired order for the table
         // datatable properties
         this.table = null;
+        this.responsive = null;
         this.paging = 1;
         this.searching = 1;
         //
@@ -100,6 +104,7 @@ class DataTableView extends LitElement {
 
         this.table = $(this.shadowRoot.querySelector('#dt')).DataTable({
             destroy: true,
+            responsive: {details: true},
             language: {
                 url: this.lang === 'de' ? lang_de_url : lang_en_url,
             },
@@ -117,6 +122,15 @@ class DataTableView extends LitElement {
             this.table.clear();
             columns.forEach(function (item, index) { that.table.columns([index]).visible(item.visible === true); });
             rows.forEach(row => this.table.row.add(row));
+            // missing responsive?
+            if (this.responsive === null) {
+                console.log('update_datatable(), responsive:');
+                this.responsive = new $.fn.dataTable.Responsive(this.table, {
+                    details: true
+                });
+                console.dir(this.responsive);
+            }
+            // now ready to draw
             this.table.draw();
         }
     }
@@ -199,8 +213,10 @@ class DataTableView extends LitElement {
 
     render() {
         let dt_css = getAssetURL('datatables/css/jquery.dataTables.min.css');
+        let rs_css = getAssetURL('datatables/css/responsive.dataTables.css');
         return html`
             <link rel="stylesheet" href="${dt_css}">
+            <link rel="stylesheet" href="${rs_css}">
             <style>
                 #dt-parent {
                     display: block;