Add placeholder for columns before table init

packages/data-table-view/README.md

@@ -15,6 +15,8 @@
     - example `<vpu-data-table-view paging></vpu-data-table-view>`
 - `searching` (optional, required if a search box is desired)
     - example `<vpu-data-table-view searching></vpu-data-table-view>`
+- `columns.count` (optional, default: 1): add placeholder columns before first table setup
+    - example `<vpu-data-table-view column-count="7"></vpu-data-table-view>`
 
 # Local development
 ```bash

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

@@ -28,6 +28,7 @@ class DataTableView extends LitElement {
         this.columns = [{title: 'uninitialized'}];
         this.columnDefs = [];
         this.data = [];
+        this.cc = 1;
     }
 
     static get properties() {
@@ -39,6 +40,7 @@ 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'},
         };
     }
 
@@ -63,6 +65,12 @@ 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: ''});
+            }
+        }
+
         this.table = $(this.shadowRoot.querySelector('table')).DataTable({
             destroy: true,
             autoWidth: false,