From 7f83b303260284fded8b3682d49535be9df887a3 Mon Sep 17 00:00:00 2001
From: Abdullah Waheed <abdullah.waheed@arbisoft.com>
Date: Thu, 16 Jun 2022 15:49:07 +0500
Subject: [PATCH 1/2] refactor: changed derecated table component to datatable

---
 src/order-history/OrderHistoryPage.jsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/order-history/OrderHistoryPage.jsx b/src/order-history/OrderHistoryPage.jsx
index 0415e781..a4af8776 100644
--- a/src/order-history/OrderHistoryPage.jsx
+++ b/src/order-history/OrderHistoryPage.jsx
@@ -10,7 +10,7 @@ import {
   FormattedDate,
   FormattedNumber,
 } from '@edx/frontend-platform/i18n';
-import { Table, Hyperlink, Pagination } from '@edx/paragon';
+import { DataTable, Hyperlink, Pagination } from '@edx/paragon';
 import MediaQuery from 'react-responsive';
 
 import messages from './OrderHistoryPage.messages';
@@ -91,29 +91,29 @@ class OrderHistoryPage extends React.Component {
 
   renderOrdersTable() {
     return (
-      <Table
+      <DataTable
         className="order-history table-bordered"
         data={this.getTableData()}
         columns={[
           {
-            label: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.items']),
-            key: 'description',
+            Header: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.items']),
+            accessor: 'description',
           },
           {
-            label: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.date.placed']),
-            key: 'datePlaced',
+            Header: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.date.placed']),
+            accessor: 'datePlaced',
           },
           {
-            label: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.total.cost']),
-            key: 'total',
+            Header: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.total.cost']),
+            accessor: 'total',
           },
           {
-            label: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.order.number']),
-            key: 'orderId',
+            Header: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.order.number']),
+            accessor: 'orderId',
           },
           {
-            label: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.order.details']),
-            key: 'receiptUrl',
+            Header: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.order.details']),
+            accessor: 'receiptUrl',
           },
         ]}
       />

From 78479ff1a231150bed5332f6f67afad83a3f0e10 Mon Sep 17 00:00:00 2001
From: Abdullah Waheed <abdullah.waheed@arbisoft.com>
Date: Thu, 16 Jun 2022 15:55:34 +0500
Subject: [PATCH 2/2] refactor: fixed warning of missing props

---
 src/order-history/OrderHistoryPage.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/order-history/OrderHistoryPage.jsx b/src/order-history/OrderHistoryPage.jsx
index a4af8776..3058bff3 100644
--- a/src/order-history/OrderHistoryPage.jsx
+++ b/src/order-history/OrderHistoryPage.jsx
@@ -94,6 +94,7 @@ class OrderHistoryPage extends React.Component {
       <DataTable
         className="order-history table-bordered"
         data={this.getTableData()}
+        itemCount={this.props.orders.length}
         columns={[
           {
             Header: this.props.intl.formatMessage(messages['ecommerce.order.history.table.column.items']),