diff --git a/src/editors/table.js b/src/editors/table.js index 7fcd53643..1f0c3cec4 100644 --- a/src/editors/table.js +++ b/src/editors/table.js @@ -77,19 +77,19 @@ export class TableEditor extends ArrayEditor { const ce = tmp.getChildEditors() const order = tmp.property_order || Object.keys(ce) for (let i = 0; i < order.length; i++) { - const th = this.theme.getTableHeaderCell(ce[order[i]].getTitle()) + const th = this.theme.getTableHeaderCell(ce[order[i]].getTitle(), ce[order[i]].isRequired()) if (ce[order[i]].options.hidden) th.style.display = 'none' this.header_row.appendChild(th) } } else { - this.header_row.appendChild(this.theme.getTableHeaderCell(this.item_title)) + this.header_row.appendChild(this.theme.getTableHeaderCell(this.item_title, this.isRequired())) } tmp.destroy() this.row_holder.innerHTML = '' /* Row Controls column */ - this.controls_header_cell = this.theme.getTableHeaderCell(' ') + this.controls_header_cell = this.theme.getTableHeaderCell(' ', false) this.header_row.appendChild(this.controls_header_cell) /* Add controls */ diff --git a/src/theme.js b/src/theme.js index 9ab0ab1e9..4cd8ce813 100644 --- a/src/theme.js +++ b/src/theme.js @@ -407,7 +407,7 @@ export class AbstractTheme { return document.createElement('tbody') } - getTableHeaderCell (text) { + getTableHeaderCell (text, required) { const el = document.createElement('th') el.textContent = text return el diff --git a/src/themes/jqueryui.js b/src/themes/jqueryui.js index 78ef181ce..84a97d6fe 100644 --- a/src/themes/jqueryui.js +++ b/src/themes/jqueryui.js @@ -8,8 +8,8 @@ export class jqueryuiTheme extends AbstractTheme { return el } - getTableHeaderCell (text) { - const el = super.getTableHeaderCell(text) + getTableHeaderCell (text, required) { + const el = super.getTableHeaderCell(text, required) el.classList.add('ui-state-active') el.style.fontWeight = 'bold' return el diff --git a/src/themes/materialize.js b/src/themes/materialize.js index 38f6bd58e..df49f4c66 100644 --- a/src/themes/materialize.js +++ b/src/themes/materialize.js @@ -183,7 +183,7 @@ export class materializeTheme extends AbstractTheme { return document.createElement('tbody') } - getTableHeaderCell (text) { + getTableHeaderCell (text, required) { const el = document.createElement('th') el.textContent = text return el diff --git a/src/themes/spectre.js b/src/themes/spectre.js index 9147cf555..fa30a2e47 100644 --- a/src/themes/spectre.js +++ b/src/themes/spectre.js @@ -290,6 +290,13 @@ export class spectreTheme extends AbstractTheme { return el } + getTableHeaderCell (text, required) { + const el = document.createElement('th') + if (required) el.classList.add('required') + el.textContent = text + return el + } + /* Function for rendering progressbar */ getProgressBar () { const progressBar = super.getProgressBar() diff --git a/src/themes/tailwind.js b/src/themes/tailwind.js index 7e075ca3f..5adc2909b 100644 --- a/src/themes/tailwind.js +++ b/src/themes/tailwind.js @@ -258,8 +258,8 @@ export class tailwindTheme extends AbstractTheme { return el } - getTableHeaderCell (text) { - const el = super.getTableHeaderCell(text) + getTableHeaderCell (text, required) { + const el = super.getTableHeaderCell(text, required) if (this.options.table_border) el.classList.add('je-table-border') else if (this.options.table_hdiv) el.classList.add('je-table-hdiv') else el.classList.add('text-xs', 'border', 'p-0', 'm-0') diff --git a/tests/codeceptjs/issues/_test-template.js b/tests/codeceptjs/issues/_test-template.js new file mode 100644 index 000000000..78846440f --- /dev/null +++ b/tests/codeceptjs/issues/_test-template.js @@ -0,0 +1,5 @@ +Feature('t4'); + +Scenario('test something', (I) => { + +}); diff --git a/tests/codeceptjs/issues/github-762-required-table-header_test.js b/tests/codeceptjs/issues/github-762-required-table-header_test.js new file mode 100644 index 000000000..3b9ef8df5 --- /dev/null +++ b/tests/codeceptjs/issues/github-762-required-table-header_test.js @@ -0,0 +1,12 @@ +Feature('issues/github-762'); + +let themes = new DataTable(['theme']); +themes.add(['spectre']); +themes.add(['bootstrap4']); + +Data(themes).Scenario('test required markers', (I, current) => { + I.amOnPage('issues/github-762.html'); + I.selectOption('#theme_switcher', current.theme); + I.click('Add row'); + I.seeElement('table th.required'); +}); diff --git a/tests/pages/issues/github-762.html b/tests/pages/issues/github-762.html new file mode 100644 index 000000000..396645e6c --- /dev/null +++ b/tests/pages/issues/github-762.html @@ -0,0 +1,74 @@ + + +
+ +