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

packages/design-system/src/components/N8nDatatable/Datatable.stories.ts

@@ -0,0 +1,21 @@
+import N8nDatatable from './Datatable.vue';
+import type { StoryFn } from '@storybook/vue';
+import { rows, columns } from './__tests__/data';
+
+export default {
+	title: 'Atoms/Datatable',
+	component: N8nDatatable,
+};
+
+export const Default: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nDatatable,
+	},
+	template: '<n8n-datatable v-bind="$props"></n8n-datatable>',
+});
+
+Default.args = {
+	columns,
+	rows,
+};

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>

packages/design-system/src/components/N8nDatatable/__tests__/Datatable.spec.ts

@@ -0,0 +1,23 @@
+import { render } from '@testing-library/vue';
+import N8nDatatable from '../Datatable.vue';
+import { rows, columns } from './data';
+
+const stubs = ['n8n-select', 'n8n-option', 'n8n-button', 'n8n-pagination'];
+
+describe('components', () => {
+	describe('N8nDatatable', () => {
+		it('should render correctly', () => {
+			const wrapper = render(N8nDatatable, {
+				propsData: {
+					columns,
+					rows,
+				},
+				stubs,
+			});
+
+			expect(wrapper.container.querySelectorAll('tbody tr').length).toEqual(10);
+			expect(wrapper.container.querySelectorAll('thead tr').length).toEqual(1);
+			expect(wrapper.html()).toMatchSnapshot();
+		});
+	});
+});

packages/design-system/src/components/N8nDatatable/__tests__/__snapshots__/Datatable.spec.ts.snap

@@ -0,0 +1,100 @@
+// Vitest Snapshot v1
+
+exports[`components > N8nDatatable > should render correctly 1`] = `
+"<div class=\\"datatable datatableWrapper\\">
+  <table class=\\"datatable\\">
+    <thead class=\\"datatableHeader\\">
+      <tr>
+        <th> ID </th>
+        <th> Name </th>
+        <th> Age </th>
+        <th> Action </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class=\\"datatableRow\\">
+        <td><span>1</span></td>
+        <td><span>Richard Hendricks</span></td>
+        <td><span>29</span></td>
+        <td><button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
+            <!----><span>Button 1</span></button></td>
+      </tr>
+      <tr class=\\"datatableRow\\">
+        <td><span>2</span></td>
+        <td><span>Bertram Gilfoyle</span></td>
+        <td><span>44</span></td>
+        <td><button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
+            <!----><span>Button 2</span></button></td>
+      </tr>
+      <tr class=\\"datatableRow\\">
+        <td><span>3</span></td>
+        <td><span>Dinesh Chugtai</span></td>
+        <td><span>31</span></td>
+        <td><button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
+            <!----><span>Button 3</span></button></td>
+      </tr>
+      <tr class=\\"datatableRow\\">
+        <td><span>4</span></td>
+        <td><span>Jared Dunn </span></td>
+        <td><span>38</span></td>
+        <td><button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
+            <!----><span>Button 4</span></button></td>
+      </tr>
+      <tr class=\\"datatableRow\\">
+        <td><span>5</span></td>
+        <td><span>Richard Hendricks</span></td>
+        <td><span>29</span></td>
+        <td><button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
+            <!----><span>Button 5</span></button></td>
+      </tr>
+      <tr class=\\"datatableRow\\">
+        <td><span>6</span></td>
+        <td><span>Bertram Gilfoyle</span></td>
+        <td><span>44</span></td>
+        <td><button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
+            <!----><span>Button 6</span></button></td>
+      </tr>
+      <tr class=\\"datatableRow\\">
+        <td><span>7</span></td>
+        <td><span>Dinesh Chugtai</span></td>
+        <td><span>31</span></td>
+        <td><button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
+            <!----><span>Button 7</span></button></td>
+      </tr>
+      <tr class=\\"datatableRow\\">
+        <td><span>8</span></td>
+        <td><span>Jared Dunn </span></td>
+        <td><span>38</span></td>
+        <td><button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
+            <!----><span>Button 8</span></button></td>
+      </tr>
+      <tr class=\\"datatableRow\\">
+        <td><span>9</span></td>
+        <td><span>Richard Hendricks</span></td>
+        <td><span>29</span></td>
+        <td><button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
+            <!----><span>Button 9</span></button></td>
+      </tr>
+      <tr class=\\"datatableRow\\">
+        <td><span>10</span></td>
+        <td><span>Bertram Gilfoyle</span></td>
+        <td><span>44</span></td>
+        <td><button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
+            <!----><span>Button 10</span></button></td>
+      </tr>
+    </tbody>
+  </table>
+  <div class=\\"pagination\\">
+    <n8n-pagination-stub pagesize=\\"10\\" total=\\"15\\" pagercount=\\"5\\" currentpage=\\"1\\" layout=\\"prev, pager, next\\" pagesizes=\\"10,20,30,40,50,100\\" background=\\"true\\"></n8n-pagination-stub>
+    <div class=\\"pageSizeSelector\\">
+      <n8n-select-stub value=\\"10\\" size=\\"mini\\" popperappendtobody=\\"true\\">
+        <n8n-option-stub value=\\"10\\" label=\\"10\\"></n8n-option-stub>
+        <n8n-option-stub value=\\"25\\" label=\\"25\\"></n8n-option-stub>
+        <n8n-option-stub value=\\"50\\" label=\\"50\\"></n8n-option-stub>
+        <n8n-option-stub value=\\"100\\" label=\\"100\\"></n8n-option-stub>
+        <n8n-option-stub value=\\"15\\" label=\\"All\\"></n8n-option-stub>
+      </n8n-select-stub>
+    </div>
+  </div>
+</div>"
+`;

packages/design-system/src/components/N8nDatatable/__tests__/data.ts

@@ -0,0 +1,45 @@
+import { defineComponent, h, PropType } from 'vue';
+import { DatatableRow } from '../mixins';
+import N8nButton from '../../N8nButton';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const ActionComponent = defineComponent({
+	props: {
+		row: {
+			type: Object as PropType<DatatableRow>,
+			default: () => ({}),
+		},
+	},
+	setup(props) {
+		return () => h(N8nButton, {}, [`Button ${props.row.id}`]);
+	},
+});
+
+export const columns = [
+	{ id: 'id', path: 'id', label: 'ID' },
+	{ id: 'name', path: 'name', label: 'Name' },
+	{ id: 'age', path: 'meta.age', label: 'Age' },
+	{
+		id: 'action',
+		label: 'Action',
+		render: ActionComponent,
+	},
+];
+
+export const rows = [
+	{ id: 1, name: 'Richard Hendricks', meta: { age: 29 } },
+	{ id: 2, name: 'Bertram Gilfoyle', meta: { age: 44 } },
+	{ id: 3, name: 'Dinesh Chugtai', meta: { age: 31 } },
+	{ id: 4, name: 'Jared Dunn ', meta: { age: 38 } },
+	{ id: 5, name: 'Richard Hendricks', meta: { age: 29 } },
+	{ id: 6, name: 'Bertram Gilfoyle', meta: { age: 44 } },
+	{ id: 7, name: 'Dinesh Chugtai', meta: { age: 31 } },
+	{ id: 8, name: 'Jared Dunn ', meta: { age: 38 } },
+	{ id: 9, name: 'Richard Hendricks', meta: { age: 29 } },
+	{ id: 10, name: 'Bertram Gilfoyle', meta: { age: 44 } },
+	{ id: 11, name: 'Dinesh Chugtai', meta: { age: 31 } },
+	{ id: 12, name: 'Jared Dunn ', meta: { age: 38 } },
+	{ id: 13, name: 'Richard Hendricks', meta: { age: 29 } },
+	{ id: 14, name: 'Bertram Gilfoyle', meta: { age: 44 } },
+	{ id: 15, name: 'Dinesh Chugtai', meta: { age: 31 } },
+];

packages/design-system/src/components/N8nDatatable/index.ts

@@ -0,0 +1,3 @@
+import N8nDatatable from './Datatable.vue';
+
+export default N8nDatatable;

packages/design-system/src/components/N8nDatatable/mixins.ts

@@ -0,0 +1,16 @@
+import { VNode } from 'vue';
+
+export type DatatableRowDataType = string | number | boolean | null | undefined;
+
+export interface DatatableRow {
+	id: string | number;
+
+	[key: string]: DatatableRowDataType;
+}
+
+export interface DatatableColumn {
+	id: string | number;
+	path: string;
+	label: string;
+	render: (row: DatatableRow) => (() => VNode | VNode[]) | DatatableRowDataType;
+}

packages/design-system/src/components/N8nPagination/Pagination.stories.ts

@@ -0,0 +1,23 @@
+import type { StoryFn } from '@storybook/vue';
+import N8nPagination from './Pagination.vue';
+
+export default {
+	title: 'Atoms/Pagination',
+	component: N8nPagination,
+};
+
+const Template: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nPagination,
+	},
+	template: '<n8n-pagination v-bind="$props" />',
+});
+
+export const Pagination: StoryFn = Template.bind({});
+Pagination.args = {
+	currentPage: 1,
+	pagerCount: 5,
+	pageSize: 10,
+	total: 100,
+};

packages/design-system/src/components/N8nPagination/Pagination.vue

@@ -0,0 +1,22 @@
+<script lang="ts">
+import { Pagination as ElPagination } from 'element-ui';
+
+export default {
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+	props: (ElPagination as any).props,
+	components: {
+		ElPagination,
+	},
+};
+</script>
+
+<template>
+	<div>
+		<el-pagination
+			background
+			layout="prev, pager, next"
+			v-bind="[$props, $attrs]"
+			v-on="$listeners"
+		/>
+	</div>
+</template>

packages/design-system/src/components/N8nPagination/index.ts

@@ -0,0 +1,3 @@
+import N8nPagination from './Pagination.vue';
+
+export default N8nPagination;

packages/design-system/src/composables/index.ts

@@ -0,0 +1 @@
+export * from './useI18n';

packages/design-system/src/composables/useI18n.ts

@@ -0,0 +1,7 @@
+import { t } from '../locale';
+
+export function useI18n() {
+	return {
+		t: (path: string, options: string[] = []) => t(path, options),
+	};
+}

packages/design-system/src/locale/lang/en.js

@@ -18,4 +18,5 @@ export default {
 		'8+ characters, at least 1 number and 1 capital letter',
 	'sticky.markdownHint': `You can style with <a href="https://docs.n8n.io/workflows/sticky-notes/" target="_blank">Markdown</a>`,
 	'tags.showMore': (count) => `+${count} more`,
+	'datatable.pageSize': 'Page size',
 };

packages/design-system/src/utils/__tests__/valueByPath.spec.ts

@@ -0,0 +1,43 @@
+import { getValueByPath } from '@/utils';
+
+describe('getValueByPath()', () => {
+	const object = {
+		id: '1',
+		name: 'Richard Hendricks',
+		address: {
+			city: 'Palo Alto',
+			state: 'California',
+			country: 'United States',
+		},
+	};
+
+	it('should return direct field from object', () => {
+		const path = 'name';
+
+		expect(getValueByPath(object, path)).toEqual(object.name);
+	});
+
+	it('should return nested field from object', () => {
+		const path = 'address.country';
+
+		expect(getValueByPath(object, path)).toEqual(object.address.country);
+	});
+
+	it('should return undefined if direct field does not exist', () => {
+		const path = 'other';
+
+		expect(getValueByPath(object, path)).toEqual(undefined);
+	});
+
+	it('should return undefined if nested field does not exist', () => {
+		const path = 'address.other';
+
+		expect(getValueByPath(object, path)).toEqual(undefined);
+	});
+
+	it('should return undefined if path does not exist', () => {
+		const path = 'other.other';
+
+		expect(getValueByPath(object, path)).toEqual(undefined);
+	});
+});

packages/design-system/src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './markdown';
 export * from './uid';
+export * from './valueByPath';

packages/design-system/src/utils/valueByPath.ts

@@ -0,0 +1,14 @@
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access */
+
+/**
+ * Get a deeply nested value based on a given path string
+ *
+ * @param object
+ * @param path
+ * @returns {T}
+ */
+export function getValueByPath<T = any>(object: any, path: string): T {
+	return path.split('.').reduce((acc, part) => {
+		return acc && acc[part];
+	}, object);
+}