diff --git a/client/src/Pages/Account/components/TeamTable.tsx b/client/src/Pages/Account/components/TeamTable.tsx index 289bfb331..10b16515b 100644 --- a/client/src/Pages/Account/components/TeamTable.tsx +++ b/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[] = [ { @@ -50,11 +55,40 @@ export const TeamTable = ({ users }: TeamTableProps) => { } }; + const handlePageChange = ( + _e: React.MouseEvent | null, + newPage: number + ) => { + setPage(newPage); + }; + + const handleRowsPerPageChange = ( + e: React.ChangeEvent + ) => { + setPage(0); + setRowsPerPage(Number(e.target.value)); + }; + + const pagedUsers = users.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage); + return ( - + +
+ {users.length > 0 && ( + + )} + ); }; diff --git a/client/src/Pages/Notifications/components/NotificationsTable.tsx b/client/src/Pages/Notifications/components/NotificationsTable.tsx index d103458c3..4a42a597d 100644 --- a/client/src/Pages/Notifications/components/NotificationsTable.tsx +++ b/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 | null, + newPage: number + ) => { + setPage(newPage); + }; + + const handleRowsPerPageChange = ( + e: React.ChangeEvent + ) => { + setPage(0); + setRowsPerPage(Number(e.target.value)); + }; + + const pagedNotifications = notifications.slice( + page * rowsPerPage, + page * rowsPerPage + rowsPerPage + ); + return ( -
{ - navigate(`/notifications/configure/${row.id}`); - }} - /> + +
{ + navigate(`/notifications/configure/${row.id}`); + }} + /> + {notifications.length > 0 && ( + + )} + ); }; diff --git a/client/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable.tsx b/client/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable.tsx index 8f72931d6..56b1d4411 100644 --- a/client/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable.tsx +++ b/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 | null, + newPage: number + ) => { + setPage(newPage); + }; + + const handleRowsPerPageChange = ( + e: React.ChangeEvent + ) => { + setPage(0); + setRowsPerPage(Number(e.target.value)); + }; + + const pagedData = data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage); + return (
+ {data.length > 0 && ( + + )} ); };