feat(client): add pagination to team, notifications and status page tables

client/src/Pages/Account/components/TeamTable.tsx

@@ -1,7 +1,10 @@
+import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { useState } from "react";
 import { Table } from "@/Components/design-elements";
+import { Pagination } from "@/Components/design-elements/Table";
 import type { Header } from "@/Components/design-elements/Table";
 import { useIsAdmin } from "@/Hooks/useIsAdmin";
 import type { User } from "@/Types/User";
@@ -14,6 +17,8 @@ export const TeamTable = ({ users }: TeamTableProps) => {
 	const { t } = useTranslation();
 	const navigate = useNavigate();
 	const isAdmin = useIsAdmin();
+	const [page, setPage] = useState(0);
+	const [rowsPerPage, setRowsPerPage] = useState(10);
 
 	const headers: Header<User>[] = [
 		{
@@ -50,11 +55,40 @@ export const TeamTable = ({ users }: TeamTableProps) => {
 		}
 	};
 
+	const handlePageChange = (
+		_e: React.MouseEvent<HTMLButtonElement> | null,
+		newPage: number
+	) => {
+		setPage(newPage);
+	};
+
+	const handleRowsPerPageChange = (
+		e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
+	) => {
+		setPage(0);
+		setRowsPerPage(Number(e.target.value));
+	};
+
+	const pagedUsers = users.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+
 	return (
-		<Table
-			headers={headers}
-			data={users}
-			onRowClick={isAdmin ? handleRowClick : undefined}
-		/>
+		<Box>
+			<Table
+				headers={headers}
+				data={pagedUsers}
+				onRowClick={isAdmin ? handleRowClick : undefined}
+			/>
+			{users.length > 0 && (
+				<Pagination
+					component="div"
+					count={users.length}
+					page={page}
+					rowsPerPage={rowsPerPage}
+					onPageChange={handlePageChange}
+					onRowsPerPageChange={handleRowsPerPageChange}
+					itemsOnPage={pagedUsers.length}
+				/>
+			)}
+		</Box>
 	);
 };

client/src/Pages/Notifications/components/NotificationsTable.tsx

@@ -1,8 +1,11 @@
 import { ActionsMenu, type ActionMenuItem } from "@/Components/actions-menu";
+import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import type { Header } from "@/Components/design-elements/Table";
 import { Table } from "@/Components/design-elements";
+import { Pagination } from "@/Components/design-elements/Table";
 
+import { useState } from "react";
 import type { Notification } from "@/Types/Notification";
 import { useNavigate } from "react-router";
 import { useTranslation } from "react-i18next";
@@ -20,6 +23,8 @@ export const NotificationsTable = ({
 	const navigate = useNavigate();
 	const { t } = useTranslation();
 	const theme = useTheme();
+	const [page, setPage] = useState(0);
+	const [rowsPerPage, setRowsPerPage] = useState(10);
 
 	const getActions = (channel: Notification): ActionMenuItem[] => {
 		return [
@@ -84,13 +89,45 @@ export const NotificationsTable = ({
 
 	const headers = getHeaders();
 
+	const handlePageChange = (
+		_e: React.MouseEvent<HTMLButtonElement> | null,
+		newPage: number
+	) => {
+		setPage(newPage);
+	};
+
+	const handleRowsPerPageChange = (
+		e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
+	) => {
+		setPage(0);
+		setRowsPerPage(Number(e.target.value));
+	};
+
+	const pagedNotifications = notifications.slice(
+		page * rowsPerPage,
+		page * rowsPerPage + rowsPerPage
+	);
+
 	return (
-		<Table
-			headers={headers}
-			data={notifications}
-			onRowClick={(row) => {
-				navigate(`/notifications/configure/${row.id}`);
-			}}
-		/>
+		<Box>
+			<Table
+				headers={headers}
+				data={pagedNotifications}
+				onRowClick={(row) => {
+					navigate(`/notifications/configure/${row.id}`);
+				}}
+			/>
+			{notifications.length > 0 && (
+				<Pagination
+					component="div"
+					count={notifications.length}
+					page={page}
+					rowsPerPage={rowsPerPage}
+					onPageChange={handlePageChange}
+					onRowsPerPageChange={handleRowsPerPageChange}
+					itemsOnPage={pagedNotifications.length}
+				/>
+			)}
+		</Box>
 	);
 };

client/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable.tsx

@@ -2,9 +2,11 @@ import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { Table, type Header, ValueLabel } from "@/Components/design-elements";
+import { Pagination } from "@/Components/design-elements/Table";
 import { ActionsMenu, type ActionMenuItem } from "@/Components/actions-menu";
 import { ExternalLink } from "lucide-react";
 
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
@@ -23,6 +25,8 @@ export const StatusPagesTable = ({
 	const { t } = useTranslation();
 	const theme = useTheme();
 	const navigate = useNavigate();
+	const [page, setPage] = useState(0);
+	const [rowsPerPage, setRowsPerPage] = useState(10);
 
 	const getActions = (row: StatusPage): ActionMenuItem[] => {
 		return [
@@ -129,14 +133,41 @@ export const StatusPagesTable = ({
 		navigate(`/status/${statusPage.url}`);
 	};
 
+	const handlePageChange = (
+		_e: React.MouseEvent<HTMLButtonElement> | null,
+		newPage: number
+	) => {
+		setPage(newPage);
+	};
+
+	const handleRowsPerPageChange = (
+		e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
+	) => {
+		setPage(0);
+		setRowsPerPage(Number(e.target.value));
+	};
+
+	const pagedData = data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+
 	return (
 		<Box>
 			<Table
 				headers={getHeaders()}
-				data={data}
+				data={pagedData}
 				onRowClick={handleRowClick}
 				emptyViewText={t("common.table.empty")}
 			/>
+			{data.length > 0 && (
+				<Pagination
+					component="div"
+					count={data.length}
+					page={page}
+					rowsPerPage={rowsPerPage}
+					onPageChange={handlePageChange}
+					onRowsPerPageChange={handleRowsPerPageChange}
+					itemsOnPage={pagedData.length}
+				/>
+			)}
 		</Box>
 	);
 };