Add pagination

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,

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";

packages/editor-ui/src/components/RunData.vue

@@ -175,6 +175,19 @@
 				</div>
 			</div>
 		</div>
+		<div :class="$style.pagination">
+			<el-pagination
+				background
+				:hide-on-single-page="true"
+				:current-page.sync="currentPage"
+				:small="true"
+				:pager-count="5"
+				:page-size="pageSize"
+				layout="prev, pager, next"
+				:class="$style.pagination"
+				:total="dataCount">
+			</el-pagination>
+		</div>
 
 	</div>
 </template>
@@ -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) {
+				const offset = this.pageSize * (this.currentPage - 1);
-					inputData = inputData.slice(0, this.maxDisplayItems);
+				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;
+}
+
 </style>
 
 

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);