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,
+ );
+ });
});
});