diff --git a/addons/rose/addon/components/rose/table.stories.mdx b/addons/rose/addon/components/rose/table.stories.mdx
index df20dcb17..353980423 100644
--- a/addons/rose/addon/components/rose/table.stories.mdx
+++ b/addons/rose/addon/components/rose/table.stories.mdx
@@ -7,7 +7,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
# Table
-A table component to display data in structure of rows and columns. It supports `header` and `body` 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 table cells.
```htmlbars
@@ -27,6 +27,11 @@ A table component to display data in structure of rows and columns. It supports
+
+
+
+
+
```
@@ -50,6 +55,11 @@ A table component to display data in structure of rows and columns. It supports
+
+
+
+
+
`,
context: {}
diff --git a/addons/rose/addon/components/rose/table/footer.js b/addons/rose/addon/components/rose/table/footer.js
new file mode 100644
index 000000000..ff0346354
--- /dev/null
+++ b/addons/rose/addon/components/rose/table/footer.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/table/footer';
+
+export default Component.extend({
+ layout,
+ tagName: '',
+});
diff --git a/addons/rose/addon/templates/components/rose/table.hbs b/addons/rose/addon/templates/components/rose/table.hbs
index 1346d685c..580885405 100644
--- a/addons/rose/addon/templates/components/rose/table.hbs
+++ b/addons/rose/addon/templates/components/rose/table.hbs
@@ -6,5 +6,6 @@
{{yield (hash
header=(component 'rose/table/header')
body=(component 'rose/table/body')
+ footer=(component 'rose/table/footer')
)}}
diff --git a/addons/rose/addon/templates/components/rose/table/cell.hbs b/addons/rose/addon/templates/components/rose/table/cell.hbs
index cb7a4d31d..211909d86 100644
--- a/addons/rose/addon/templates/components/rose/table/cell.hbs
+++ b/addons/rose/addon/templates/components/rose/table/cell.hbs
@@ -4,7 +4,7 @@
{{yield}}
{{else}}
-
+ |
{{@text}}
{{yield}}
|
diff --git a/addons/rose/addon/templates/components/rose/table/footer.hbs b/addons/rose/addon/templates/components/rose/table/footer.hbs
new file mode 100644
index 000000000..107b0b53f
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/table/footer.hbs
@@ -0,0 +1,5 @@
+
diff --git a/addons/rose/addon/templates/components/rose/table/row.hbs b/addons/rose/addon/templates/components/rose/table/row.hbs
index af67886a1..aae991def 100644
--- a/addons/rose/addon/templates/components/rose/table/row.hbs
+++ b/addons/rose/addon/templates/components/rose/table/row.hbs
@@ -1,5 +1,5 @@
{{yield (hash
- cell=(component 'rose/table/cell' header=@header)
+ cell=(component 'rose/table/cell' header=@header footer=@footer)
)}}
diff --git a/addons/rose/app/components/rose/table/footer.js b/addons/rose/app/components/rose/table/footer.js
new file mode 100644
index 000000000..8fedb5800
--- /dev/null
+++ b/addons/rose/app/components/rose/table/footer.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/table/footer';
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index e01c76049..0e4edd731 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -223,6 +223,11 @@
+
+
+
+
+
diff --git a/addons/rose/tests/integration/components/rose/table-test.js b/addons/rose/tests/integration/components/rose/table-test.js
index 6f792bd70..06f2a5b8c 100644
--- a/addons/rose/tests/integration/components/rose/table-test.js
+++ b/addons/rose/tests/integration/components/rose/table-test.js
@@ -36,4 +36,11 @@ module('Integration | Component | rose/table', function (hooks) {
`);
assert.ok(find('tbody'));
});
+
+ test('it renders with footer', async function (assert) {
+ await render(hbs`
+
+ `);
+ assert.ok(find('tfoot'));
+ });
});
diff --git a/addons/rose/tests/integration/components/rose/table/cell-test.js b/addons/rose/tests/integration/components/rose/table/cell-test.js
index b4dfb8de8..10a88e890 100644
--- a/addons/rose/tests/integration/components/rose/table/cell-test.js
+++ b/addons/rose/tests/integration/components/rose/table/cell-test.js
@@ -23,4 +23,10 @@ module('Integration | Component | rose/table/cell', function (hooks) {
assert.ok(find('.rose-table-cell'));
assert.ok(find('.rose-table-header-cell'));
});
+
+ test('it renders as footer cell', async function (assert) {
+ await render(hbs``);
+ assert.ok(find('.rose-table-cell'));
+ assert.ok(find('.rose-table-footer-cell'));
+ });
});
diff --git a/addons/rose/tests/integration/components/rose/table/footer-test.js b/addons/rose/tests/integration/components/rose/table/footer-test.js
new file mode 100644
index 000000000..1e4cd8997
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/table/footer-test.js
@@ -0,0 +1,36 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/table/footer', function (hooks) {
+ setupRenderingTest(hooks);
+
+ test('it renders', async function (assert) {
+ await render(hbs``);
+ assert.ok(find('tfoot'));
+ assert.ok(find('.rose-table-footer'));
+ });
+
+ test('it renders with attributes', async function (assert) {
+ await render(hbs``);
+ assert.ok(find('#footer'));
+ });
+
+ test('it renders with row', async function (assert) {
+ await render(hbs`
+
+ `);
+ assert.ok(find('tr'));
+ });
+
+ test('it renders with row cell', async function (assert) {
+ await render(hbs`
+
+
+
+ `);
+ assert.ok(find('td'));
+ assert.ok(find('.rose-table-cell'));
+ });
+});
diff --git a/addons/rose/tests/integration/components/rose/table/header-test.js b/addons/rose/tests/integration/components/rose/table/header-test.js
index 9c1c7c795..f6ae7c289 100644
--- a/addons/rose/tests/integration/components/rose/table/header-test.js
+++ b/addons/rose/tests/integration/components/rose/table/header-test.js
@@ -18,17 +18,17 @@ module('Integration | Component | rose/table/header', function (hooks) {
});
test('it renders with row', async function (assert) {
- await render(hbs`
-
+ await render(hbs`
+
`);
assert.ok(find('tr'));
});
test('it renders with row cell', async function (assert) {
- await render(hbs`
-
+ await render(hbs`
+
-
+
`);
assert.ok(find('th'));
assert.ok(find('.rose-table-header-cell'));