Skip to content
Snippets Groups Projects
Commit 10909ec5 authored by Neuber, Eugen Ramon's avatar Neuber, Eugen Ramon :speech_balloon: Committed by Reiter, Christoph
Browse files

Add plugin responsive to datatable

TODO: table still too wide (on wide last columns)
parent 40850178
No related branches found
No related tags found
No related merge requests found
......@@ -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/*",
......
......@@ -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'
}),
......
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;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment