diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 1259dde60cc..0223b740f08 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -647,13 +647,13 @@ Cypress.Commands.add('checkTable', (articleDetails, articles, authors, submissio
 	cy.get('h2:contains("' + articleDetails + '")').scrollIntoView();
 	cy.get(`div:contains("${submissionCount} of ${submissionCount} ${articles}")`);
 	authors.forEach(author => {
-		cy.get('.pkpStats__panel .pkpTable__cell:contains("' + author + '")');
+		cy.get('.pkpStats__panel .pkpStats__itemAuthors:contains("' + author + '")');
 	});
 	cy.get('input.pkpSearch__input').type('shouldreturnzeromatches', {delay: 0});
 	cy.get('div:contains("No ' + articles + ' were found with usage statistics matching these parameters.")');
 	cy.get('div:contains("0 of 0 ' + articles + '")');
 	cy.get('input.pkpSearch__input').clear().type(authors[0], {delay: 0});
-	cy.get('.pkpStats__panel .pkpTable__cell:contains("' + authors[0] + '")');
+	cy.get('.pkpStats__panel .pkpStats__itemAuthors:contains("' + authors[0] + '")');
 	cy.get(`div:contains("${submissionCountFromAuthor} of ${submissionCountFromAuthor} ${articles}")`);
 	cy.get('input.pkpSearch__input').clear();
 });
diff --git a/cypress/tests/integration/Jobs.cy.js b/cypress/tests/integration/Jobs.cy.js
index 10f6a3875a4..c4de58d87b5 100644
--- a/cypress/tests/integration/Jobs.cy.js
+++ b/cypress/tests/integration/Jobs.cy.js
@@ -23,7 +23,7 @@ describe('Jobs tests', function() {
         cy.waitJQuery();
 
         cy.get('.pkpTable')
-          .find('span:contains("queuedTestJob")')
+          .find('td:contains("queuedTestJob")')
           .should('have.length', 2)
           .should('be.visible');
 
@@ -34,7 +34,7 @@ describe('Jobs tests', function() {
         cy.waitJQuery();
 
         cy.get('.pkpTable')
-          .find('span:contains("queuedTestJob")')
+          .find('td:contains("queuedTestJob")')
           .should('have.length', 0);
 
         cy.logout();
@@ -62,7 +62,7 @@ describe('Jobs tests', function() {
 
       // check for 4 failed job rows
       cy.get('.pkpTable')
-        .find('span:contains("queuedTestJob")')
+        .find('td:contains("queuedTestJob")')
         .should('have.length', 4)
         .should('be.visible');
 
@@ -71,7 +71,7 @@ describe('Jobs tests', function() {
 
       // check for 3 failed job rows
       cy.get('.pkpTable')
-        .find('span:contains("queuedTestJob")')
+        .find('td:contains("queuedTestJob")')
         .should('have.length', 3)
         .should('be.visible');
 
@@ -80,7 +80,7 @@ describe('Jobs tests', function() {
 
       // check for 2 failed job rows
       cy.get('.pkpTable')
-        .find('span:contains("queuedTestJob")')
+        .find('td:contains("queuedTestJob")')
         .should('have.length', 2);
 
       // Back to Jobs page
@@ -90,7 +90,7 @@ describe('Jobs tests', function() {
 
       // Check for one job in queue which just redispatch from failed job page
       cy.get('.pkpTable')
-        .find('span:contains("queuedTestJob")')
+        .find('td:contains("queuedTestJob")')
         .should('have.length', 1);
 
       // Back to failed jobs page
@@ -114,7 +114,7 @@ describe('Jobs tests', function() {
 
       // check for 0 failed job rows after requeue all action
       cy.get('.pkpTable')
-        .find('span:contains("queuedTestJob")')
+        .find('td:contains("queuedTestJob")')
         .should('have.length', 0);
 
       // Confirm that 'Requeue All Failed Jobs' button has removed from view
@@ -127,7 +127,7 @@ describe('Jobs tests', function() {
 
       // Check for 2 more jobs(in totla 3) in queue which just redispatch via requeue all action
       cy.get('.pkpTable')
-        .find('span:contains("queuedTestJob")')
+        .find('td:contains("queuedTestJob")')
         .should('have.length', 3);
 
       // purge all existing jobs in the test queue
@@ -137,7 +137,7 @@ describe('Jobs tests', function() {
       cy.waitJQuery();
 
       cy.get('.pkpTable')
-        .find('span:contains("queuedTestJob")')
+        .find('td:contains("queuedTestJob")')
         .should('have.length', 0);
 
       cy.logout();
diff --git a/js/load.js b/js/load.js
index 4437b860198..c00ae7f1305 100644
--- a/js/load.js
+++ b/js/load.js
@@ -65,8 +65,12 @@ import Orderer from '@/components/Orderer/Orderer.vue';
 import Pagination from '@/components/Pagination/Pagination.vue';
 import ProgressBar from '@/components/ProgressBar/ProgressBar.vue';
 import Search from '@/components/Search/Search.vue';
-import Table from '@/components/Table/Table.vue';
-import TableCell from '@/components/Table/TableCell.vue';
+import Table 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 Tooltip from '@/components/Tooltip/Tooltip.vue';
 
 // Form components from UI Library
@@ -80,7 +84,7 @@ import FieldControlledVocab from '@/components/Form/fields/FieldControlledVocab.
 import FieldHtml from '@/components/Form/fields/FieldHtml.vue';
 import FieldMetadataSetting from '@/components/Form/fields/FieldMetadataSetting.vue';
 import FieldOptions from '@/components/Form/fields/FieldOptions.vue';
-import FieldOrcid from "@/components/Form/fields/FieldOrcid.vue";
+import FieldOrcid from '@/components/Form/fields/FieldOrcid.vue';
 import FieldPreparedContent from '@/components/Form/fields/FieldPreparedContent.vue';
 import FieldPubId from '@/components/Form/fields/FieldPubId.vue';
 import FieldRadioInput from '@/components/Form/fields/FieldRadioInput.vue';
@@ -158,7 +162,11 @@ VueRegistry.registerComponent('PkpPagination', Pagination);
 VueRegistry.registerComponent('PkpProgressBar', ProgressBar);
 VueRegistry.registerComponent('PkpSearch', Search);
 VueRegistry.registerComponent('PkpTable', Table);
+VueRegistry.registerComponent('PkpTableBody', TableBody);
 VueRegistry.registerComponent('PkpTableCell', TableCell);
+VueRegistry.registerComponent('PkpTableColumn', TableColumn);
+VueRegistry.registerComponent('PkpTableHeader', TableHeader);
+VueRegistry.registerComponent('PkpTableRow', TableRow);
 VueRegistry.registerComponent('PkpTooltip', Tooltip);
 
 // Register Form components
diff --git a/pages/admin/AdminHandler.php b/pages/admin/AdminHandler.php
index 32113d5fefa..912cad54523 100644
--- a/pages/admin/AdminHandler.php
+++ b/pages/admin/AdminHandler.php
@@ -519,10 +519,10 @@ public function jobs($args, $request)
             'name' => __('navigation.tools.jobs'),
         ];
 
-        $templateMgr->setState($this->getJobsTableState($request));
+        $templateMgr->setState(['pageInitConfig' => $this->getJobsTableState($request)]);
 
         $templateMgr->assign([
-            'pageComponent' => 'JobsPage',
+            'pageComponent' => 'Page',
             'breadcrumbs' => $breadcrumbs,
             'pageTitle' => 'navigation.tools.jobs',
         ]);
@@ -587,10 +587,10 @@ public function failedJobs($args, $request)
             'name' => __('navigation.tools.jobs.failed'),
         ];
 
-        $templateMgr->setState($this->getFailedJobsTableState($request));
+        $templateMgr->setState(['pageInitConfig' => $this->getFailedJobsTableState($request)]);
 
         $templateMgr->assign([
-            'pageComponent' => 'FailedJobsPage',
+            'pageComponent' => 'Page',
             'breadcrumbs' => $breadcrumbs,
             'pageTitle' => 'navigation.tools.jobs.failed',
         ]);
@@ -677,25 +677,29 @@ public function failedJobDetails($args, $request)
             'name' => __('navigation.tools.jobs.failed.details'),
         ];
 
-        $templateMgr->setState([
-            'label' => __('navigation.tools.job.failed.details.view', ['id' => $failedJob->id]),
-            'columns' => [
-                [
-                    'name' => 'attribute',
-                    'label' => __('admin.job.failed.list.attribute'),
-                    'value' => 'attribute',
-                ],
-                [
-                    'name' => 'value',
-                    'label' => __('admin.job.failed.list.attribute.value'),
-                    'value' => 'value',
-                ],
-            ],
-            'rows' => $rows,
-        ]);
+        $templateMgr->setState(
+            [
+                'pageInitConfig' => [
+                    'label' => __('navigation.tools.job.failed.details.view', ['id' => $failedJob->id]),
+                    'columns' => [
+                        [
+                            'name' => 'attribute',
+                            'label' => __('admin.job.failed.list.attribute'),
+                            'value' => 'attribute',
+                        ],
+                        [
+                            'name' => 'value',
+                            'label' => __('admin.job.failed.list.attribute.value'),
+                            'value' => 'value',
+                        ],
+                    ],
+                    'rows' => $rows,
+                ]
+            ]
+        );
 
         $templateMgr->assign([
-            'pageComponent' => 'FailedJobDetailsPage',
+            'pageComponent' => 'Page',
             'breadcrumbs' => $breadcrumbs,
             'pageTitle' => 'navigation.tools.jobs.failed.details',
         ]);
diff --git a/templates/admin/failedJobDetails.tpl b/templates/admin/failedJobDetails.tpl
index 540e292b147..ff262a6359b 100644
--- a/templates/admin/failedJobDetails.tpl
+++ b/templates/admin/failedJobDetails.tpl
@@ -13,27 +13,7 @@
 	<h1 class="app__pageHeading">
 		{translate key=$pageTitle}
 	</h1>
-	<div class="app__contentPanel app__contentPanel__overflow">
-		<pkp-table
-			:columns="columns"
-			:rows="rows"
-			:label="label"
-		>
-			<template #default="{ row, rowIndex }">
-				<table-cell
-					v-for="(column, columnIndex) in columns"
-					:key="column.name"
-					:column="column"
-					:row="row"
-					:tabindex="!rowIndex && !columnIndex ? 0 : -1"
-				>
-					<template #default v-if="column.name === 'value' && isValidJson(row.value)">
-						<span>
-							<pre>{{ row.value }}</pre>
-						</span>
-					</template>
-				</table-cell>
-			</template>
-		</pkp-table>
+	<div class="app__contentPanel overflow-auto">
+		<failed-job-details-page v-bind="pageInitConfig"/>
 	</div>
 {/block}
diff --git a/templates/admin/failedJobs.tpl b/templates/admin/failedJobs.tpl
index e9e77b0e5e3..0a1175f086e 100644
--- a/templates/admin/failedJobs.tpl
+++ b/templates/admin/failedJobs.tpl
@@ -14,55 +14,6 @@
 		{translate key=$pageTitle}
 	</h1>
 	<div class="app__contentPanel">
-		<pkp-table
-			:columns="columns"
-			:rows="rows"
-			:description="description"
-			:label="label"
-		>
-			<template #label v-if="total > 0">
-				<div>
-					<span class="pkp_helpers_half pkp_helpers_align_left">{{ label }}</span>
-					<span class="pkp_helpers_half pkp_helpers_align_right pkp_helpers_text_right">
-					<spinner v-if="isLoadingItems"></spinner>
-						<pkp-button @click="requeueAll">
-							{translate key="admin.jobs.failed.action.redispatch.all"}
-						</pkp-button>
-					</span>
-				</div>
-			</template>
-
-			<template #default="{ row, rowIndex }">
-				<table-cell
-					v-for="(column, columnIndex) in columns"
-					:key="column.name"
-					:column="column"
-					:row="row"
-					:tabindex="!rowIndex && !columnIndex ? 0 : -1"
-				>
-					<template #default v-if="column.name === 'actions'">
-						<button-row >
-							<pkp-button @click="redispatch(row)">
-								{translate key="admin.jobs.failed.action.redispatch"}
-							</pkp-button>
-							<pkp-button is-warnable @click="remove(row)">
-								{translate key="common.delete"}
-							</pkp-button>
-							<pkp-button element="a" is-link :href="row._hrefs._details">
-								{translate key="common.details"}
-							</pkp-button>
-						</button-row>
-					</template>
-                </table-cell>
-			</template>
-		</pkp-table>
-
-		<pagination 
-			v-if="lastPage > 1"
-			:current-page="currentPage"
-			:last-page="lastPage"
-			:is-loading="isLoadingItems"
-			@set-page="handlePagination"
-		/>
+		<failed-jobs-page v-bind="pageInitConfig" />
 	</div>
 {/block}
diff --git a/templates/admin/jobs.tpl b/templates/admin/jobs.tpl
index 38cd3c5304d..64c8a8bb667 100644
--- a/templates/admin/jobs.tpl
+++ b/templates/admin/jobs.tpl
@@ -14,18 +14,6 @@
 		{translate key=$pageTitle}
 	</h1>
 	<div class="app__contentPanel">
-		<pkp-table
-			:columns="columns"
-			:rows="rows"
-			:description="description"
-			:label="label"
-		></pkp-table>
-
-		<pagination v-if="lastPage > 1"
-			:current-page="currentPage"
-			:last-page="lastPage"
-			:is-loading="isLoadingItems"
-			@set-page="handlePagination"
-		/>
+		<jobs-page v-bind="pageInitConfig" />
 	</div>
 {/block}
diff --git a/templates/stats/context.tpl b/templates/stats/context.tpl
index c37aade3540..64598e56044 100644
--- a/templates/stats/context.tpl
+++ b/templates/stats/context.tpl
@@ -93,7 +93,7 @@
 				</div>
 				<div class="pkpStats__panel" role="region" aria-live="polite">
 					<pkp-header>
-						<h2>
+						<h2 id="contextDetailTableLabel">
 							{translate key="stats.views"}
 							<tooltip
 								tooltip="{translate key="stats.context.tooltip.text"}"
@@ -110,21 +110,15 @@
 							</pkp-button>
 						</template>
 					</pkp-header>
-					<pkp-table
-						labelled-by="contextDetailTableLabel"
-						:class="tableClasses"
-						:columns="tableColumns"
-						:rows="items"
-					>
-						<template #default="{ row, rowIndex }">
-							<table-cell
-								v-for="(column, columnIndex) in tableColumns"
-								:key="column.name"
-								:column="column"
-								:row="row"
-								:tabindex="!rowIndex && !columnIndex ? 0 : -1"
-							>
-								<template #default v-if="column.name === 'title'">
+					<pkp-table labelled-by="contextDetailTableLabel">
+						<table-header>
+							<table-column v-for="column in tableColumns" :key="column.name" :id="column.name">
+								{{ column.label }}
+							</table-column>
+						</table-header>
+						<table-body>
+							<table-row v-for="(row) in items" :key="row.key">
+								<table-cell>
 									<a
 										:href="row.url"
 										class="pkpStats__itemLink"
@@ -132,16 +126,14 @@
 									>
 										<span class="pkpStats__itemTitle">{{ localize(row.name) }}</span>
 									</a>
-								</template>
-							</table-cell>
-						</template>
+								</table-cell>
+								<table-cell>{{ row.total }}</table-cell>
+							</table-row>
+							<template #no-content v-if="!items.length && isLoadingItems">
+								{translate key="common.loading"}
+							</template>
+						</table-body>
 					</pkp-table>
-					<div v-if="!items.length" class="pkpStats__noRecords">
-						<template v-if="isLoadingItems">
-							<spinner></spinner>
-							{translate key="common.loading"}
-						</template>
-					</div>
 				</div>
 			</div>
 		</div>
diff --git a/templates/stats/editorial.tpl b/templates/stats/editorial.tpl
index 8fe38446000..a484cda7f3d 100644
--- a/templates/stats/editorial.tpl
+++ b/templates/stats/editorial.tpl
@@ -33,7 +33,7 @@
 		</div>
 		<div class="pkpStats__panel">
 			<pkp-header>
-				<h1 id="editorialActivityTabelLabel">
+				<h1 id="editorialActivityTableLabel">
 					{translate key="stats.trends"}
 					<span v-if="isLoading" class="pkpSpinner" aria-hidden="true"></span>
 				</h1>
@@ -103,27 +103,29 @@
 					<div class="pkpStats__table" role="region" aria-live="polite">
 						<pkp-table
 							class="pkpTable--editorialStats"
-							labelled-by="editorialActivityTabelLabel"
-							:columns="tableColumns"
-							:rows="tableRows"
+							labelled-by="editorialActivityTableLabel"
 						>
-							<template #default="{ldelim}row, rowIndex{rdelim}">
-								<table-cell
-									v-for="(column, columnIndex) in tableColumns"
-									:key="column.name"
-									:column="column"
-									:row="row"
-									:tabindex="!rowIndex && !columnIndex ? 0 : -1"
+							<table-header>
+								<table-column v-for="column in tableColumns" :key="column.name" :id="column.name">
+									{{ column.label }}
+								</table-column>
+							</table-header>
+							<table-body>
+								<table-row
+									v-for="(row, index) in tableRows"
+									:key="row.key"
 								>
-									<template #default v-if="column.name === 'name'">
+									<table-cell>
 										{{ row.name }}
 										<tooltip v-if="row.description"
 											:label="t('stats.descriptionForStat', {ldelim}stat: row.name{rdelim})"
 											:tooltip="row.description"
 										></tooltip>
-									</template>
-								</table-cell>
-							</template>
+									</table-cell>
+									<table-cell>{{ row.dateRange }}</table-cell>
+									<table-cell>{{ row.total }}</table-cell>
+								</table-row>
+							</table-body>
 						</pkp-table>
 					</div>
 				</div>
diff --git a/templates/stats/publications.tpl b/templates/stats/publications.tpl
index 36d61153391..3152131a58c 100644
--- a/templates/stats/publications.tpl
+++ b/templates/stats/publications.tpl
@@ -183,31 +183,33 @@
 					</pkp-header>
 					<pkp-table
 						labelled-by="publicationDetailTableLabel"
-						:class="tableClasses"
-						:columns="tableColumns"
-						:rows="items"
-						:order-by="orderBy"
-						:order-direction="orderDirection"
-						@order-by="setOrderBy"
+						@sort="setOrderBy"
 					>
-						<template #thead-title>
-							<search
-								#thead-title
-								class="pkpStats__titleSearch"
-								:search-phrase="searchPhrase"
-								search-label="{translate key="stats.searchSubmissionDescription"}"
-								@search-phrase-changed="setSearchPhrase"
-							></search>
-						</template>
-						<template #default="{ row, rowIndex }">
-							<table-cell
-								v-for="(column, columnIndex) in tableColumns"
+						<table-header>
+							<table-column
+								v-for="column in tableColumns"
 								:key="column.name"
-								:column="column"
-								:row="row"
-								:tabindex="!rowIndex && !columnIndex ? 0 : -1"
+								:id="column.name"
+								:allows-sorting="column.name === 'total'"
 							>
-								<template #default v-if="column.name === 'title'">
+								<template v-if="column.name === 'title'">
+									{{ column.label }}
+									<search
+										#thead-title
+										class="pkpStats__titleSearch"
+										:search-phrase="searchPhrase"
+										search-label="{translate key="stats.searchSubmissionDescription"}"
+										@search-phrase-changed="setSearchPhrase"
+									></search>
+								</template>
+								<template v-else>
+									{{ column.label }}
+								</template>
+							</table-column>
+						</table-header>
+						<table-body>
+							<table-row v-for="(row) in items" :key="row.key">
+								<table-cell>
 									<a
 										:href="row.publication.urlPublished"
 										class="pkpStats__itemLink"
@@ -216,19 +218,24 @@
 										<span class="pkpStats__itemAuthors">{{ row.publication.authorsStringShort }}</span>
 										<span class="pkpStats__itemTitle">{{ localize(row.publication.fullTitle) }}</span>
 									</a>
+								</table-cell>
+								<table-cell>{{ row.abstractViews }}</table-cell>
+								<table-cell>{{ row.galleyViews }}</table-cell>
+								<table-cell>{{ row.pdfViews }}</table-cell>
+								<table-cell>{{ row.htmlViews }}</table-cell>
+								<table-cell>{{ row.otherViews }}</table-cell>
+								<table-cell>{{ row.total }}</table-cell>
+							</table-row>
+							<template #no-content v-if="!items.length">
+								<template v-if="isLoadingItems">
+									{translate key="common.loading"}
 								</template>
-							</table-cell>
-						</template>
+								<template v-else>
+									{translate key="stats.publications.none"}
+								</template>
+							</template>
+						</table-body>
 					</pkp-table>
-					<div v-if="!items.length" class="pkpStats__noRecords">
-						<template v-if="isLoadingItems">
-							<spinner></spinner>
-							{translate key="common.loading"}
-						</template>
-						<template v-else>
-							{translate key="stats.publications.none"}
-						</template>
-					</div>
 					<pagination
 						v-if="lastPage > 1"
 						id="publicationDetailTablePagination"