diff --git a/packages/design-system/src/components/index.js b/packages/design-system/src/components/index.js
index 9bd2f05c99..c472e04f66 100644
--- a/packages/design-system/src/components/index.js
+++ b/packages/design-system/src/components/index.js
@@ -12,6 +12,7 @@ import Switch from 'element-ui/lib/switch';
import Select from 'element-ui/lib/select';
import Option from 'element-ui/lib/option';
import OptionGroup from 'element-ui/lib/option-group';
+import Pagination from 'element-ui/lib/pagination';
import ButtonGroup from 'element-ui/lib/button-group';
import Table from 'element-ui/lib/table';
import TableColumn from 'element-ui/lib/table-column';
@@ -115,6 +116,7 @@ export {
Select,
Option,
OptionGroup,
+ Pagination,
ButtonGroup,
Table,
TableColumn,
diff --git a/packages/design-system/theme/src/index.scss b/packages/design-system/theme/src/index.scss
index 5ac0d3af96..2bc1d28de4 100644
--- a/packages/design-system/theme/src/index.scss
+++ b/packages/design-system/theme/src/index.scss
@@ -2,7 +2,7 @@
@use "./tokens.dark.scss" as dark;
@use "./reset.scss";
@use "./base.scss";
-// @use "./pagination.scss";
+@use "./pagination.scss";
@use "./dialog.scss";
// @use "./autocomplete.scss";
@use "./dropdown.scss";
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 3a224e38af..66aa9f58ce 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -175,6 +175,19 @@
+
+
+
+
@@ -245,12 +258,13 @@ export default mixins(
runIndex: 0,
showData: false,
outputIndex: 0,
- maxDisplayItems: 25 as number | null,
binaryDataDisplayVisible: false,
binaryDataDisplayData: null as IBinaryDisplayData | null,
MAX_DISPLAY_DATA_SIZE,
MAX_DISPLAY_ITEMS_AUTO_ALL,
+ currentPage: 1,
+ pageSize: 10,
};
},
mounted() {
@@ -289,13 +303,6 @@ export default mixins(
const executionData: IRunExecutionData = this.workflowExecution.data;
return executionData.resultData.runData;
},
- maxDisplayItemsOptions (): number[] {
- const options = [25, 50, 100, 250, 500, 1000].filter(option => option <= this.dataCount);
- if (!options.includes(this.dataCount)) {
- options.push(this.dataCount);
- }
- return options;
- },
node (): INodeUi | null {
return this.$store.getters.activeNode;
},
@@ -372,9 +379,8 @@ export default mixins(
return [];
}
- if (this.maxDisplayItems !== null) {
- inputData = inputData.slice(0, this.maxDisplayItems);
- }
+ const offset = this.pageSize * (this.currentPage - 1);
+ inputData = inputData.slice(offset, offset + this.pageSize);
return inputData;
},
@@ -459,7 +465,6 @@ export default mixins(
init() {
// Reset the selected output index every time another node gets selected
this.outputIndex = 0;
- this.maxDisplayItems = 25;
this.refreshDataSize();
if (this.displayMode === 'binary') {
this.closeBinaryDataDisplay();
@@ -641,7 +646,8 @@ export default mixins(
// Check how much data there is to display
const inputData = this.getNodeInputData(this.node, this.runIndex, this.outputIndex);
- const jsonItems = inputData.slice(0, this.maxDisplayItems || inputData.length).map(item => item.json);
+ const offset = this.pageSize * (this.currentPage - 1);
+ const jsonItems = inputData.slice(offset, offset + this.pageSize).map(item => item.json);
this.dataSize = JSON.stringify(jsonItems).length;
@@ -796,6 +802,15 @@ export default mixins(
z-index: 10;
}
+.pagination {
+ position: absolute;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ bottom: 0;
+ padding: 5px;
+}
+
diff --git a/packages/editor-ui/src/plugins/components.ts b/packages/editor-ui/src/plugins/components.ts
index 1082cf9fac..90668f76b8 100644
--- a/packages/editor-ui/src/plugins/components.ts
+++ b/packages/editor-ui/src/plugins/components.ts
@@ -41,6 +41,7 @@ import {
Message,
Notification,
CollapseTransition,
+ Pagination,
Popover,
N8nActionBox,
@@ -135,6 +136,7 @@ Vue.use(Badge);
Vue.use(Card);
Vue.use(ColorPicker);
Vue.use(Container);
+Vue.use(Pagination);
Vue.use(Popover);
Vue.use(VueAgile);