Paragon table deprecation migration to DataTable

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';
@@ -70,6 +70,7 @@ class OrderHistoryPage extends React.Component {
     return (
       <Pagination
         paginationLabel="pagination navigation"
+        className="pagination-margin"
         pageCount={pageCount}
         currentPage={currentPage}
         onPageSelect={this.handlePageSelect}
@@ -91,32 +92,34 @@ class OrderHistoryPage extends React.Component {
 
   renderOrdersTable() {
     return (
-      <Table
-        className="order-history table-bordered"
+      <DataTable
         data={this.getTableData()}
+        itemCount={this.props.count}
         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',
           },
         ]}
-      />
+      >
+        <DataTable.Table />
+      </DataTable>
     );
   }
 
@@ -222,6 +225,7 @@ OrderHistoryPage.propTypes = {
     })),
   })),
   pageCount: PropTypes.number,
+  count: PropTypes.number,
   currentPage: PropTypes.number,
   loading: PropTypes.bool,
   loadingError: PropTypes.string,
@@ -233,6 +237,7 @@ OrderHistoryPage.defaultProps = {
   loadingError: null,
   loading: false,
   pageCount: 0,
+  count: 0,
   currentPage: null,
 };
 

src/order-history/__snapshots__/OrderHistoryPage.test.jsx.snap

@@ -9,7 +9,7 @@ exports[`<OrderHistoryPage /> Renders correctly in various states renders orders
   </h1>
   <nav
     aria-label="pagination navigation"
-    className="pagination-default"
+    className="pagination-margin pagination-default"
   >
     <div
       aria-atomic={true}

src/order-history/_style.scss

@@ -1,5 +1,5 @@
 .page__order-history {
-  table.order-history {
+  table {
     thead th,
     tbody td {
       width: 4em;
@@ -11,3 +11,6 @@
     }
   }
 }
+.pagination-margin {
+  margin-top: 1rem;
+}