From 10909ec5a9964960f0c3831769cdbe0ff7b99cfd Mon Sep 17 00:00:00 2001
From: Eugen Neuber <eugen.neuber@tugraz.at>
Date: Wed, 14 Aug 2019 11:55:10 +0200
Subject: [PATCH] Add plugin responsive to datatable
TODO: table still too wide (on wide last columns)
---
packages/data-table-view/package.json | 8 +++++---
packages/data-table-view/rollup.config.js | 5 +++--
packages/data-table-view/src/data-table-view.js | 16 ++++++++++++++++
3 files changed, 24 insertions(+), 5 deletions(-)
diff --git a/packages/data-table-view/package.json b/packages/data-table-view/package.json
index 044e2089..f629063d 100644
--- a/packages/data-table-view/package.json
+++ b/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/*",
diff --git a/packages/data-table-view/rollup.config.js b/packages/data-table-view/rollup.config.js
index 8c039b40..88cddf15 100644
--- a/packages/data-table-view/rollup.config.js
+++ b/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'
}),
diff --git a/packages/data-table-view/src/data-table-view.js b/packages/data-table-view/src/data-table-view.js
index d5ebca20..e3b990e6 100644
--- a/packages/data-table-view/src/data-table-view.js
+++ b/packages/data-table-view/src/data-table-view.js
@@ -1,5 +1,7 @@
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;
--
GitLab