From f7bd03d8b8ae3457115a086495a7b95d2cb05ade Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Thu, 3 Oct 2024 13:17:23 +0530
Subject: [PATCH] Use createDisplayPage to paginate ordered data list

---
 .../BillingActivityPanel/BillingActivityPanel.tsx        | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

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<ActivityFeedItem>(
+      pagination.page,
+      pagination.pageSize
+    );
 
-    return orderedData.slice(start, end);
+    return displayPage(orderedData);
   }, [data, orderBy, order, pagination.page, pagination.pageSize]);
 
   const renderTableContent = () => {