diff --git a/addons/rose/addon/components/rose/table.stories.mdx b/addons/rose/addon/components/rose/table.stories.mdx
index 0af8d7d0b..a720bd877 100644
--- a/addons/rose/addon/components/rose/table.stories.mdx
+++ b/addons/rose/addon/components/rose/table.stories.mdx
@@ -1,22 +1,20 @@
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
# Table
-A table component to display data in structure of rows and columns. It supports `header`, `body` and `footer` optional definitions. Each definition allows for a table row to be defined with table cells.
+A table component to display data in structure of rows and columns. It supports `header`, `body` and `footer` optional definitions. Each definition allows for a table `row` to be defined with either a `cell` or `headerCell` table element.
```htmlbars
- Address
- Host Set
- Name
- Description
+ Address
+ Host Set
+ Name
+ Description
@@ -41,10 +39,10 @@ A table component to display data in structure of rows and columns. It supports
- Address
- Host Set
- Name
- Description
+ Address
+ Host Set
+ Name
+ Description
diff --git a/addons/rose/addon/templates/components/rose/table.hbs b/addons/rose/addon/templates/components/rose/table.hbs
index ae0208227..d50ec970e 100644
--- a/addons/rose/addon/templates/components/rose/table.hbs
+++ b/addons/rose/addon/templates/components/rose/table.hbs
@@ -6,15 +6,12 @@
{{yield (hash
header=(component 'rose/table/section'
tagName='thead'
- cellTagName='th'
classNames='rose-table-header')
body=(component 'rose/table/section'
tagName='tbody'
- cellTagName='td'
classNames='rose-table-body')
footer=(component 'rose/table/section'
tagName='tfoot'
- cellTagName='td'
classNames='rose-table-foot')
)}}
diff --git a/addons/rose/addon/templates/components/rose/table/row.hbs b/addons/rose/addon/templates/components/rose/table/row.hbs
index 4ed16dac0..e5bad550e 100644
--- a/addons/rose/addon/templates/components/rose/table/row.hbs
+++ b/addons/rose/addon/templates/components/rose/table/row.hbs
@@ -1,6 +1,12 @@
-{{yield (hash
- cell=(component 'rose/anonymous'
- tagName=@cellTagName
- class='rose-table-cell'
- )
-)}}
+
+ {{yield (hash
+ cell=(component 'rose/anonymous'
+ tagName='td'
+ class='rose-table-cell'
+ )
+ headerCell=(component 'rose/anonymous'
+ tagName='th'
+ class='rose-table-header-cell'
+ )
+ )}}
+
diff --git a/addons/rose/addon/templates/components/rose/table/section.hbs b/addons/rose/addon/templates/components/rose/table/section.hbs
index b1b8b1d65..d39e97260 100644
--- a/addons/rose/addon/templates/components/rose/table/section.hbs
+++ b/addons/rose/addon/templates/components/rose/table/section.hbs
@@ -1,6 +1,3 @@
{{yield (hash
- row=(component 'rose/table/row'
- tagName='tr'
- cellTagName=@cellTagName
- class='rose-table-row')
+ row=(component 'rose/table/row')
)}}
\ No newline at end of file
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 2960a10fc..5c6efcf85 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -1,15 +1,15 @@
- Address
- Host Set
- Name
- Description
+ Address
+ Host Set
+ Name
+ Description
- 1.1.1.1
+ 1.1.1.1
host-set-1, host-set-2
optional name
description
diff --git a/addons/rose/tests/integration/components/rose/table/row-test.js b/addons/rose/tests/integration/components/rose/table/row-test.js
index 96cf77369..94c57cd08 100644
--- a/addons/rose/tests/integration/components/rose/table/row-test.js
+++ b/addons/rose/tests/integration/components/rose/table/row-test.js
@@ -7,20 +7,29 @@ module('Integration | Component | rose/table/row', function (hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
- await render(hbs``);
- assert.ok(find('tag'));
+ await render(hbs``);
+ assert.ok(find('tr'));
+ assert.ok(find('.rose-table-row'));
});
test('it renders with attributes', async function (assert) {
- await render(hbs``);
+ await render(hbs``);
assert.ok(find('#row'));
});
test('it renders a cell', async function (assert) {
- await render(hbs`
+ await render(hbs`
`);
assert.ok(find('td'));
assert.ok(find('.rose-table-cell'));
});
+
+ test('it renders a header cell', async function (assert) {
+ await render(hbs`
+
+ `);
+ assert.ok(find('th'));
+ assert.ok(find('.rose-table-header-cell'));
+ });
});
diff --git a/addons/rose/tests/integration/components/rose/table/section-test.js b/addons/rose/tests/integration/components/rose/table/section-test.js
index a64c1d335..6a7a9c64e 100644
--- a/addons/rose/tests/integration/components/rose/table/section-test.js
+++ b/addons/rose/tests/integration/components/rose/table/section-test.js
@@ -18,7 +18,7 @@ module('Integration | Component | rose/table/section', function (hooks) {
});
test('it renders a row', async function (assert) {
- await render(hbs`
+ await render(hbs`
`);
assert.ok(find('tr'));