feat: Add basic Datatable and Pagination components (#5652)

* feat: add Datatable component * feat: migrate to n8n-pagination and add datatable tests * chore: fix linting issue
2025-12-17 10:02:05 +00:00 · 2023-03-15 18:52:02 +02:00
parent b4e60c3b47
commit 29f2629716
16 changed files with 523 additions and 0 deletions
--- a/packages/design-system/src/components/N8nDatatable/Datatable.vue
+++ b/packages/design-system/src/components/N8nDatatable/Datatable.vue
@@ -0,0 +1,200 @@
+<script lang="ts">
+import { computed, defineComponent, PropType, ref, useCssModule } from 'vue';
+import {
+	DatatableColumn,
+	DatatableRow,
+	DatatableRowDataType,
+} from '@/components/N8nDatatable/mixins';
+import { getValueByPath } from '../../utils';
+import { useI18n } from '../../composables';
+import N8nSelect from '../N8nSelect';
+import N8nOption from '../N8nOption';
+import N8nPagination from '../N8nPagination';
+
+export default defineComponent({
+	name: 'n8n-datatable',
+	components: {
+		N8nSelect,
+		N8nOption,
+		N8nPagination,
+	},
+	props: {
+		columns: {
+			type: Array as PropType<DatatableColumn[]>,
+			required: true,
+		},
+		rows: {
+			type: Array as PropType<DatatableRow[]>,
+			required: true,
+		},
+		pagination: {
+			type: Boolean,
+			default: true,
+		},
+		rowsPerPage: {
+			type: Number,
+			default: 10,
+		},
+	},
+	setup(props) {
+		const { t } = useI18n();
+		const rowsPerPageOptions = ref([10, 25, 50, 100]);
+
+		const style = useCssModule();
+		const currentPage = ref(1);
+		const currentRowsPerPage = ref(props.rowsPerPage);
+
+		const totalPages = computed(() => {
+			return Math.ceil(props.rows.length / currentRowsPerPage.value);
+		});
+
+		const totalRows = computed(() => {
+			return props.rows.length;
+		});
+
+		const visibleRows = computed(() => {
+			const start = (currentPage.value - 1) * currentRowsPerPage.value;
+			const end = start + currentRowsPerPage.value;
+
+			return props.rows.slice(start, end);
+		});
+
+		const classes = computed(() => {
+			return {
+				datatable: true,
+				[style.datatableWrapper]: true,
+			};
+		});
+		function getTrClass() {
+			return {
+				[style.datatableRow]: true,
+			};
+		}
+
+		function onRowsPerPageChange(value: number) {
+			currentRowsPerPage.value = value;
+
+			const maxPage = Math.ceil(totalRows.value / currentRowsPerPage.value);
+			if (maxPage < currentPage.value) {
+				currentPage.value = maxPage;
+			}
+		}
+
+		function getTdValue(row: DatatableRow, column: DatatableColumn) {
+			return getValueByPath<DatatableRowDataType>(row, column.path);
+		}
+
+		return {
+			t,
+			classes,
+			currentPage,
+			totalPages,
+			totalRows,
+			visibleRows,
+			currentRowsPerPage,
+			rowsPerPageOptions,
+			getTdValue,
+			getTrClass,
+			onRowsPerPageChange,
+		};
+	},
+});
+</script>
+
+<template>
+	<div :class="classes" v-on="$listeners">
+		<table :class="$style.datatable">
+			<thead :class="$style.datatableHeader">
+				<tr>
+					<th v-for="column in columns" :key="column.id">
+						{{ column.label }}
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="row in visibleRows" :key="row.id" :class="getTrClass(row)">
+					<td v-for="column in columns" :key="column.id">
+						<component v-if="column.render" :is="column.render" :row="row" :column="column" />
+						<span v-else>{{ getTdValue(row, column) }}</span>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+
+		<div :class="$style.pagination">
+			<n8n-pagination
+				v-if="totalPages > 1"
+				background
+				:current-page.sync="currentPage"
+				:pager-count="5"
+				:page-size="currentRowsPerPage"
+				layout="prev, pager, next"
+				:total="totalRows"
+			/>
+
+			<div :class="$style.pageSizeSelector">
+				<n8n-select
+					size="mini"
+					:value="currentRowsPerPage"
+					@input="onRowsPerPageChange"
+					popper-append-to-body
+				>
+					<template #prepend>{{ t('datatable.pageSize') }}</template>
+					<n8n-option v-for="size in rowsPerPageOptions" :key="size" :label="size" :value="size" />
+					<n8n-option :label="`All`" :value="totalRows"> </n8n-option>
+				</n8n-select>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" module>
+.datatableWrapper {
+	display: block;
+	width: 100%;
+}
+
+.datatable {
+	width: 100%;
+}
+
+.datatableHeader {
+	background: var(--color-background-base);
+
+	th {
+		text-align: left;
+		padding: var(--spacing-s) var(--spacing-2xs);
+	}
+}
+
+.datatableRow {
+	td {
+		color: var(--color-text-base);
+		padding: var(--spacing-s) var(--spacing-2xs);
+	}
+
+	&:nth-of-type(even) {
+		background: var(--color-background-xlight);
+	}
+
+	&:nth-of-type(odd) {
+		background: var(--color-background-light);
+	}
+}
+
+.pagination {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	bottom: 0;
+	overflow: auto;
+	margin-top: var(--spacing-s);
+}
+
+.pageSizeSelector {
+	text-transform: capitalize;
+	max-width: 150px;
+	flex: 0 1 auto;
+}
+</style>