diff --git a/packages/data-table-view/src/i18n/de/translation.json b/packages/data-table-view/src/i18n/de/translation.json index ecf2fb3fb06362f3f4ad5ba5dfc0e31836d1f082..d1776ebc73f39cdfe749d64aa2357557c6399189 100644 --- a/packages/data-table-view/src/i18n/de/translation.json +++ b/packages/data-table-view/src/i18n/de/translation.json @@ -1,5 +1,6 @@ { - "print": "Drucken", - "export-excel": "Excel Export", - "export-csv": "CSV Export" + "print": "Drucken", + "export-excel": "Excel Export", + "export-csv": "CSV Export", + "column-search-placeholder": "Nach {{fieldName}} suchen" } \ No newline at end of file diff --git a/packages/data-table-view/src/i18n/en/translation.json b/packages/data-table-view/src/i18n/en/translation.json index 54c3c9737581b5b7d9d8406a0701e13cc065a63d..33ea4a209861b14cd3c7e4c1a4902a6fab07bd89 100644 --- a/packages/data-table-view/src/i18n/en/translation.json +++ b/packages/data-table-view/src/i18n/en/translation.json @@ -1,5 +1,6 @@ { - "print": "Print", - "export-excel": "Excel Export", - "export-csv": "CSV Export" + "print": "Print", + "export-excel": "Excel Export", + "export-csv": "CSV Export", + "column-search-placeholder": "Search for {{fieldName}}" } \ No newline at end of file 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 abef4ea7aef85f283675971c94887a3554d3ce6c..3873186b50ad7c256f9f619759ca85eb5877811a 100644 --- a/packages/data-table-view/src/vpu-data-table-view.js +++ b/packages/data-table-view/src/vpu-data-table-view.js @@ -89,7 +89,7 @@ class DataTableView extends LitElement { return this; } - set_datatable(data) { + set_datatable(data, languageChange = false) { const lang_obj = this.lang === 'de' ? de : en; if (typeof this.columns === 'undefined' || !this.columns.length) { @@ -100,7 +100,11 @@ class DataTableView extends LitElement { if (this.columnSearching) { const existing_tfoot = this.shadowRoot.querySelector('table tfoot'); - if (existing_tfoot === null || !existing_tfoot.hasChildNodes()) { + if (existing_tfoot === null || !existing_tfoot.hasChildNodes() || languageChange) { + if (existing_tfoot !== null) { + existing_tfoot.remove(); + } + const fragment = document.createDocumentFragment(); const tfoot = document.createElement('tfoot'); const tr = document.createElement('tr'); @@ -113,7 +117,7 @@ class DataTableView extends LitElement { input.type = 'text'; input.className = 'column-search-line'; input.id = 'input-col-' + index; - input.placeholder = 'Search in ' + element.title; + input.placeholder = i18n.t('column-search-placeholder', {fieldName: element.title}); th.appendChild(input); } tr.appendChild(th); @@ -207,15 +211,18 @@ class DataTableView extends LitElement { } update(changedProperties) { + let languageChange = false; + changedProperties.forEach((oldValue, propName) => { if (propName === "lang") { i18n.changeLanguage(this.lang).catch(e => { console.log(e)}); + languageChange = true; } }); super.update(changedProperties); - this.updateComplete.then(this.set_datatable(this.data)).catch(e => { console.log(e)}); + this.updateComplete.then(this.set_datatable(this.data, languageChange)).catch(e => { console.log(e)}); } static get styles() {