diff --git a/chaoscenter/web/src/views/AccountSettingsUserManagement/AccountSettingsUserManagement.tsx b/chaoscenter/web/src/views/AccountSettingsUserManagement/AccountSettingsUserManagement.tsx index 371ac410961..0f2b48cbc43 100644 --- a/chaoscenter/web/src/views/AccountSettingsUserManagement/AccountSettingsUserManagement.tsx +++ b/chaoscenter/web/src/views/AccountSettingsUserManagement/AccountSettingsUserManagement.tsx @@ -6,6 +6,7 @@ import { Checkbox, Container, Layout, + Pagination, TableV2, Text, useToggleOpen @@ -190,6 +191,18 @@ export default function AccountSettingsUserManagementView( const { isOpen: isCreateUserModalOpen, open: openCreateUserModal, close: closeCreateUserModal } = useToggleOpen(); const { getString } = useStrings(); + function handleItemsPerPageChange(pageSize: number) { + setItemsPerPage(pageSize); + setCurrentPage(1); + } + + const [currentPage, setCurrentPage] = React.useState(1); + const [itemsPerPage, setItemsPerPage] = React.useState(5); + + const indexOfLastItem = currentPage * itemsPerPage; + const indexOfFirstItem = indexOfLastItem - itemsPerPage; + const currentItems = usersData?.slice(indexOfFirstItem, indexOfLastItem); + return ( - {usersData && } + {currentItems && } + setCurrentPage(pageIndex + 1)} + showPagination={true} + pageSizeOptions={[5, 10, 20]} + onPageSizeChange={pageSize => handleItemsPerPageChange(pageSize)} + />