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.

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

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() {