From 74692837d5ce171b2a0c29cc0266ef36d71e3485 Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Fri, 6 Sep 2024 00:28:11 +0800
Subject: [PATCH 1/7] pkp/pkp-lib#9744 Delete old Table component

---
 src/components/Table/Table.vue                | 443 ---------
 src/components/Table/TableCell.vue            |  86 --
 src/components/Table/mocks/articleStats.js    | 893 ------------------
 .../Table/mocks/articleStatsColumns.js        |  54 --
 4 files changed, 1476 deletions(-)
 delete mode 100644 src/components/Table/Table.vue
 delete mode 100644 src/components/Table/TableCell.vue
 delete mode 100644 src/components/Table/mocks/articleStats.js
 delete mode 100644 src/components/Table/mocks/articleStatsColumns.js

diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue
deleted file mode 100644
index 795b12415..000000000
--- a/src/components/Table/Table.vue
+++ /dev/null
@@ -1,443 +0,0 @@
-<template>
-	<table
-		class="pkpTable"
-		role="grid"
-		:aria-labelledBy="labelledBy ? labelledBy : false"
-		:aria-describedBy="describedBy ? describedBy : false"
-	>
-		<caption v-if="label || description">
-			<div v-if="label" class="pkpTable__label">
-				<slot name="label">{{ label }}</slot>
-			</div>
-			<div
-				v-if="description"
-				class="pkpTable__description"
-				v-html="description"
-			/>
-		</caption>
-		<thead>
-			<tr>
-				<th
-					v-for="column in columns"
-					:key="column.name"
-					scope="col"
-					:aria-sort="!!column.orderBy"
-					:class="{'-isActive': orderBy === column.orderBy}"
-				>
-					<button v-if="column.orderBy" @click="setOrderBy(column)">
-						{{ column.label }}
-						<Icon
-							:icon="getIconDirection(column) ? 'caret-down' : 'caret-up'"
-							class="pkpTable__sortIcon"
-						/>
-					</button>
-					<template v-else>
-						{{ column.label }}
-					</template>
-					<slot :name="'thead-' + column.name" :column="column" />
-				</th>
-			</tr>
-		</thead>
-		<tbody
-			@keydown.end.ctrl.exact.prevent="focusEnd"
-			@keydown.home.ctrl.exact.prevent="focusStart"
-			@keydown.end.exact.prevent="focusLastCell"
-			@keydown.home.exact.prevent="focusFirstCell"
-			@keydown.left.exact.prevent="focusPreviousCell"
-			@keydown.up.exact.prevent="focusPreviousRow"
-			@keydown.right.exact.prevent="focusNextCell"
-			@keydown.down.exact.prevent="focusNextRow"
-		>
-			<tr
-				v-for="(row, rowIndex) in rows"
-				:key="'row' + rowIndex"
-				class="pkpTable__row"
-			>
-				<slot :row="row" :row-index="rowIndex">
-					<TableCell
-						v-for="(column, columnIndex) in columns"
-						:key="column.name"
-						:column="column"
-						:row="row"
-						:tabindex="!rowIndex && !columnIndex ? 0 : -1"
-					></TableCell>
-				</slot>
-			</tr>
-		</tbody>
-	</table>
-</template>
-
-<script>
-import TableCell from '@/components/Table/TableCell.vue';
-import Icon from '@/components/Icon/Icon.vue';
-
-export default {
-	components: {
-		TableCell,
-		Icon,
-	},
-	props: {
-		columns: {
-			type: Array,
-			default() {
-				return [];
-			},
-		},
-		describedBy: {
-			type: String,
-			default() {
-				return '';
-			},
-		},
-		description: {
-			type: String,
-			default() {
-				return '';
-			},
-		},
-		label: {
-			type: String,
-			default() {
-				return '';
-			},
-		},
-		labelledBy: {
-			type: String,
-			default() {
-				return '';
-			},
-		},
-		orderBy: {
-			type: String,
-			default() {
-				return '';
-			},
-		},
-		orderDirection: {
-			type: Boolean,
-			default() {
-				return false;
-			},
-		},
-		rows: {
-			type: Array,
-			default() {
-				return [];
-			},
-		},
-	},
-	methods: {
-		/**
-		 * Emit an event to re-order the table rows
-		 *
-		 * @param object column The configuration object for the column to sort on
-		 */
-		setOrderBy(column) {
-			if (this.orderBy === column.orderBy) {
-				this.$emit('order-by', column.orderBy, !this.orderDirection);
-			} else {
-				this.$emit('order-by', column.orderBy, column.initialOrderDirection);
-			}
-		},
-
-		/**
-		 * Get the correct icon (up/down) to show on sortable columns
-		 *
-		 * @param object column
-		 * @return boolean
-		 */
-		getIconDirection(column) {
-			if (this.orderBy === column.orderBy) {
-				return this.orderDirection;
-			} else if (column.initialOrderDirection !== null) {
-				return column.initialOrderDirection;
-			}
-			return false;
-		},
-
-		/**
-		 * Move focus to the next cell in the row
-		 *
-		 * Keyboard: →
-		 *
-		 * @param Event e
-		 */
-		focusNextCell(e) {
-			$(e.target).closest('td, th').next().focus();
-		},
-
-		/**
-		 * Move focus to the previous cell in the row
-		 *
-		 * Keyboard: ←
-		 *
-		 * @param Event e
-		 */
-		focusPreviousCell(e) {
-			$(e.target).closest('td, th').prev().focus();
-		},
-
-		/**
-		 * Move focus to the same column in the next row
-		 *
-		 * Keyboard: ↓
-		 *
-		 * @param Event e
-		 */
-		focusNextRow(e) {
-			const $target = $(e.target);
-			const $cell = $target.closest('td, th');
-			const $row = $cell.closest('tr');
-			const columnIndex = $row.children().index($cell);
-			const $nextRowCells = $row.next().children();
-			if ($nextRowCells[columnIndex]) {
-				$nextRowCells[columnIndex].focus();
-			}
-		},
-
-		/**
-		 * Move focus to the same column in the previous row
-		 *
-		 * Keyboard: ↑
-		 *
-		 * @param Event e
-		 */
-		focusPreviousRow(e) {
-			const $target = $(e.target);
-			const $cell = $target.closest('td, th');
-			const $row = $cell.closest('tr');
-			const columnIndex = $row.children().index($cell);
-			const $prevRowCells = $row.prev().children();
-			if ($prevRowCells[columnIndex]) {
-				$prevRowCells[columnIndex].focus();
-			}
-		},
-
-		/**
-		 * Move focus to the first cell in the row
-		 *
-		 * Keyboard: [Home]
-		 *
-		 * @param Event e
-		 */
-		focusFirstCell(e) {
-			$(e.target).parents('tr').children('td, th').first().focus();
-		},
-
-		/**
-		 * Move focus to the last cell in the row
-		 *
-		 * Keyboard: [End]
-		 *
-		 * @param Event e
-		 */
-		focusLastCell(e) {
-			$(e.target).parents('tr').children('td, th').last().focus();
-		},
-
-		/**
-		 * Move focus to the first cell in the first row
-		 *
-		 * Keyboard: [CTRL] + [Home]
-		 *
-		 * @param Event e
-		 */
-		focusStart(e) {
-			$(e.target)
-				.parents('tbody')
-				.children('tr')
-				.first()
-				.children('td, th')
-				.first()
-				.focus();
-		},
-
-		/**
-		 * Move focus to the last cell in the last row
-		 *
-		 * Keyboard: [CTRL] + [End]
-		 *
-		 * @param Event e
-		 */
-		focusEnd(e) {
-			$(e.target)
-				.parents('tbody')
-				.children('tr')
-				.last()
-				.children('td, th')
-				.last()
-				.focus();
-		},
-	},
-};
-</script>
-
-<style lang="less">
-@import '../../styles/_import';
-
-.pkpTable {
-	width: 100%;
-	max-width: 100%;
-	border: @grid-border;
-	border-collapse: collapse;
-	border-radius: @radius;
-	font-size: @font-sml;
-	line-height: 1.2em;
-
-	td,
-	th {
-		padding: 0.5rem;
-		font-weight: @normal;
-		text-align: inherit;
-
-		&:focus {
-			outline: 0;
-			box-shadow: inset 0 0 0 1px @primary;
-		}
-	}
-
-	tr {
-		border-bottom: @grid-border;
-	}
-
-	caption {
-		background: @bg-light;
-		padding: 1rem;
-		border-top-left-radius: @radius;
-		border-top-right-radius: @radius;
-		text-align: inherit;
-	}
-
-	thead {
-		th {
-			font-size: @font-tiny;
-			font-weight: @bold;
-		}
-
-		// Sortable columns
-		th[aria-sort='true'] {
-			padding: 0;
-
-			button {
-				position: relative;
-				margin: 0;
-				padding: 0.5rem;
-				padding-inline-end: 16px;
-				border: none;
-				border-radius: @radius;
-				background: transparent;
-				box-shadow: none;
-				font-size: @font-tiny;
-				font-weight: @bold;
-				line-height: 1.2em;
-				text-align: left;
-				color: @text;
-				cursor: pointer;
-
-				&:focus {
-					outline: 0;
-					box-shadow: inset 0 0 0 1px @primary;
-				}
-			}
-		}
-
-		.pkpTable__sortIcon {
-			visibility: hidden;
-			position: absolute;
-			top: 50%;
-			right: 4px;
-			transform: translateY(-50%);
-			margin-inline-start: 0.25em;
-		}
-
-		&:hover .pkpTable__sortIcon {
-			visibility: visible;
-			color: @bg-dark;
-		}
-
-		th[aria-sort='true'].-isActive .pkpTable__sortIcon,
-		th[aria-sort='true']:hover .pkpTable__sortIcon,
-		th[aria-sort='true']:focus .pkpTable__sortIcon {
-			visibility: visible;
-			color: @primary;
-		}
-	}
-}
-
-.pkpTable__label {
-	font-size: @font-base;
-	font-weight: @bold;
-}
-
-.pkpTable__description {
-	max-width: 50em;
-	line-height: 1.6em;
-}
-
-.pkpTable__label + .pkpTable__description {
-	margin-top: 1rem;
-}
-
-// A pagination component appearing directly after the table
-.pkpTable + .pkpPagination {
-	padding: 0;
-	border: @grid-border;
-	border-top: none;
-	border-radius: @radius;
-
-	button {
-		margin-top: 0.5rem;
-		margin-bottom: 0.5rem;
-	}
-
-	li:first-child,
-	li:last-child {
-		margin: 0;
-
-		button,
-		button {
-			margin: 0;
-			padding: 0.5rem 1rem;
-			border-color: transparent;
-			box-shadow: none;
-			border-radius: 0;
-
-			&:hover,
-			&:focus {
-				border-color: @primary;
-			}
-		}
-	}
-
-	li:first-child button {
-		border-right: @grid-border;
-		border-bottom-left-radius: @radius;
-
-		&[disabled]:hover {
-			border-color: transparent;
-			border-right: @grid-border;
-		}
-	}
-
-	li:last-child button {
-		border-left: @grid-border;
-		border-bottom-right-radius: @radius;
-
-		&[disabled]:hover {
-			border-color: transparent;
-			border-left: @grid-border;
-		}
-	}
-}
-
-[dir='rtl'] {
-	.pkpTable {
-		thead {
-			.pkpTable__sortIcon {
-				right: auto;
-				left: 4px;
-			}
-		}
-	}
-}
-</style>
diff --git a/src/components/Table/TableCell.vue b/src/components/Table/TableCell.vue
deleted file mode 100644
index 4beeaf158..000000000
--- a/src/components/Table/TableCell.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-	<component
-		:is="tag"
-		:class="classes"
-		:scope="tag === 'th' ? 'row' : false"
-		:tabindex="tabindex"
-	>
-		<template v-if="hasSlot">
-			<slot :column="column" :row="row" />
-		</template>
-		<template v-else>
-			<span v-html="value" />
-		</template>
-	</component>
-</template>
-
-<script>
-export default {
-	props: {
-		column: Object,
-		row: Object,
-		tabindex: [Number, Boolean],
-	},
-	computed: {
-		/**
-		 * Determine what kind of tag to use for the root element
-		 */
-		tag() {
-			return this.column.isRowHeader ? 'th' : 'td';
-		},
-
-		/**
-		 * Compile classes for the root element
-		 */
-		classes() {
-			let classes = ['pkpTable__cell'];
-
-			if (this.column.truncate) {
-				classes.push('-truncate');
-				classes.push('-truncate-' + this.column.truncate);
-			}
-
-			return classes;
-		},
-
-		/**
-		 * Is there slot content in the default position?
-		 */
-		hasSlot() {
-			return this.$slots.default;
-		},
-
-		/**
-		 * The value retrieved from the row
-		 */
-		value() {
-			if (typeof this.column.value === 'function') {
-				return this.column.value(this.row);
-			} else if (typeof this.row[this.column.value] !== 'undefined') {
-				return this.row[this.column.value];
-			}
-			return '';
-		},
-	},
-};
-</script>
-
-<style lang="less">
-@import '../../styles/_import';
-
-.pkpTable__cell.-truncate {
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	width: 100%;
-	max-width: 20em;
-}
-
-.pkpTable__cell.-truncate-small {
-	max-width: 10em;
-}
-
-.pkpTable__cell.-truncate-large {
-	max-width: 40em;
-}
-</style>
diff --git a/src/components/Table/mocks/articleStats.js b/src/components/Table/mocks/articleStats.js
deleted file mode 100644
index 1815c5e19..000000000
--- a/src/components/Table/mocks/articleStats.js
+++ /dev/null
@@ -1,893 +0,0 @@
-function getRandomTitle(str) {
-	let title = str
-		.split(' ')
-		.sort((a, b) => (Math.random() > 0.5 ? -1 : 1))
-		.join(' ');
-	const trimLength = Math.floor(Math.random() * 20);
-	title = title.charAt(0).toUpperCase() + title.slice(1);
-	return title.substr(0, title.length - trimLength);
-}
-
-const baseTitle =
-	'tortor ultrices dolor diam dignissim ante nulla et morbi imperdiet';
-const sectionIds = [1, 2, 3];
-const baseStat = {
-	total: 0,
-	views: 0,
-	downloads: 0,
-	object: {
-		id: 1,
-		fullTitle: {
-			en: getRandomTitle(baseTitle),
-		},
-		sectionId: 1,
-		authorString: 'Carlo Corino',
-		urlPublished: '/example/1',
-	},
-};
-
-let stats = [];
-for (let i = 1; i < 61; i++) {
-	let stat = {
-		...baseStat,
-		object: {
-			...baseStat.object,
-			id: i,
-			fullTitle: {
-				en: getRandomTitle(baseTitle),
-			},
-			sectionId: sectionIds[Math.floor(Math.random() * sectionIds.length)],
-		},
-		views: Math.floor(Math.random() * 10000) + 1,
-		downloads: Math.floor(Math.random() * 1000) + 1,
-	};
-
-	stat.total = stat.views + stat.downloads;
-
-	stats.push(stat);
-}
-
-// use fixed stats to stabilize visual comparisons
-stats = [
-	{
-		total: 8564,
-		views: 7945,
-		downloads: 619,
-		object: {
-			id: 1,
-			fullTitle: {
-				en: 'Nulla et ultrices tortor imperdiet ante diam dignissim',
-			},
-			sectionId: 3,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 1170,
-		views: 560,
-		downloads: 610,
-		object: {
-			id: 2,
-			fullTitle: {
-				en: 'Ante dignissim imperdiet diam dolor ultrices et null',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 9607,
-		views: 9392,
-		downloads: 215,
-		object: {
-			id: 3,
-			fullTitle: {
-				en: 'Nulla imperdiet ultrices et dignissim tortor morbi d',
-			},
-			sectionId: 3,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 3453,
-		views: 2732,
-		downloads: 721,
-		object: {
-			id: 4,
-			fullTitle: {
-				en: 'Et morbi nulla dignissim tortor ante diam dolor u',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 2541,
-		views: 1782,
-		downloads: 759,
-		object: {
-			id: 5,
-			fullTitle: {
-				en: 'Nulla dignissim tortor ante et ultrices morbi dolor diam ',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 5116,
-		views: 4512,
-		downloads: 604,
-		object: {
-			id: 6,
-			fullTitle: {
-				en: 'Ultrices nulla tortor morbi ante dignissim dolo',
-			},
-			sectionId: 2,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 7468,
-		views: 6697,
-		downloads: 771,
-		object: {
-			id: 7,
-			fullTitle: {
-				en: 'Nulla ante dignissim diam imperdiet morbi dolor ultrices tortor e',
-			},
-			sectionId: 2,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 3678,
-		views: 3450,
-		downloads: 228,
-		object: {
-			id: 8,
-			fullTitle: {
-				en: 'Morbi ante tortor imperdiet ultrices nulla dignissim dolor et dia',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 1421,
-		views: 937,
-		downloads: 484,
-		object: {
-			id: 9,
-			fullTitle: {
-				en: 'Nulla tortor ultrices diam imperdiet et dignissim morbi dolor ',
-			},
-			sectionId: 2,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 7490,
-		views: 6772,
-		downloads: 718,
-		object: {
-			id: 10,
-			fullTitle: {
-				en: 'Diam dolor imperdiet dignissim morbi et tortor ultrices nulla ante',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 2440,
-		views: 1904,
-		downloads: 536,
-		object: {
-			id: 11,
-			fullTitle: {
-				en: 'Tortor nulla diam imperdiet dolor ante et ultrices mor',
-			},
-			sectionId: 3,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 3924,
-		views: 3714,
-		downloads: 210,
-		object: {
-			id: 12,
-			fullTitle: {
-				en: 'Dignissim diam ante morbi dolor ultrices nulla imperdiet et ',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 2425,
-		views: 2329,
-		downloads: 96,
-		object: {
-			id: 13,
-			fullTitle: {
-				en: 'Nulla imperdiet et dolor ultrices diam dignissim tortor ant',
-			},
-			sectionId: 2,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 10104,
-		views: 9617,
-		downloads: 487,
-		object: {
-			id: 14,
-			fullTitle: {
-				en: 'Dignissim ante diam tortor imperdiet ultrices nulla',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 1205,
-		views: 1053,
-		downloads: 152,
-		object: {
-			id: 15,
-			fullTitle: {
-				en: 'Diam dolor et nulla ultrices ante morbi imperdiet digni',
-			},
-			sectionId: 3,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 1389,
-		views: 1345,
-		downloads: 44,
-		object: {
-			id: 16,
-			fullTitle: {
-				en: 'Ante dolor et imperdiet diam dignissim tortor ultr',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 5861,
-		views: 5300,
-		downloads: 561,
-		object: {
-			id: 17,
-			fullTitle: {
-				en: 'Nulla tortor dolor et dignissim diam ultrices ante morbi i',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 2914,
-		views: 2125,
-		downloads: 789,
-		object: {
-			id: 18,
-			fullTitle: {
-				en: 'Diam nulla tortor ante dolor et ultrices morbi imperdiet dig',
-			},
-			sectionId: 2,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 5439,
-		views: 4950,
-		downloads: 489,
-		object: {
-			id: 19,
-			fullTitle: {
-				en: 'Tortor nulla ultrices dolor ante dignissim morbi diam imperdiet',
-			},
-			sectionId: 3,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 6822,
-		views: 6723,
-		downloads: 99,
-		object: {
-			id: 20,
-			fullTitle: {
-				en: 'Ultrices nulla et dolor ante dignissim morbi tortor imp',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 2535,
-		views: 2262,
-		downloads: 273,
-		object: {
-			id: 21,
-			fullTitle: {
-				en: 'Tortor morbi nulla ante ultrices diam dolor et imperdiet',
-			},
-			sectionId: 2,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 3319,
-		views: 2988,
-		downloads: 331,
-		object: {
-			id: 22,
-			fullTitle: {
-				en: 'Diam ante dolor dignissim nulla morbi et imperdiet ultrices tort',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 891,
-		views: 475,
-		downloads: 416,
-		object: {
-			id: 23,
-			fullTitle: {
-				en: 'Tortor et morbi ante diam ultrices dolor dignissim imperdiet ',
-			},
-			sectionId: 2,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 5976,
-		views: 5882,
-		downloads: 94,
-		object: {
-			id: 24,
-			fullTitle: {
-				en: 'Et nulla imperdiet ante tortor morbi diam ultrices digniss',
-			},
-			sectionId: 2,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 9086,
-		views: 9076,
-		downloads: 10,
-		object: {
-			id: 25,
-			fullTitle: {
-				en: 'Diam imperdiet ante nulla morbi tortor dignissim et ultrices d',
-			},
-			sectionId: 3,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 5547,
-		views: 4979,
-		downloads: 568,
-		object: {
-			id: 26,
-			fullTitle: {
-				en: 'Morbi ultrices dolor tortor dignissim ante et imperdiet d',
-			},
-			sectionId: 3,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 3019,
-		views: 2223,
-		downloads: 796,
-		object: {
-			id: 27,
-			fullTitle: {
-				en: 'Diam dolor ultrices tortor dignissim ante et nulla morbi imperdi',
-			},
-			sectionId: 2,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 3078,
-		views: 2595,
-		downloads: 483,
-		object: {
-			id: 28,
-			fullTitle: {
-				en: 'Ante nulla diam dolor morbi ultrices dignissim tortor et i',
-			},
-			sectionId: 3,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 7242,
-		views: 6650,
-		downloads: 592,
-		object: {
-			id: 29,
-			fullTitle: {
-				en: 'Nulla dignissim tortor ultrices et ante diam do',
-			},
-			sectionId: 3,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 10052,
-		views: 9717,
-		downloads: 335,
-		object: {
-			id: 30,
-			fullTitle: {
-				en: 'Tortor ultrices nulla ante dolor dignissim et morbi imperdiet d',
-			},
-			sectionId: 3,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 6362,
-		views: 5870,
-		downloads: 492,
-		object: {
-			id: 31,
-			fullTitle: {
-				en: 'Tortor ultrices morbi ante imperdiet et dolor n',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 6481,
-		views: 5833,
-		downloads: 648,
-		object: {
-			id: 32,
-			fullTitle: {
-				en: 'Tortor ante morbi ultrices dolor diam et imperdiet nulla digni',
-			},
-			sectionId: 3,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 1250,
-		views: 537,
-		downloads: 713,
-		object: {
-			id: 33,
-			fullTitle: {
-				en: 'Ante imperdiet diam dignissim dolor et ultrices tortor nulla mo',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 2149,
-		views: 1463,
-		downloads: 686,
-		object: {
-			id: 34,
-			fullTitle: {
-				en: 'Ante diam dolor nulla ultrices dignissim et tortor imperdiet morbi',
-			},
-			sectionId: 2,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 2067,
-		views: 1855,
-		downloads: 212,
-		object: {
-			id: 35,
-			fullTitle: {
-				en: 'Tortor imperdiet morbi ultrices dignissim diam ',
-			},
-			sectionId: 3,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 9446,
-		views: 8582,
-		downloads: 864,
-		object: {
-			id: 36,
-			fullTitle: {
-				en: 'Tortor ultrices dolor dignissim morbi diam nulla et',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 4692,
-		views: 4453,
-		downloads: 239,
-		object: {
-			id: 37,
-			fullTitle: {
-				en: 'Diam tortor imperdiet ante et ultrices dignissim morbi ',
-			},
-			sectionId: 3,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 4901,
-		views: 4775,
-		downloads: 126,
-		object: {
-			id: 38,
-			fullTitle: {
-				en: 'Dolor ante nulla ultrices et diam tortor morbi dignissim imp',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 4945,
-		views: 4803,
-		downloads: 142,
-		object: {
-			id: 39,
-			fullTitle: {
-				en: 'Nulla ultrices morbi et dignissim tortor imperdiet dolor ante ',
-			},
-			sectionId: 3,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 5948,
-		views: 5088,
-		downloads: 860,
-		object: {
-			id: 40,
-			fullTitle: {
-				en: 'Ultrices dolor morbi diam ante tortor imperdiet nulla et dignis',
-			},
-			sectionId: 2,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 5239,
-		views: 4731,
-		downloads: 508,
-		object: {
-			id: 41,
-			fullTitle: {
-				en: 'Dignissim nulla imperdiet dolor morbi ante diam ultr',
-			},
-			sectionId: 3,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 6611,
-		views: 6304,
-		downloads: 307,
-		object: {
-			id: 42,
-			fullTitle: {
-				en: 'Diam nulla dolor imperdiet tortor ante ultrices et morbi dignissi',
-			},
-			sectionId: 2,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 6626,
-		views: 5827,
-		downloads: 799,
-		object: {
-			id: 43,
-			fullTitle: {
-				en: 'Ante et dignissim imperdiet tortor morbi ultrices diam ',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 8275,
-		views: 7685,
-		downloads: 590,
-		object: {
-			id: 44,
-			fullTitle: {
-				en: 'Dignissim et diam nulla dolor morbi ultrices imperdiet ante t',
-			},
-			sectionId: 3,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 6467,
-		views: 5609,
-		downloads: 858,
-		object: {
-			id: 45,
-			fullTitle: {
-				en: 'Tortor ultrices et nulla dignissim morbi imperdiet diam a',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 680,
-		views: 349,
-		downloads: 331,
-		object: {
-			id: 46,
-			fullTitle: {
-				en: 'Dolor ante nulla dignissim morbi et diam imperdiet ',
-			},
-			sectionId: 3,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 10596,
-		views: 9906,
-		downloads: 690,
-		object: {
-			id: 47,
-			fullTitle: {
-				en: 'Nulla diam dolor ultrices tortor imperdiet et digniss',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 4319,
-		views: 4233,
-		downloads: 86,
-		object: {
-			id: 48,
-			fullTitle: {
-				en: 'Et ultrices ante diam morbi tortor nulla digniss',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 5177,
-		views: 4344,
-		downloads: 833,
-		object: {
-			id: 49,
-			fullTitle: {
-				en: 'Imperdiet dignissim morbi nulla diam dolor ultrices ante et',
-			},
-			sectionId: 3,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 3156,
-		views: 2966,
-		downloads: 190,
-		object: {
-			id: 50,
-			fullTitle: {
-				en: 'Ultrices ante morbi nulla dolor tortor diam imperdiet',
-			},
-			sectionId: 3,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 2808,
-		views: 2117,
-		downloads: 691,
-		object: {
-			id: 51,
-			fullTitle: {
-				en: 'Nulla tortor ante et ultrices imperdiet diam dolor dignis',
-			},
-			sectionId: 2,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 2327,
-		views: 1581,
-		downloads: 746,
-		object: {
-			id: 52,
-			fullTitle: {
-				en: 'Dolor et ultrices diam dignissim tortor nulla ante imperdiet morb',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 711,
-		views: 310,
-		downloads: 401,
-		object: {
-			id: 53,
-			fullTitle: {
-				en: 'Nulla morbi ante tortor imperdiet et ultrices dignissim dolor ',
-			},
-			sectionId: 2,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 5100,
-		views: 5015,
-		downloads: 85,
-		object: {
-			id: 54,
-			fullTitle: {
-				en: 'Diam et ultrices ante morbi dignissim tortor dolor imperdiet ',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 6647,
-		views: 6104,
-		downloads: 543,
-		object: {
-			id: 55,
-			fullTitle: {
-				en: 'Et diam tortor imperdiet morbi dolor dignissim ante nulla ultr',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 9420,
-		views: 9240,
-		downloads: 180,
-		object: {
-			id: 56,
-			fullTitle: {
-				en: 'Tortor ultrices imperdiet dolor nulla dignissim morbi d',
-			},
-			sectionId: 3,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 3323,
-		views: 2562,
-		downloads: 761,
-		object: {
-			id: 57,
-			fullTitle: {
-				en: 'Et tortor nulla imperdiet morbi ultrices dolor diam dig',
-			},
-			sectionId: 3,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 1466,
-		views: 569,
-		downloads: 897,
-		object: {
-			id: 58,
-			fullTitle: {
-				en: 'Morbi dolor ultrices diam et imperdiet ante tortor dignissim',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 3115,
-		views: 2861,
-		downloads: 254,
-		object: {
-			id: 59,
-			fullTitle: {
-				en: 'Tortor ultrices morbi imperdiet dolor diam nulla et ',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-	{
-		total: 3050,
-		views: 2500,
-		downloads: 550,
-		object: {
-			id: 60,
-			fullTitle: {
-				en: 'Ante nulla et tortor morbi ultrices dolor diam imperdiet digniss',
-			},
-			sectionId: 1,
-			authorString: 'Carlo Corino',
-			urlPublished: '/example/1',
-		},
-	},
-];
-export default stats;
diff --git a/src/components/Table/mocks/articleStatsColumns.js b/src/components/Table/mocks/articleStatsColumns.js
deleted file mode 100644
index 6f1186f3f..000000000
--- a/src/components/Table/mocks/articleStatsColumns.js
+++ /dev/null
@@ -1,54 +0,0 @@
-export default [
-	{
-		name: 'id',
-		label: 'ID',
-		value(row) {
-			return row.object.id;
-		},
-	},
-	{
-		name: 'title',
-		label: 'Title',
-		isRowHeader: true,
-		value(row) {
-			return row.object.fullTitle.en;
-		},
-	},
-	{
-		name: 'author',
-		label: 'Contributors',
-		value(row) {
-			return row.object.authorString;
-		},
-	},
-	{
-		name: 'abstractViews',
-		label: 'Abstract Views',
-		value: 'abstractViews',
-	},
-	{
-		name: 'galleyViews',
-		label: 'Galley Views',
-		value: 'galleyViews',
-	},
-	{
-		name: 'pdf',
-		label: 'PDF',
-		value: 'pdf',
-	},
-	{
-		name: 'html',
-		label: 'HTML',
-		value: 'html',
-	},
-	{
-		name: 'other',
-		label: 'Other',
-		value: 'other',
-	},
-	{
-		name: 'total',
-		label: 'Total',
-		value: 'total',
-	},
-];

From e5a903e9e03a830a1fe1a1ee0a4c8fd3f65d5d57 Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Fri, 6 Sep 2024 00:33:30 +0800
Subject: [PATCH 2/7] pkp/pkp-lib#9744 Rename TableNext component to Table

---
 src/components/Container/StatsPage.stories.js        |  4 ++--
 src/components/Container/StatsPage.vue               | 12 ++++++------
 src/components/ListPanel/doi/DoiItemVersionModal.vue | 12 ++++++------
 src/components/ListPanel/doi/DoiListItem.vue         | 12 ++++++------
 src/components/{TableNext => Table}/Table.mdx        |  0
 src/components/{TableNext => Table}/Table.stories.js |  2 +-
 src/components/{TableNext => Table}/Table.vue        |  0
 src/components/{TableNext => Table}/TableBody.vue    |  0
 src/components/{TableNext => Table}/TableCell.vue    |  0
 src/components/{TableNext => Table}/TableColumn.vue  |  0
 src/components/{TableNext => Table}/TableHeader.vue  |  0
 .../{TableNext => Table}/TablePagination.vue         |  0
 src/components/{TableNext => Table}/TableRow.vue     |  0
 .../{TableNext => Table}/mocks/articleStats.js       |  0
 .../mocks/articleStatsColumns.js                     |  0
 src/managers/FileManager/FileManager.vue             |  8 ++++----
 src/managers/FileManager/FileManagerTableRow.vue     |  4 ++--
 src/managers/ReviewerManager/ReviewerCellActions.vue |  2 +-
 src/managers/ReviewerManager/ReviewerManager.vue     | 12 ++++++------
 .../acceptInvitation/AcceptInvitationUserRoles.vue   | 12 ++++++------
 .../DashboardTable/CellReviewAssignmentActions.vue   |  2 +-
 .../DashboardTable/CellReviewAssignmentActivity.vue  |  2 +-
 .../DashboardTable/CellReviewAssignmentId.vue        |  2 +-
 .../DashboardTable/CellReviewAssignmentTitle.vue     |  2 +-
 .../DashboardTable/CellSubmissionActions.vue         |  2 +-
 .../CellSubmissionActivity.vue                       |  2 +-
 .../components/DashboardTable/CellSubmissionDays.vue |  2 +-
 .../components/DashboardTable/CellSubmissionId.vue   |  2 +-
 .../DashboardTable/CellSubmissionStage.vue           |  2 +-
 .../DashboardTable/CellSubmissionTitle.vue           |  2 +-
 .../components/DashboardTable/DashboardTable.vue     | 12 ++++++------
 src/pages/jobs/FailedJobDetailsPage.vue              | 12 ++++++------
 src/pages/jobs/FailedJobsPage.vue                    | 12 ++++++------
 src/pages/jobs/JobsPage.vue                          | 12 ++++++------
 .../userInvitation/UserInvitationUserGroupsTable.vue | 12 ++++++------
 35 files changed, 80 insertions(+), 80 deletions(-)
 rename src/components/{TableNext => Table}/Table.mdx (100%)
 rename src/components/{TableNext => Table}/Table.stories.js (98%)
 rename src/components/{TableNext => Table}/Table.vue (100%)
 rename src/components/{TableNext => Table}/TableBody.vue (100%)
 rename src/components/{TableNext => Table}/TableCell.vue (100%)
 rename src/components/{TableNext => Table}/TableColumn.vue (100%)
 rename src/components/{TableNext => Table}/TableHeader.vue (100%)
 rename src/components/{TableNext => Table}/TablePagination.vue (100%)
 rename src/components/{TableNext => Table}/TableRow.vue (100%)
 rename src/components/{TableNext => Table}/mocks/articleStats.js (100%)
 rename src/components/{TableNext => Table}/mocks/articleStatsColumns.js (100%)

diff --git a/src/components/Container/StatsPage.stories.js b/src/components/Container/StatsPage.stories.js
index 50434e30a..0e7b692d5 100644
--- a/src/components/Container/StatsPage.stories.js
+++ b/src/components/Container/StatsPage.stories.js
@@ -1,8 +1,8 @@
 import StatsPage from './StatsPage.vue';
 import StatsEditorialPage from '@/components/Container/StatsEditorialPage.vue';
 import StatsPublicationsPage from '@/components/Container/StatsPublicationsPage.vue';
-import ArticleStatsMock from '@/components/TableNext/mocks/articleStats.js';
-import ArticleStatsColumnsMock from '@/components/TableNext/mocks/articleStatsColumns.js';
+import ArticleStatsMock from '@/components/Table/mocks/articleStats.js';
+import ArticleStatsColumnsMock from '@/components/Table/mocks/articleStatsColumns.js';
 import debounce from 'debounce';
 
 export default {
diff --git a/src/components/Container/StatsPage.vue b/src/components/Container/StatsPage.vue
index f20c15c0c..9f151cdd5 100644
--- a/src/components/Container/StatsPage.vue
+++ b/src/components/Container/StatsPage.vue
@@ -4,12 +4,12 @@ import DateRange from '@/components/DateRange/DateRange.vue';
 import PkpFilter from '@/components/Filter/Filter.vue';
 import Pagination from '@/components/Pagination/Pagination.vue';
 import PkpHeader from '@/components/Header/Header.vue';
-import PkpTable from '@/components/TableNext/Table.vue';
-import TableCell from '@/components/TableNext/TableCell.vue';
-import TableColumn from '@/components/TableNext/TableColumn.vue';
-import TableHeader from '@/components/TableNext/TableHeader.vue';
-import TableBody from '@/components/TableNext/TableBody.vue';
-import TableRow from '@/components/TableNext/TableRow.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableCell from '@/components/Table/TableCell.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableRow from '@/components/Table/TableRow.vue';
 import ajaxError from '@/mixins/ajaxError';
 
 export default {
diff --git a/src/components/ListPanel/doi/DoiItemVersionModal.vue b/src/components/ListPanel/doi/DoiItemVersionModal.vue
index 58a29abdc..223ef7a55 100644
--- a/src/components/ListPanel/doi/DoiItemVersionModal.vue
+++ b/src/components/ListPanel/doi/DoiItemVersionModal.vue
@@ -81,12 +81,12 @@
 <script setup>
 import SideModalBody from '@/components/Modal/SideModalBody.vue';
 import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
-import PkpTable from '@/components/TableNext/Table.vue';
-import TableCell from '@/components/TableNext/TableCell.vue';
-import TableColumn from '@/components/TableNext/TableColumn.vue';
-import TableHeader from '@/components/TableNext/TableHeader.vue';
-import TableBody from '@/components/TableNext/TableBody.vue';
-import TableRow from '@/components/TableNext/TableRow.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableCell from '@/components/Table/TableCell.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableRow from '@/components/Table/TableRow.vue';
 import Spinner from '@/components/Spinner/Spinner.vue';
 import PkpButton from '@/components/Button/Button.vue';
 
diff --git a/src/components/ListPanel/doi/DoiListItem.vue b/src/components/ListPanel/doi/DoiListItem.vue
index 4ea00b61f..476156079 100644
--- a/src/components/ListPanel/doi/DoiListItem.vue
+++ b/src/components/ListPanel/doi/DoiListItem.vue
@@ -197,12 +197,12 @@ import Spinner from '@/components/Spinner/Spinner.vue';
 import PkpButton from '@/components/Button/Button.vue';
 
 import Expander from '@/components/Expander/Expander.vue';
-import PkpTable from '@/components/TableNext/Table.vue';
-import TableCell from '@/components/TableNext/TableCell.vue';
-import TableColumn from '@/components/TableNext/TableColumn.vue';
-import TableHeader from '@/components/TableNext/TableHeader.vue';
-import TableBody from '@/components/TableNext/TableBody.vue';
-import TableRow from '@/components/TableNext/TableRow.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableCell from '@/components/Table/TableCell.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableRow from '@/components/Table/TableRow.vue';
 import DoiItemViewErrorDialogBody from './DoiItemViewErrorDialogBody.vue';
 import DoiItemViewRegisteredMessageDialogBody from './DoiItemViewRegisteredMessageDialogBody.vue';
 import DoiItemVersionModal from './DoiItemVersionModal.vue';
diff --git a/src/components/TableNext/Table.mdx b/src/components/Table/Table.mdx
similarity index 100%
rename from src/components/TableNext/Table.mdx
rename to src/components/Table/Table.mdx
diff --git a/src/components/TableNext/Table.stories.js b/src/components/Table/Table.stories.js
similarity index 98%
rename from src/components/TableNext/Table.stories.js
rename to src/components/Table/Table.stories.js
index 8c470aa16..acb3219b3 100644
--- a/src/components/TableNext/Table.stories.js
+++ b/src/components/Table/Table.stories.js
@@ -11,7 +11,7 @@ import TablePagination from './TablePagination.vue';
 import ButtonRow from '@/components/ButtonRow/ButtonRow.vue';
 import {http, HttpResponse} from 'msw';
 
-import articleStats from '@/components/TableNext/mocks/articleStats.js';
+import articleStats from '@/components/Table/mocks/articleStats.js';
 import {useSorting} from '@/composables/useSorting';
 
 import {useFetchPaginated} from '@/composables/useFetchPaginated';
diff --git a/src/components/TableNext/Table.vue b/src/components/Table/Table.vue
similarity index 100%
rename from src/components/TableNext/Table.vue
rename to src/components/Table/Table.vue
diff --git a/src/components/TableNext/TableBody.vue b/src/components/Table/TableBody.vue
similarity index 100%
rename from src/components/TableNext/TableBody.vue
rename to src/components/Table/TableBody.vue
diff --git a/src/components/TableNext/TableCell.vue b/src/components/Table/TableCell.vue
similarity index 100%
rename from src/components/TableNext/TableCell.vue
rename to src/components/Table/TableCell.vue
diff --git a/src/components/TableNext/TableColumn.vue b/src/components/Table/TableColumn.vue
similarity index 100%
rename from src/components/TableNext/TableColumn.vue
rename to src/components/Table/TableColumn.vue
diff --git a/src/components/TableNext/TableHeader.vue b/src/components/Table/TableHeader.vue
similarity index 100%
rename from src/components/TableNext/TableHeader.vue
rename to src/components/Table/TableHeader.vue
diff --git a/src/components/TableNext/TablePagination.vue b/src/components/Table/TablePagination.vue
similarity index 100%
rename from src/components/TableNext/TablePagination.vue
rename to src/components/Table/TablePagination.vue
diff --git a/src/components/TableNext/TableRow.vue b/src/components/Table/TableRow.vue
similarity index 100%
rename from src/components/TableNext/TableRow.vue
rename to src/components/Table/TableRow.vue
diff --git a/src/components/TableNext/mocks/articleStats.js b/src/components/Table/mocks/articleStats.js
similarity index 100%
rename from src/components/TableNext/mocks/articleStats.js
rename to src/components/Table/mocks/articleStats.js
diff --git a/src/components/TableNext/mocks/articleStatsColumns.js b/src/components/Table/mocks/articleStatsColumns.js
similarity index 100%
rename from src/components/TableNext/mocks/articleStatsColumns.js
rename to src/components/Table/mocks/articleStatsColumns.js
diff --git a/src/managers/FileManager/FileManager.vue b/src/managers/FileManager/FileManager.vue
index 090ddce12..2b5766190 100644
--- a/src/managers/FileManager/FileManager.vue
+++ b/src/managers/FileManager/FileManager.vue
@@ -59,10 +59,10 @@ import {inject} from 'vue';
 import {useFileManagerStore} from './fileManagerStore.js';
 import {FileManagerConfigurations} from './useFileManagerConfig.js';
 import PkpButton from '@/components/Button/Button.vue';
-import PkpTable from '@/components/TableNext/Table.vue';
-import TableHeader from '@/components/TableNext/TableHeader.vue';
-import TableBody from '@/components/TableNext/TableBody.vue';
-import TableColumn from '@/components/TableNext/TableColumn.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
 import FileManagerTableRow from './FileManagerTableRow.vue';
 
 const props = defineProps({
diff --git a/src/managers/FileManager/FileManagerTableRow.vue b/src/managers/FileManager/FileManagerTableRow.vue
index eda9e44de..36be25c35 100644
--- a/src/managers/FileManager/FileManagerTableRow.vue
+++ b/src/managers/FileManager/FileManagerTableRow.vue
@@ -48,8 +48,8 @@
 <script setup>
 import {computed} from 'vue';
 import DropdownActions from '@/components/DropdownActions/DropdownActions.vue';
-import TableCell from '@/components/TableNext/TableCell.vue';
-import TableRow from '@/components/TableNext/TableRow.vue';
+import TableCell from '@/components/Table/TableCell.vue';
+import TableRow from '@/components/Table/TableRow.vue';
 import Icon from '@/components/Icon/Icon.vue';
 import Badge from '@/components/Badge/Badge.vue';
 
diff --git a/src/managers/ReviewerManager/ReviewerCellActions.vue b/src/managers/ReviewerManager/ReviewerCellActions.vue
index 5ee3a6f4c..b79726075 100644
--- a/src/managers/ReviewerManager/ReviewerCellActions.vue
+++ b/src/managers/ReviewerManager/ReviewerCellActions.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup>
-import TableCell from '@/components/TableNext/TableCell.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 import DropdownActions from '@/components/DropdownActions/DropdownActions.vue';
 import {useReviewerManagerActions} from './useReviewerManagerActions';
 import {computed} from 'vue';
diff --git a/src/managers/ReviewerManager/ReviewerManager.vue b/src/managers/ReviewerManager/ReviewerManager.vue
index 38cfdb2a8..9cb35327f 100644
--- a/src/managers/ReviewerManager/ReviewerManager.vue
+++ b/src/managers/ReviewerManager/ReviewerManager.vue
@@ -55,12 +55,12 @@
 </template>
 
 <script setup>
-import PkpTable from '@/components/TableNext/Table.vue';
-import TableColumn from '@/components/TableNext/TableColumn.vue';
-import TableHeader from '@/components/TableNext/TableHeader.vue';
-import TableBody from '@/components/TableNext/TableBody.vue';
-import TableRow from '@/components/TableNext/TableRow.vue';
-import TableCell from '@/components/TableNext/TableCell.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableRow from '@/components/Table/TableRow.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 import ReviewerCellActions from './ReviewerCellActions.vue';
 import Icon from '@/components/Icon/Icon.vue';
 
diff --git a/src/pages/acceptInvitation/AcceptInvitationUserRoles.vue b/src/pages/acceptInvitation/AcceptInvitationUserRoles.vue
index 498a33f02..b1c6a59be 100644
--- a/src/pages/acceptInvitation/AcceptInvitationUserRoles.vue
+++ b/src/pages/acceptInvitation/AcceptInvitationUserRoles.vue
@@ -29,12 +29,12 @@
 
 <script setup>
 import {useTranslation} from '@/composables/useTranslation';
-import PkpTable from '@/components/TableNext/Table.vue';
-import TableCell from '@/components/TableNext/TableCell.vue';
-import TableHeader from '@/components/TableNext/TableHeader.vue';
-import TableColumn from '@/components/TableNext/TableColumn.vue';
-import TableBody from '@/components/TableNext/TableBody.vue';
-import TableRow from '@/components/TableNext/TableRow.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableCell from '@/components/Table/TableCell.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableRow from '@/components/Table/TableRow.vue';
 import {defineProps} from 'vue';
 
 defineProps({
diff --git a/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentActions.vue b/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentActions.vue
index 68328cc82..63d0b5036 100644
--- a/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentActions.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentActions.vue
@@ -13,7 +13,7 @@
 <script setup>
 import {defineProps} from 'vue';
 import PkpButton from '@/components/Button/Button.vue';
-import TableCell from '@/components/TableNext/TableCell.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 import {useDashboardPageStore} from '@/pages/dashboard/dashboardPageStore.js';
 import {useLocalize} from '@/composables/useLocalize';
 
diff --git a/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentActivity.vue b/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentActivity.vue
index eeea313e8..8e1b4000e 100644
--- a/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentActivity.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentActivity.vue
@@ -20,7 +20,7 @@
 
 <script setup>
 import {defineProps, computed} from 'vue';
-import TableCell from '@/components/TableNext/TableCell.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 import CellReviewAssignmentActivityAlert from './CellReviewAssignmentActivity/CellReviewAssignmentActivityAlert.vue';
 import {useDashboardPageStore} from '@/pages/dashboard/dashboardPageStore';
 
diff --git a/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentId.vue b/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentId.vue
index b5c2bfda2..108347e22 100644
--- a/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentId.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentId.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import {defineProps} from 'vue';
-import TableCell from '@/components/TableNext/TableCell.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 
 defineProps({
 	item: {type: Object, required: true},
diff --git a/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentTitle.vue b/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentTitle.vue
index bab2b9890..d5f2de65e 100644
--- a/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentTitle.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellReviewAssignmentTitle.vue
@@ -12,7 +12,7 @@
 import {defineProps, computed} from 'vue';
 import {useLocalize} from '@/composables/useLocalize';
 
-import TableCell from '@/components/TableNext/TableCell.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 const {localizeSubmission} = useLocalize();
 
 const props = defineProps({item: {type: Object, required: true}});
diff --git a/src/pages/dashboard/components/DashboardTable/CellSubmissionActions.vue b/src/pages/dashboard/components/DashboardTable/CellSubmissionActions.vue
index e748db3ed..443bef1f5 100644
--- a/src/pages/dashboard/components/DashboardTable/CellSubmissionActions.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellSubmissionActions.vue
@@ -13,7 +13,7 @@
 <script setup>
 import {defineProps} from 'vue';
 import PkpButton from '@/components/Button/Button.vue';
-import TableCell from '@/components/TableNext/TableCell.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 import {useDashboardPageStore} from '@/pages/dashboard/dashboardPageStore.js';
 
 defineProps({
diff --git a/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivity.vue b/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivity.vue
index 9678282e5..95fc52c6a 100644
--- a/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivity.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivity.vue
@@ -25,7 +25,7 @@ import CellSubmissionActivityReviewsUpdate from './CellSubmissionActivityReviews
 import CellSubmissionActivityReviewsOpen from './CellSubmissionActivityReviewsOpen.vue';
 
 import {defineProps, computed} from 'vue';
-import TableCell from '@/components/TableNext/TableCell.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 
 import {
 	useDashboardPageStore,
diff --git a/src/pages/dashboard/components/DashboardTable/CellSubmissionDays.vue b/src/pages/dashboard/components/DashboardTable/CellSubmissionDays.vue
index 5d303ea96..8537943a1 100644
--- a/src/pages/dashboard/components/DashboardTable/CellSubmissionDays.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellSubmissionDays.vue
@@ -3,7 +3,7 @@
 </template>
 <script setup>
 import {defineProps} from 'vue';
-import TableCell from '@/components/TableNext/TableCell.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 
 defineProps({
 	item: {type: Object, required: true},
diff --git a/src/pages/dashboard/components/DashboardTable/CellSubmissionId.vue b/src/pages/dashboard/components/DashboardTable/CellSubmissionId.vue
index 9f8f0669a..310cbb9de 100644
--- a/src/pages/dashboard/components/DashboardTable/CellSubmissionId.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellSubmissionId.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import {defineProps} from 'vue';
-import TableCell from '@/components/TableNext/TableCell.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 
 defineProps({
 	item: {type: Object, required: true},
diff --git a/src/pages/dashboard/components/DashboardTable/CellSubmissionStage.vue b/src/pages/dashboard/components/DashboardTable/CellSubmissionStage.vue
index 6b6449809..3356d18dd 100644
--- a/src/pages/dashboard/components/DashboardTable/CellSubmissionStage.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellSubmissionStage.vue
@@ -11,7 +11,7 @@
 <script setup>
 import {defineProps, computed} from 'vue';
 
-import TableCell from '@/components/TableNext/TableCell.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 import StageBubble from '@/components/StageBubble/StageBubble.vue';
 import {useSubmission} from '@/composables/useSubmission';
 
diff --git a/src/pages/dashboard/components/DashboardTable/CellSubmissionTitle.vue b/src/pages/dashboard/components/DashboardTable/CellSubmissionTitle.vue
index 5aa0ecd52..6ac0c4be3 100644
--- a/src/pages/dashboard/components/DashboardTable/CellSubmissionTitle.vue
+++ b/src/pages/dashboard/components/DashboardTable/CellSubmissionTitle.vue
@@ -22,7 +22,7 @@
 <script setup>
 import {defineProps, computed} from 'vue';
 import {useSubmission} from '@/composables/useSubmission';
-import TableCell from '@/components/TableNext/TableCell.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 import {useLocalize} from '@/composables/useLocalize';
 const props = defineProps({item: {type: Object, required: true}});
 
diff --git a/src/pages/dashboard/components/DashboardTable/DashboardTable.vue b/src/pages/dashboard/components/DashboardTable/DashboardTable.vue
index fe8ab4e14..c46dee716 100644
--- a/src/pages/dashboard/components/DashboardTable/DashboardTable.vue
+++ b/src/pages/dashboard/components/DashboardTable/DashboardTable.vue
@@ -32,12 +32,12 @@
 
 <script setup>
 import {defineProps} from 'vue';
-import PkpTable from '@/components/TableNext/Table.vue';
-import TableColumn from '@/components/TableNext/TableColumn.vue';
-import TableHeader from '@/components/TableNext/TableHeader.vue';
-import TableBody from '@/components/TableNext/TableBody.vue';
-import TableRow from '@/components/TableNext/TableRow.vue';
-import TablePagination from '@/components/TableNext/TablePagination.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableRow from '@/components/Table/TableRow.vue';
+import TablePagination from '@/components/Table/TablePagination.vue';
 
 import CellSubmissionActions from './CellSubmissionActions.vue';
 import CellSubmissionActivity from './CellSubmissionActivity/CellSubmissionActivity.vue';
diff --git a/src/pages/jobs/FailedJobDetailsPage.vue b/src/pages/jobs/FailedJobDetailsPage.vue
index 4936225f7..0bed1ba98 100644
--- a/src/pages/jobs/FailedJobDetailsPage.vue
+++ b/src/pages/jobs/FailedJobDetailsPage.vue
@@ -26,12 +26,12 @@
 </template>
 
 <script>
-import PkpTable from '@/components/TableNext/Table.vue';
-import TableCell from '@/components/TableNext/TableCell.vue';
-import TableColumn from '@/components/TableNext/TableColumn.vue';
-import TableHeader from '@/components/TableNext/TableHeader.vue';
-import TableBody from '@/components/TableNext/TableBody.vue';
-import TableRow from '@/components/TableNext/TableRow.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableCell from '@/components/Table/TableCell.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableRow from '@/components/Table/TableRow.vue';
 
 export default {
 	name: 'FailedJobDetailsPage',
diff --git a/src/pages/jobs/FailedJobsPage.vue b/src/pages/jobs/FailedJobsPage.vue
index 8dc06805b..a7c10393a 100644
--- a/src/pages/jobs/FailedJobsPage.vue
+++ b/src/pages/jobs/FailedJobsPage.vue
@@ -55,12 +55,12 @@
 </template>
 <script>
 import JobsPageBase from './JobsPageBase.vue';
-import PkpTable from '@/components/TableNext/Table.vue';
-import TableHeader from '@/components/TableNext/TableHeader.vue';
-import TableColumn from '@/components/TableNext/TableColumn.vue';
-import TableBody from '@/components/TableNext/TableBody.vue';
-import TableRow from '@/components/TableNext/TableRow.vue';
-import TableCell from '@/components/TableNext/TableCell.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableRow from '@/components/Table/TableRow.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 import Pagination from '@/components/Pagination/Pagination.vue';
 import ButtonRow from '@/components/ButtonRow/ButtonRow.vue';
 import Spinner from '@/components/Spinner/Spinner.vue';
diff --git a/src/pages/jobs/JobsPage.vue b/src/pages/jobs/JobsPage.vue
index 442006a50..3f8cb0231 100644
--- a/src/pages/jobs/JobsPage.vue
+++ b/src/pages/jobs/JobsPage.vue
@@ -37,12 +37,12 @@
 
 <script>
 import JobsPageBase from './JobsPageBase.vue';
-import PkpTable from '@/components/TableNext/Table.vue';
-import TableHeader from '@/components/TableNext/TableHeader.vue';
-import TableColumn from '@/components/TableNext/TableColumn.vue';
-import TableBody from '@/components/TableNext/TableBody.vue';
-import TableRow from '@/components/TableNext/TableRow.vue';
-import TableCell from '@/components/TableNext/TableCell.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableRow from '@/components/Table/TableRow.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 import Pagination from '@/components/Pagination/Pagination.vue';
 
 export default {
diff --git a/src/pages/userInvitation/UserInvitationUserGroupsTable.vue b/src/pages/userInvitation/UserInvitationUserGroupsTable.vue
index d2a028304..6c6cd5456 100644
--- a/src/pages/userInvitation/UserInvitationUserGroupsTable.vue
+++ b/src/pages/userInvitation/UserInvitationUserGroupsTable.vue
@@ -100,12 +100,12 @@
 <script setup>
 import {computed} from 'vue';
 import {useTranslation} from '@/composables/useTranslation';
-import PkpTable from '@/components/TableNext/Table.vue';
-import TableCell from '@/components/TableNext/TableCell.vue';
-import TableHeader from '@/components/TableNext/TableHeader.vue';
-import TableColumn from '@/components/TableNext/TableColumn.vue';
-import TableBody from '@/components/TableNext/TableBody.vue';
-import TableRow from '@/components/TableNext/TableRow.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableCell from '@/components/Table/TableCell.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableRow from '@/components/Table/TableRow.vue';
 import FieldSelect from '@/components/Form/fields/FieldSelect.vue';
 import PkpButton from '@/components/Button/Button.vue';
 import FieldText from '@/components/Form/fields/FieldText.vue';

From 54f04a02d1359ca5e70f0554863535e3d6dc7506 Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Mon, 9 Sep 2024 19:39:19 +0800
Subject: [PATCH 3/7] pkp/pkp-lib#9744 Change how aria-labelledby and
 aria-describedby is assigned in the table

---
 src/components/Table/Table.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue
index e36913982..a2d2c426a 100644
--- a/src/components/Table/Table.vue
+++ b/src/components/Table/Table.vue
@@ -17,10 +17,8 @@
 	</div>
 	<table
 		class="pkpTable w-full max-w-full border-separate border-spacing-0"
-		:aria-labelledby="labelledBy ?? (slots.label ? labelId : null)"
-		:aria-describedby="
-			describedBy ?? (slots.description ? descriptionId : null)
-		"
+		:aria-labelledby="labelId"
+		:aria-describedby="descriptionId"
 	>
 		<slot />
 	</table>
@@ -70,8 +68,8 @@ const tableContext = {
 const slots = useSlots();
 
 const {generateId} = useId();
-const labelId = slots.label ? generateId() : null;
-const descriptionId = slots.description ? generateId() : null;
+const labelId = slots.label ? generateId() : props.labelledBy;
+const descriptionId = slots.description ? generateId() : props.describedBy;
 
 provide('tableContext', tableContext);
 </script>

From 661a912c6224a2d23a93915dc557947c4f707111 Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Mon, 9 Sep 2024 19:40:10 +0800
Subject: [PATCH 4/7] pkp/pkp-lib#9744 Update documentation for Table component

---
 src/components/Table/Table.mdx | 35 +++++++++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/components/Table/Table.mdx b/src/components/Table/Table.mdx
index dec749af7..a2667d14b 100644
--- a/src/components/Table/Table.mdx
+++ b/src/components/Table/Table.mdx
@@ -14,9 +14,38 @@ Use the `Table` component to display tabular data when the user will sort, searc
 
 ## Accessibility
 
-Table component requires aria-label attribute to describe content of table.
+### General Guidelines
 
-One column should be [rowheader](https://www.w3.org/TR/wai-aria-1.1/#rowheader) to improve screen reader experience. Its prop on TableCell, not on TableColumn as one would expect as it allows for significantly easier implementation.
+To ensure the `Table` component is accessible:
+
+- The `aria-labelledby` and `aria-describedby` attributes are automatically linked when using the `label` and `description` slots, or they can be manually set with the `labelledBy` and `describedBy` props if using external labels and description for the table.
+- If neither `labelledBy`/`describedBy` props nor `label`/`description` slots are provided, use the `ariaLabel` prop to provide accessible information about the table.
+- One column should be [rowheader](https://www.w3.org/TR/wai-aria-1.1/#rowheader) to improve screen reader experience. It's a prop on TableCell, not on TableColumn as one would expect as it allows for significantly easier implementation.
+
+### Slots and ARIA Attributes
+
+If the table has a label or description, ensure that:
+
+- The `labelledBy` and `describedBy` props point to the correct element IDs, especially if the label or description is external to the component.
+- If you're using the `label` or `description` slots, the component will automatically assign IDs and link them to the table via `aria-labelledby` and `aria-describedby`.
+
+## Slots
+
+### `label`
+
+This slot is used to provide a custom label for the table.
+
+### `description`
+
+Use this slot to provide additional information or context about the table's content.
+
+### `top-controls`
+
+The `top-controls` slot is used to add buttons or other interactive elements that appear above the table.
+
+### `bottom-controls`
+
+The `bottom-controls` slot is used for adding controls below the table, such as pagination controls, summary information, or other actionable elements.
 
 ## Table Props
 
@@ -26,7 +55,7 @@ One column should be [rowheader](https://www.w3.org/TR/wai-aria-1.1/#rowheader)
 
 <ArgTypes of={TableColumn} />
 
-# TableCell Props
+## TableCell Props
 
 <ArgTypes of={TableCell} />
 

From 0d2198bc77e107a86208f89bce20bd8871662f50 Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Tue, 10 Sep 2024 23:36:35 +0800
Subject: [PATCH 5/7] pkp/pkp-lib#9744 Migrate native tables that use class
 pkpTable to use the new table component

---
 .../contributors/ContributorsPreviewModal.vue |  58 ++++++----
 .../ListPanel/doi/DoiStatusInfoModal.vue      | 103 ++++++++++++------
 .../ContextDownloadReportModal.vue            |  17 ++-
 .../statsIssues/IssueDownloadReportModal.vue  |  27 +++--
 .../PublicationsDownloadReportModal.vue       |  41 ++++---
 5 files changed, 153 insertions(+), 93 deletions(-)

diff --git a/src/components/ListPanel/contributors/ContributorsPreviewModal.vue b/src/components/ListPanel/contributors/ContributorsPreviewModal.vue
index 9496b7576..428eeb702 100644
--- a/src/components/ListPanel/contributors/ContributorsPreviewModal.vue
+++ b/src/components/ListPanel/contributors/ContributorsPreviewModal.vue
@@ -7,35 +7,47 @@
 			<p>
 				{{ t('contributor.listPanel.preview.description') }}
 			</p>
-			<table class="pkpTable">
-				<thead>
-					<tr>
-						<th>{{ t('contributor.listPanel.preview.format') }}</th>
-						<th>{{ t('contributor.listPanel.preview.display') }}</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr>
-						<td>{{ t('contributor.listPanel.preview.abbreviated') }}</td>
-						<td>{{ publication.authorsStringShort }}</td>
-					</tr>
-					<tr>
-						<td>
+			<PkpTable>
+				<TableHeader>
+					<TableColumn>
+						{{ t('contributor.listPanel.preview.format') }}
+					</TableColumn>
+					<TableColumn>
+						{{ t('contributor.listPanel.preview.display') }}
+					</TableColumn>
+				</TableHeader>
+				<TableBody>
+					<TableRow>
+						<TableCell>
+							{{ t('contributor.listPanel.preview.abbreviated') }}
+						</TableCell>
+						<TableCell>{{ publication.authorsStringShort }}</TableCell>
+					</TableRow>
+					<TableRow>
+						<TableCell>
 							{{ t('contributor.listPanel.preview.publicationLists') }}
-						</td>
-						<td>{{ publication.authorsStringIncludeInBrowse }}</td>
-					</tr>
-					<tr>
-						<td>{{ t('contributor.listPanel.preview.full') }}</td>
-						<td>{{ publication.authorsString }}</td>
-					</tr>
-				</tbody>
-			</table>
+						</TableCell>
+						<TableCell>
+							{{ publication.authorsStringIncludeInBrowse }}
+						</TableCell>
+					</TableRow>
+					<TableRow>
+						<TableCell>{{ t('contributor.listPanel.preview.full') }}</TableCell>
+						<TableCell>{{ publication.authorsString }}</TableCell>
+					</TableRow>
+				</TableBody>
+			</PkpTable>
 		</SideModalLayoutBasic>
 	</SideModalBody>
 </template>
 
 <script setup>
+import PkpTable from '@/components/Table/Table.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableRow from '@/components/Table/TableRow.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 import SideModalBody from '@/components/Modal/SideModalBody.vue';
 import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
 import {useLocalize} from '@/composables/useLocalize';
diff --git a/src/components/ListPanel/doi/DoiStatusInfoModal.vue b/src/components/ListPanel/doi/DoiStatusInfoModal.vue
index 92d915693..e3b19d88f 100644
--- a/src/components/ListPanel/doi/DoiStatusInfoModal.vue
+++ b/src/components/ListPanel/doi/DoiStatusInfoModal.vue
@@ -4,42 +4,68 @@
 			{{ t('manager.dois.help.statuses.title') }}
 		</template>
 		<SideModalLayoutBasic>
-			<table class="pkpTable">
-				<thead>
-					<tr>
-						<th>{{ t('common.status') }}</th>
-						<th>{{ t('common.description') }}</th>
-					</tr>
-				</thead>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.needsDoi') }}</th>
-					<td>{{ t('manager.dois.status.needsDoi.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.filters.doiAssigned') }}</th>
-					<td>{{ t('manager.dois.filters.doiAssigned.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.unregistered') }}</th>
-					<td>{{ t('manager.dois.status.unregistered.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.submitted') }}</th>
-					<td>{{ t('manager.dois.status.submitted.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.registered') }}</th>
-					<td>{{ t('manager.dois.status.registered.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.error.filterTitle') }}</th>
-					<td>{{ t('manager.dois.status.error.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.stale') }}</th>
-					<td>{{ t('manager.dois.status.stale.description') }}</td>
-				</tr>
-			</table>
+			<PkpTable>
+				<TableHeader>
+					<TableColumn>{{ t('common.status') }}</TableColumn>
+					<TableColumn>{{ t('common.description') }}</TableColumn>
+				</TableHeader>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('manager.dois.status.needsDoi') }}
+					</TableCell>
+					<TableCell>
+						{{ t('manager.dois.status.needsDoi.description') }}
+					</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('manager.dois.filters.doiAssigned') }}
+					</TableCell>
+					<TableCell>
+						{{ t('manager.dois.filters.doiAssigned.description') }}
+					</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('manager.dois.status.unregistered') }}
+					</TableCell>
+					<TableCell>
+						{{ t('manager.dois.status.unregistered.description') }}
+					</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('manager.dois.status.submitted') }}
+					</TableCell>
+					<TableCell>
+						{{ t('manager.dois.status.submitted.description') }}
+					</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('manager.dois.status.registered') }}
+					</TableCell>
+					<TableCell>
+						{{ t('manager.dois.status.registered.description') }}
+					</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('manager.dois.status.error.filterTitle') }}
+					</TableCell>
+					<TableCell>
+						{{ t('manager.dois.status.error.description') }}
+					</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('manager.dois.status.stale') }}
+					</TableCell>
+					<TableCell>
+						{{ t('manager.dois.status.stale.description') }}
+					</TableCell>
+				</TableRow>
+			</PkpTable>
 		</SideModalLayoutBasic>
 	</SideModalBody>
 </template>
@@ -48,6 +74,11 @@
 import SideModalBody from '@/components/Modal/SideModalBody.vue';
 import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
 import {useLocalize} from '@/composables/useLocalize';
+import PkpTable from '@/components/Table/Table.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableRow from '@/components/Table/TableRow.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 
 const {t} = useLocalize();
 </script>
diff --git a/src/pages/statsContext/ContextDownloadReportModal.vue b/src/pages/statsContext/ContextDownloadReportModal.vue
index 62e677a71..345b4bd5a 100644
--- a/src/pages/statsContext/ContextDownloadReportModal.vue
+++ b/src/pages/statsContext/ContextDownloadReportModal.vue
@@ -5,12 +5,14 @@
 		</template>
 		<SideModalLayoutBasic>
 			<p>{{ t('stats.context.downloadReport.description') }}</p>
-			<table class="pkpTable pkpStats__reportParams">
-				<tr class="pkpTable__row">
-					<th>{{ t('stats.dateRange') }}</th>
-					<td>{{ dateRangeDescription }}</td>
-				</tr>
-			</table>
+			<PkpTable>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('stats.dateRange') }}
+					</TableCell>
+					<TableCell>{{ dateRangeDescription }}</TableCell>
+				</TableRow>
+			</PkpTable>
 			<ActionPanel class="pkpStats__reportAction">
 				<h2>{{ t('context.context') }}</h2>
 				<p>
@@ -43,6 +45,9 @@ import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
 import {useLocalize} from '@/composables/useLocalize';
 import ActionPanel from '@/components/ActionPanel/ActionPanel.vue';
 import PkpButton from '@/components/Button/Button.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableRow from '@/components/Table/TableRow.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 
 const {t} = useLocalize();
 defineProps({
diff --git a/src/pages/statsIssues/IssueDownloadReportModal.vue b/src/pages/statsIssues/IssueDownloadReportModal.vue
index dd7588197..7876d391c 100644
--- a/src/pages/statsIssues/IssueDownloadReportModal.vue
+++ b/src/pages/statsIssues/IssueDownloadReportModal.vue
@@ -5,16 +5,20 @@
 		</template>
 		<SideModalLayoutBasic>
 			<p>{{ t('stats.issues.downloadReport.description') }}</p>
-			<table class="pkpTable pkpStats__reportParams">
-				<tr class="pkpTable__row">
-					<th>{{ t('stats.dateRange') }}</th>
-					<td>{{ dateRangeDescription }}</td>
-				</tr>
-				<tr v-if="searchPhrase" class="pkpTable__row">
-					<th>{{ t('common.searchPhrase') }}</th>
-					<td>{{ searchPhrase }}</td>
-				</tr>
-			</table>
+			<PkpTable>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('stats.dateRange') }}
+					</TableCell>
+					<TableCell>{{ dateRangeDescription }}</TableCell>
+				</TableRow>
+				<TableRow v-if="searchPhrase">
+					<TableCell :is-row-header="true">
+						{{ t('common.searchPhrase') }}
+					</TableCell>
+					<TableCell>{{ searchPhrase }}</TableCell>
+				</TableRow>
+			</PkpTable>
 			<ActionPanel class="pkpStats__reportAction">
 				<h2>{{ t('issue.issues') }}</h2>
 				<p>
@@ -47,6 +51,9 @@ import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
 import {useLocalize} from '@/composables/useLocalize';
 import ActionPanel from '@/components/ActionPanel/ActionPanel.vue';
 import PkpButton from '@/components/Button/Button.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableRow from '@/components/Table/TableRow.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 
 const {t} = useLocalize();
 defineProps({
diff --git a/src/pages/statsPublications/PublicationsDownloadReportModal.vue b/src/pages/statsPublications/PublicationsDownloadReportModal.vue
index 4fee9165c..d21e19904 100644
--- a/src/pages/statsPublications/PublicationsDownloadReportModal.vue
+++ b/src/pages/statsPublications/PublicationsDownloadReportModal.vue
@@ -5,24 +5,26 @@
 		</template>
 		<SideModalLayoutBasic>
 			<p>{{ t('stats.publications.downloadReport.description') }}</p>
-			<table class="pkpTable pkpStats__reportParams">
-				<tr class="pkpTable__row">
-					<th>{{ t('stats.dateRange') }}</th>
-					<td>{{ dateRangeDescription }}</td>
-				</tr>
-				<tr
-					v-for="(filterSet, index) in filters"
-					:key="index"
-					class="pkpTable__row"
-				>
-					<th>{{ filterSet.heading }}</th>
-					<td>{{ getFilterDescription(filterSet) }}</td>
-				</tr>
-				<tr v-if="searchPhrase" class="pkpTable__row">
-					<th>{{ t('common.searchPhrase') }}</th>
-					<td>{{ searchPhrase }}</td>
-				</tr>
-			</table>
+			<PkpTable>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('stats.dateRange') }}
+					</TableCell>
+					<TableCell>{{ dateRangeDescription }}</TableCell>
+				</TableRow>
+				<TableRow v-for="(filterSet, index) in filters" :key="index">
+					<TableCell :is-row-header="true">
+						{{ filterSet.heading }}
+					</TableCell>
+					<TableCell>{{ getFilterDescription(filterSet) }}</TableCell>
+				</TableRow>
+				<TableRow v-if="searchPhrase">
+					<TableCell :is-row-header="true">
+						{{ t('common.searchPhrase') }}
+					</TableCell>
+					<TableCell>{{ searchPhrase }}</TableCell>
+				</TableRow>
+			</PkpTable>
 			<ActionPanel class="pkpStats__reportAction">
 				<h2>{{ t('common.publications') }}</h2>
 				<p>
@@ -92,6 +94,9 @@ import {useLocalize} from '@/composables/useLocalize';
 import ActionPanel from '@/components/ActionPanel/ActionPanel.vue';
 import PkpButton from '@/components/Button/Button.vue';
 import Tooltip from '@/components/Tooltip/Tooltip.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableRow from '@/components/Table/TableRow.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 
 const {t} = useLocalize();
 defineProps({

From 07e4bbc9ba3d2f9ebff50cc59b290bef00fafac3 Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Tue, 10 Sep 2024 23:38:05 +0800
Subject: [PATCH 6/7] pkp/pkp-lib#9744 Update logic of noContent in TableBody
 component

---
 src/components/Table/TableBody.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Table/TableBody.vue b/src/components/Table/TableBody.vue
index aa96fad31..52040ad5f 100644
--- a/src/components/Table/TableBody.vue
+++ b/src/components/Table/TableBody.vue
@@ -27,9 +27,9 @@ const {t} = useLocalize();
 const tableContext = inject('tableContext');
 
 const noContent = computed(() => {
-	const defaultSlot = slots.default();
+	const defaultSlot = slots.default ? slots.default() : [];
 
-	return !defaultSlot?.[0]?.children?.length;
+	return !defaultSlot?.[0]?.children?.length && !defaultSlot?.[0]?.type?.render;
 });
 
 const emptyText = computed(() => {

From b78aefb25eae6f32b9d1178cc5230c685eba665d Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Tue, 10 Sep 2024 23:43:36 +0800
Subject: [PATCH 7/7] pkp/pkp-lib#9744 Remove unused classes related to table
 component

---
 src/components/Container/StatsPage.vue             | 2 +-
 src/components/Container/StatsPublicationsPage.vue | 7 -------
 src/components/Container/SubmissionWizardPage.vue  | 7 -------
 src/components/ListPanel/doi/DoiListItem.vue       | 6 +-----
 src/components/Table/Table.vue                     | 2 +-
 5 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/src/components/Container/StatsPage.vue b/src/components/Container/StatsPage.vue
index 9f151cdd5..f5818879c 100644
--- a/src/components/Container/StatsPage.vue
+++ b/src/components/Container/StatsPage.vue
@@ -486,7 +486,7 @@ export default {
 	}
 }
 
-.pkpStats__table .pkpTable.-isLoading tbody {
+.pkpStats__table .-isLoading tbody {
 	opacity: 0.5;
 }
 
diff --git a/src/components/Container/StatsPublicationsPage.vue b/src/components/Container/StatsPublicationsPage.vue
index 994e71219..6a1a6493b 100644
--- a/src/components/Container/StatsPublicationsPage.vue
+++ b/src/components/Container/StatsPublicationsPage.vue
@@ -611,13 +611,6 @@ export default {
 	padding-top: 0;
 }
 
-.pkpStats__reportParams {
-	th {
-		font-weight: @bold;
-		border-right: @grid-border;
-	}
-}
-
 .pkpStats__reportAction {
 	margin: 2rem 0;
 }
diff --git a/src/components/Container/SubmissionWizardPage.vue b/src/components/Container/SubmissionWizardPage.vue
index 2bc0c9976..cc49e8a61 100644
--- a/src/components/Container/SubmissionWizardPage.vue
+++ b/src/components/Container/SubmissionWizardPage.vue
@@ -960,13 +960,6 @@ ul.submissionWizard__reviewPanel__item__value {
 	list-style: none;
 }
 
-// A table used for a review
-.submissionWizard__reviewPanel__body {
-	.pkpTable {
-		border: none;
-	}
-}
-
 .submissionWizard__reviewPanel__citation
 	+ .submissionWizard__reviewPanel__citation {
 	margin-top: 1rem;
diff --git a/src/components/ListPanel/doi/DoiListItem.vue b/src/components/ListPanel/doi/DoiListItem.vue
index 476156079..af8e24b30 100644
--- a/src/components/ListPanel/doi/DoiListItem.vue
+++ b/src/components/ListPanel/doi/DoiListItem.vue
@@ -65,7 +65,7 @@
 		<!-- Expanded view/identifiers -->
 		<div
 			v-if="isExpanded"
-			class="listPanel__itemExpanded listPanel__itemExpanded--doi"
+			class="listPanel__itemExpanded listPanel__itemExpanded--doi mt-2"
 		>
 			<PkpTable>
 				<TableHeader>
@@ -923,10 +923,6 @@ export default {
 	margin-left: 2.25rem;
 }
 
-.listPanel__item--doi .listPanel__itemExpanded .pkpTable {
-	margin-top: 0.5rem;
-}
-
 .doiListPanel__itemExpandedActions {
 	display: flex;
 	align-items: center;
diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue
index a2d2c426a..3cf814601 100644
--- a/src/components/Table/Table.vue
+++ b/src/components/Table/Table.vue
@@ -16,7 +16,7 @@
 		</div>
 	</div>
 	<table
-		class="pkpTable w-full max-w-full border-separate border-spacing-0"
+		class="w-full max-w-full border-separate border-spacing-0"
 		:aria-labelledby="labelId"
 		:aria-describedby="descriptionId"
 	>