diff --git a/packages/design-system/src/components/N8nDatatable/Datatable.vue b/packages/design-system/src/components/N8nDatatable/Datatable.vue index 38dbf44ab7626..8e733e0758725 100644 --- a/packages/design-system/src/components/N8nDatatable/Datatable.vue +++ b/packages/design-system/src/components/N8nDatatable/Datatable.vue @@ -7,6 +7,8 @@ import type { DatatableColumn, DatatableRow, DatatableRowDataType } from '../../ import { useI18n } from '../../composables/useI18n'; import { getValueByPath } from '../../utils'; +const ALL_ROWS = -1; + interface DatatableProps { columns: DatatableColumn[]; rows: DatatableRow[]; @@ -41,6 +43,8 @@ const totalRows = computed(() => { }); const visibleRows = computed(() => { + if (props.rowsPerPage === ALL_ROWS) return props.rows; + const start = (props.currentPage - 1) * props.rowsPerPage; const end = start + props.rowsPerPage; @@ -59,6 +63,11 @@ function onUpdateCurrentPage(value: number) { function onRowsPerPageChange(value: number) { emit('update:rowsPerPage', value); + if (value === ALL_ROWS) { + onUpdateCurrentPage(1); + return; + } + const maxPage = Math.ceil(totalRows.value / value); if (maxPage < props.currentPage) { onUpdateCurrentPage(maxPage); @@ -131,7 +140,7 @@ function getThStyle(column: DatatableColumn) { :label="`${size}`" :value="size" /> - + diff --git a/packages/design-system/src/components/N8nDatatable/__tests__/Datatable.spec.ts b/packages/design-system/src/components/N8nDatatable/__tests__/Datatable.spec.ts index 98b4d25f955ca..3bead6c227333 100644 --- a/packages/design-system/src/components/N8nDatatable/__tests__/Datatable.spec.ts +++ b/packages/design-system/src/components/N8nDatatable/__tests__/Datatable.spec.ts @@ -75,5 +75,26 @@ describe('components', () => { ); expect(wrapper.container.querySelector('tbody td')?.textContent).toEqual('Row slot'); }); + + it('should render all rows when rowsPerPage is set to -1', () => { + const wrapper = render(N8nDatatable, { + props: { columns, rows, rowsPerPage: -1 }, + global: { stubs }, + }); + + const pagination = wrapper.container.querySelector('.pagination'); + expect(pagination?.querySelector('.el-pager')).toBeNull(); + + const pageSizeSelector = wrapper.container.querySelector('.pageSizeSelector'); + expect(pageSizeSelector?.textContent).toContain('Page size'); + + const allOption = wrapper.getByText('All'); + expect(allOption).not.toBeNull(); + + expect(wrapper.container.querySelectorAll('tbody tr').length).toEqual(rows.length); + expect(wrapper.container.querySelectorAll('tbody tr td').length).toEqual( + columns.length * rows.length, + ); + }); }); });