diff --git a/addon/components/au-data-table.hbs b/addon/components/au-data-table.hbs
index d4885c23d..45f707d43 100644
--- a/addon/components/au-data-table.hbs
+++ b/addon/components/au-data-table.hbs
@@ -42,7 +42,7 @@
}}
{{/if}}
- {{#if this.content}}
+ {{#if this.showPagination}}
{{au-data-table-number-pagination
page=this.page
diff --git a/addon/components/au-data-table.js b/addon/components/au-data-table.js
index 9107a1e65..7b3b40ebc 100644
--- a/addon/components/au-data-table.js
+++ b/addon/components/au-data-table.js
@@ -63,4 +63,7 @@ const DataTable = Component.extend({
export default DataTable.extend({
tagName: '',
+ showPagination: computed('content', 'hidePagination', function () {
+ return Boolean(this.content) && !this.hidePagination;
+ }),
});
diff --git a/stories/5-components/Tables/AuDataTable.stories.js b/stories/5-components/Tables/AuDataTable.stories.js
index 42023d0b7..d402f8c1f 100644
--- a/stories/5-components/Tables/AuDataTable.stories.js
+++ b/stories/5-components/Tables/AuDataTable.stories.js
@@ -16,6 +16,7 @@ const Template = (args) => ({
@fields="title description"
@noDataMessage="Geen documenten"
@sort={{this.sort}}
+ @hidePagination={{this.hidePagination}}
as |t|
>
@@ -107,4 +108,5 @@ Component.args = {
page: 0,
itemsPerPage: 5,
totalItems: 100,
+ hidePagination: false,
};
diff --git a/tests/integration/components/au-data-table-test.gjs b/tests/integration/components/au-data-table-test.gjs
index 9075487ec..3afdae705 100644
--- a/tests/integration/components/au-data-table-test.gjs
+++ b/tests/integration/components/au-data-table-test.gjs
@@ -26,4 +26,40 @@ module('Integration | Component | au-data-table', function (hooks) {
assert.dom('.au-c-data-table').exists({ count: 1 });
});
+
+ test('it conditionally shows a pagination bar', async function (assert) {
+ const content = [{ name: 'foo' }, { name: 'bar' }];
+ content.meta = {
+ pagination: {
+ first: { number: 1 },
+ last: { number: 10 },
+ },
+ };
+
+ await render(
+
+
+ ,
+ );
+
+ assert
+ .dom('.au-c-pagination')
+ .exists({ count: 1 }, 'the pagination bar is shown by default');
+
+ await render(
+
+
+ ,
+ );
+
+ assert
+ .dom('.au-c-pagination')
+ .doesNotExist(
+ 'the pagination bar is hidden when `@hidePagination` is true',
+ );
+ });
});