From 2b7ae8c8c49afc3f025108e34fcfe7028db3da58 Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Tue, 3 Dec 2019 12:56:19 +0100
Subject: [PATCH] Don't require a columns-count attribute
Instead infer that from the columns and defer the init of the table to when we actually set
the columns data.
---
.../src/vpu-data-table-view-demo.js | 4 ++--
.../src/vpu-data-table-view.js | 21 +++++++++----------
2 files changed, 12 insertions(+), 13 deletions(-)
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 56426b7a..a252e215 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
@@ -163,12 +163,12 @@ class DataTableViewDemo extends LitElement {
<h4>DataTable: with data, paging and searching AND exportable</h4>
<div class="box">
<vpu-data-table-view paging searching exportable export-name="Demo Export"
- lang="${this.lang}" id="vdtv1" columns-count="5"></vpu-data-table-view>
+ lang="${this.lang}" id="vdtv1"></vpu-data-table-view>
</div>
<h4>DataTable: no data, no paging, no searching</h4>
<div class="box">
<button @click="${this.vdtv2_add_rows}">noch etwas...</button>
- <vpu-data-table-view lang="${this.lang}" id="vdtv2" columns-count="5">></vpu-data-table-view>
+ <vpu-data-table-view lang="${this.lang}" id="vdtv2">></vpu-data-table-view>
</div>
</div>
<div class="content">
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 c2ea0a35..3d5e9cc6 100644
--- a/packages/data-table-view/src/vpu-data-table-view.js
+++ b/packages/data-table-view/src/vpu-data-table-view.js
@@ -32,10 +32,9 @@ class DataTableView extends LitElement {
this.responsive = null;
this.paging = false;
this.searching = false;
- this.columns = [{title: 'uninitialized'}];
+ this.columns = [];
this.columnDefs = [];
this.data = [];
- this.cc = 1;
this.cssStyle = '';
this.exportable = false;
this.exportName = 'Data Export';
@@ -54,7 +53,6 @@ class DataTableView extends LitElement {
columns: { type: Array, attribute: false },
columnDefs: { type: Array, attribute: false },
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' }
@@ -82,10 +80,10 @@ class DataTableView extends LitElement {
set_datatable(data) {
const lang_obj = this.lang === 'de' ? de : en;
- if (this.cc > this.columns.length) {
- for (let i = this.columns.length; i < this.cc; ++i) {
- this.columns.push({title: ''});
- }
+ if (!this.columns.length) {
+ if (data.length)
+ throw new Error('columns not set-up');
+ return;
}
this.table = $(this.shadowRoot.querySelector('table')).DataTable({
@@ -125,9 +123,9 @@ class DataTableView extends LitElement {
} catch (e) {
// XXX: it throws, but it still works
}
- if (data) {
- this.data = data;
- }
+
+ this.data = data;
+
this.table.clear().rows.add(this.data).draw();
}
@@ -139,7 +137,8 @@ class DataTableView extends LitElement {
});
super.update(changedProperties);
- this.updateComplete.then(this.set_datatable()).catch(e => { console.log(e)});
+
+ this.updateComplete.then(this.set_datatable(this.data)).catch(e => { console.log(e)});
}
static get styles() {
--
GitLab