diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx index d3500b5d6e0..2ded859505b 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx @@ -11,6 +11,7 @@ import { Currency } from 'src/components/Currency'; import { DateTimeDisplay } from 'src/components/DateTimeDisplay'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; import { Link } from 'src/components/Link'; +import { createDisplayPage } from 'src/components/Paginate'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; import { Table } from 'src/components/Table'; import { TableBody } from 'src/components/TableBody'; @@ -324,10 +325,12 @@ export const BillingActivityPanel = React.memo((props: Props) => { return new Date(b.date).getTime() - new Date(a.date).getTime(); }); - const start = (pagination.page - 1) * pagination.pageSize; - const end = start + pagination.pageSize; + const displayPage = createDisplayPage( + pagination.page, + pagination.pageSize + ); - return orderedData.slice(start, end); + return displayPage(orderedData); }, [data, orderBy, order, pagination.page, pagination.pageSize]); const renderTableContent = () => {