Skip to content

Commit

Permalink
Merge pull request #526 from appuniversum/au-data-table-optional-pagi…
Browse files Browse the repository at this point in the history
…nation

Add support for hiding the pagination in the `AuDataTable` component
  • Loading branch information
Windvis authored Nov 12, 2024
2 parents ce33d50 + f125db4 commit 4a2e126
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 1 deletion.
2 changes: 1 addition & 1 deletion addon/components/au-data-table.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
}}
{{/if}}

{{#if this.content}}
{{#if this.showPagination}}
<div class="au-c-data-table__actions au-c-data-table__actions--bottom">
{{au-data-table-number-pagination
page=this.page
Expand Down
3 changes: 3 additions & 0 deletions addon/components/au-data-table.js
Original file line number Diff line number Diff line change
Expand Up @@ -63,4 +63,7 @@ const DataTable = Component.extend({

export default DataTable.extend({
tagName: '',
showPagination: computed('content', 'hidePagination', function () {
return Boolean(this.content) && !this.hidePagination;
}),
});
2 changes: 2 additions & 0 deletions stories/5-components/Tables/AuDataTable.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const Template = (args) => ({
@fields="title description"
@noDataMessage="Geen documenten"
@sort={{this.sort}}
@hidePagination={{this.hidePagination}}
as |t|
>
<t.menu as |menu|>
Expand Down Expand Up @@ -107,4 +108,5 @@ Component.args = {
page: 0,
itemsPerPage: 5,
totalItems: 100,
hidePagination: false,
};
36 changes: 36 additions & 0 deletions tests/integration/components/au-data-table-test.gjs
Original file line number Diff line number Diff line change
Expand Up @@ -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(
<template>
<AuDataTable @fields="name" @content={{content}} @enableSizes="false" />
</template>,
);

assert
.dom('.au-c-pagination')
.exists({ count: 1 }, 'the pagination bar is shown by default');

await render(
<template>
<AuDataTable
@fields="name"
@content={{content}}
@hidePagination={{true}}
/>
</template>,
);

assert
.dom('.au-c-pagination')
.doesNotExist(
'the pagination bar is hidden when `@hidePagination` is true',
);
});
});

0 comments on commit 4a2e126

Please sign in to comment.