diff --git a/packages/data-table-view/README.md b/packages/data-table-view/README.md index 63f26c9ab56c551bd6bd488174680cb895843f7a..027a98f4501003ecc140582432aadaa2047f5f4b 100644 --- a/packages/data-table-view/README.md +++ b/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 diff --git a/packages/data-table-view/src/data-table-view.js b/packages/data-table-view/src/data-table-view.js index 0ed3d4a4a6d646600820708fb840463822419ddd..fffd6ffa630efb4f32dfbd8b2be2235c237078f0 100644 --- a/packages/data-table-view/src/data-table-view.js +++ b/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,