From f5c2942b0894498c983a10166d6e228d8da279b9 Mon Sep 17 00:00:00 2001
From: Mitchell Soares <mitchell.soares@shopify.com>
Date: Mon, 16 Sep 2019 16:23:36 -0400
Subject: [PATCH 01/16] Adjustments [DEV]

---
 src/components/DataTable/DataTable.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
index 262de72cb64..f962e6ad8cc 100644
--- a/src/components/DataTable/DataTable.tsx
+++ b/src/components/DataTable/DataTable.tsx
@@ -32,6 +32,8 @@ export interface DataTableProps {
   headings: string[];
   /** List of numeric column totals, highlighted in the table’s header below column headings. Use empty strings as placeholders for columns with no total. */
   totals?: TableData[];
+  /** Placement of totals row within table, true for t */
+  footerTotals?: boolean;
   /** Lists of data points which map to table body rows. */
   rows: TableData[][];
   /** Truncate content in first column instead of wrapping.
@@ -116,7 +118,7 @@ class DataTable extends React.PureComponent<CombinedProps, DataTableState> {
   }
 
   render() {
-    const {headings, totals, rows, footerContent} = this.props;
+    const {headings, totals, footerTotals, rows, footerContent} = this.props;
     const {
       condensed,
       columnVisibilityData,
@@ -134,18 +136,29 @@ class DataTable extends React.PureComponent<CombinedProps, DataTableState> {
       condensed && styles.condensed,
     );
 
-    const headingMarkup = <tr>{headings.map(this.renderHeadings)}</tr>;
-
     const totalsMarkup = totals ? (
       <tr>{totals.map(this.renderTotals)}</tr>
     ) : null;
 
+    const headingMarkup = <tr>{headings.map(this.renderHeadings)}</tr>;
+
     const bodyMarkup = rows.map(this.defaultRenderRow);
 
     const footerMarkup = footerContent ? (
       <div className={styles.Footer}>{footerContent}</div>
     ) : null;
 
+    // if (footerContent) {
+    //   const footerMarkup = footerTotals ? (
+
+    //   ) : (
+    //     <div className={styles.footer}
+    //     //<div className={styles.Footer}>{footerContent}</div>
+    //   )
+    // }
+
+    // if (footer)
+
     return (
       <div className={wrapperClassName}>
         <Navigation

From 9fe16269817138e97dfd3ff950a6a129bdf39a90 Mon Sep 17 00:00:00 2001
From: Mitchell Soares <mitchell.soares@shopify.com>
Date: Mon, 23 Sep 2019 13:37:30 -0400
Subject: [PATCH 02/16] Introduced new logic for creating the footer markup

---
 src/components/DataTable/DataTable.tsx | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
index f962e6ad8cc..329a80d42e0 100644
--- a/src/components/DataTable/DataTable.tsx
+++ b/src/components/DataTable/DataTable.tsx
@@ -144,20 +144,18 @@ class DataTable extends React.PureComponent<CombinedProps, DataTableState> {
 
     const bodyMarkup = rows.map(this.defaultRenderRow);
 
-    const footerMarkup = footerContent ? (
-      <div className={styles.Footer}>{footerContent}</div>
-    ) : null;
-
-    // if (footerContent) {
-    //   const footerMarkup = footerTotals ? (
-
-    //   ) : (
-    //     <div className={styles.footer}
-    //     //<div className={styles.Footer}>{footerContent}</div>
-    //   )
-    // }
+    let footerMarkup;
 
-    // if (footer)
+    if (footerContent) {
+      footerMarkup = footerTotals ? (
+        <div className={styles.Footer}>
+          {footerContent}
+          {totalsMarkup}
+        </div>
+      ) : (
+        <div className={styles.Footer}>{footerContent}</div>
+      );
+    }
 
     return (
       <div className={wrapperClassName}>

From 316a20e64bd70ab3541db4d21ab7d01f678afd95 Mon Sep 17 00:00:00 2001
From: Mitchell Soares <mitchell.soares@shopify.com>
Date: Mon, 23 Sep 2019 13:51:38 -0400
Subject: [PATCH 03/16] Refactored the rendering logic for header vs footer
 totals

---
 src/components/DataTable/DataTable.tsx | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
index 329a80d42e0..7d925f15875 100644
--- a/src/components/DataTable/DataTable.tsx
+++ b/src/components/DataTable/DataTable.tsx
@@ -144,18 +144,12 @@ class DataTable extends React.PureComponent<CombinedProps, DataTableState> {
 
     const bodyMarkup = rows.map(this.defaultRenderRow);
 
-    let footerMarkup;
+    const footerMarkup = footerContent ? (
+      <div className={styles.Footer}>{footerContent}</div>
+    ) : null;
 
-    if (footerContent) {
-      footerMarkup = footerTotals ? (
-        <div className={styles.Footer}>
-          {footerContent}
-          {totalsMarkup}
-        </div>
-      ) : (
-        <div className={styles.Footer}>{footerContent}</div>
-      );
-    }
+    const headerTotalsMarkup = !footerTotals ? totalsMarkup : null;
+    const footerTotalsMarkup = footerTotals ? totalsMarkup : null;
 
     return (
       <div className={wrapperClassName}>
@@ -177,9 +171,10 @@ class DataTable extends React.PureComponent<CombinedProps, DataTableState> {
             <table className={styles.Table} ref={this.table}>
               <thead>
                 {headingMarkup}
-                {totalsMarkup}
+                {headerTotalsMarkup}
               </thead>
               <tbody>{bodyMarkup}</tbody>
+              {footerTotalsMarkup}
             </table>
           </div>
           {footerMarkup}

From 552da75f1e01964ed62a1627458d3a3a6432ca77 Mon Sep 17 00:00:00 2001
From: Mitchell Soares <mitchell.soares@shopify.com>
Date: Wed, 25 Sep 2019 09:52:08 -0400
Subject: [PATCH 04/16] Edited placement

---
 src/components/DataTable/DataTable.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
index 7d925f15875..862a1d78cdf 100644
--- a/src/components/DataTable/DataTable.tsx
+++ b/src/components/DataTable/DataTable.tsx
@@ -136,12 +136,12 @@ class DataTable extends React.PureComponent<CombinedProps, DataTableState> {
       condensed && styles.condensed,
     );
 
+    const headingMarkup = <tr>{headings.map(this.renderHeadings)}</tr>;
+
     const totalsMarkup = totals ? (
       <tr>{totals.map(this.renderTotals)}</tr>
     ) : null;
 
-    const headingMarkup = <tr>{headings.map(this.renderHeadings)}</tr>;
-
     const bodyMarkup = rows.map(this.defaultRenderRow);
 
     const footerMarkup = footerContent ? (

From 301d747a3a04f82aa72381c94e72ecff2dd7bec5 Mon Sep 17 00:00:00 2001
From: Mitchell Soares <mitchell.soares@shopify.com>
Date: Wed, 25 Sep 2019 09:54:49 -0400
Subject: [PATCH 05/16] Addded entry to unreleased

---
 UNRELEASED.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 156d511175c..f56516bc379 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -11,6 +11,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 ### Enhancements
 
 - Added skipToContentTarget prop to Frame component ([#2080](https://github.com/Shopify/polaris-react/pull/2080))
+- Added footerTotals prop to `DataTable` for control over placement of Totals row ([#2200](https://github.com/Shopify/polaris-react/pull/2200))
 
 ### Bug fixes
 

From b02cb70718d9426e0aea821c46c400a2afe2c1d0 Mon Sep 17 00:00:00 2001
From: mitchmaps <42747959+mitchmaps@users.noreply.github.com>
Date: Wed, 25 Sep 2019 10:16:12 -0400
Subject: [PATCH 06/16] Update UNRELEASED.md

Co-Authored-By: Dan Rosenthal <dan.rosenthal@shopify.com>
---
 UNRELEASED.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 28aa8322fd3..a6713016ed3 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -10,7 +10,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Enhancements
 
-- Added skipToContentTarget prop to Frame component ([#2080](https://github.com/Shopify/polaris-react/pull/2080))
 - Added footerTotals prop to `DataTable` for control over placement of Totals row ([#2200](https://github.com/Shopify/polaris-react/pull/2200))
 
 ### Bug fixes

From 0a0f43c45fb49cd1a157fafed74a19af7c8a03be Mon Sep 17 00:00:00 2001
From: Mitchell Soares <mitchell.soares@shopify.com>
Date: Wed, 25 Sep 2019 10:27:08 -0400
Subject: [PATCH 07/16] Renamed prop

---
 src/components/DataTable/DataTable.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
index 862a1d78cdf..52538a1c4ab 100644
--- a/src/components/DataTable/DataTable.tsx
+++ b/src/components/DataTable/DataTable.tsx
@@ -33,7 +33,7 @@ export interface DataTableProps {
   /** List of numeric column totals, highlighted in the table’s header below column headings. Use empty strings as placeholders for columns with no total. */
   totals?: TableData[];
   /** Placement of totals row within table, true for t */
-  footerTotals?: boolean;
+  showTotalsFooter?: boolean;
   /** Lists of data points which map to table body rows. */
   rows: TableData[][];
   /** Truncate content in first column instead of wrapping.
@@ -118,7 +118,7 @@ class DataTable extends React.PureComponent<CombinedProps, DataTableState> {
   }
 
   render() {
-    const {headings, totals, footerTotals, rows, footerContent} = this.props;
+    const {headings, totals, showTotalsFooter, rows, footerContent} = this.props;
     const {
       condensed,
       columnVisibilityData,
@@ -148,8 +148,8 @@ class DataTable extends React.PureComponent<CombinedProps, DataTableState> {
       <div className={styles.Footer}>{footerContent}</div>
     ) : null;
 
-    const headerTotalsMarkup = !footerTotals ? totalsMarkup : null;
-    const footerTotalsMarkup = footerTotals ? totalsMarkup : null;
+    const headerTotalsMarkup = !showTotalsFooter ? totalsMarkup : null;
+    const footerTotalsMarkup = showTotalsFooter ? totalsMarkup : null;
 
     return (
       <div className={wrapperClassName}>

From e980d787a0c99733c5a0d71352750ccc03a1edb7 Mon Sep 17 00:00:00 2001
From: Mitchell Soares <mitchell.soares@shopify.com>
Date: Fri, 27 Sep 2019 11:11:18 -0400
Subject: [PATCH 08/16] Changed prop name to be more action oriented

---
 src/components/DataTable/DataTable.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
index 52538a1c4ab..1ae6c83c771 100644
--- a/src/components/DataTable/DataTable.tsx
+++ b/src/components/DataTable/DataTable.tsx
@@ -118,7 +118,13 @@ class DataTable extends React.PureComponent<CombinedProps, DataTableState> {
   }
 
   render() {
-    const {headings, totals, showTotalsFooter, rows, footerContent} = this.props;
+    const {
+      headings,
+      totals,
+      showTotalsFooter,
+      rows,
+      footerContent,
+    } = this.props;
     const {
       condensed,
       columnVisibilityData,

From 84237d70ec77dc4b4100d9df3f9aa4964c5d9946 Mon Sep 17 00:00:00 2001
From: Mitchell Soares <mitchell.soares@shopify.com>
Date: Fri, 27 Sep 2019 11:23:53 -0400
Subject: [PATCH 09/16] Updated unreleased

---
 UNRELEASED.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index a6713016ed3..d820eec45e7 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -10,7 +10,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Enhancements
 
-- Added footerTotals prop to `DataTable` for control over placement of Totals row ([#2200](https://github.com/Shopify/polaris-react/pull/2200))
+- Added showTotalsFooter prop to `DataTable` for control over placement of Totals row ([#2200](https://github.com/Shopify/polaris-react/pull/2200))
 
 ### Bug fixes
 

From 362277d1e98a014d20d8784d9bad587239a37073 Mon Sep 17 00:00:00 2001
From: Mitchell Soares <mitchell.soares@shopify.com>
Date: Fri, 27 Sep 2019 13:15:51 -0400
Subject: [PATCH 10/16] added test for getting codecov >90%

---
 src/components/DataTable/tests/DataTable.test.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/DataTable/tests/DataTable.test.tsx b/src/components/DataTable/tests/DataTable.test.tsx
index f405a5a5f42..f9062214b01 100644
--- a/src/components/DataTable/tests/DataTable.test.tsx
+++ b/src/components/DataTable/tests/DataTable.test.tsx
@@ -155,6 +155,15 @@ describe('<DataTable />', () => {
 
       totalsCells.forEach((total) => expect(total.text()).toBe(''));
     });
+
+    it('does not render totals in header', () => {
+      const totals = ['', '', ''];
+      const dataTable = mountWithAppProvider(
+        <DataTable {...defaultProps} totals={totals} showTotalsFooter />,
+      );
+
+      expect(dataTable.find('thead tr')).toHaveLength(1);
+    });
   });
 
   describe('rows', () => {

From 6c03919b6c8cf23e85cec731bfb426c2c41ca6ce Mon Sep 17 00:00:00 2001
From: Mitchell Soares <mitchell.soares@shopify.com>
Date: Fri, 27 Sep 2019 15:41:06 -0400
Subject: [PATCH 11/16] Renamed test for the new prop

---
 src/components/DataTable/tests/DataTable.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DataTable/tests/DataTable.test.tsx b/src/components/DataTable/tests/DataTable.test.tsx
index f9062214b01..9a3c3c2b729 100644
--- a/src/components/DataTable/tests/DataTable.test.tsx
+++ b/src/components/DataTable/tests/DataTable.test.tsx
@@ -156,7 +156,7 @@ describe('<DataTable />', () => {
       totalsCells.forEach((total) => expect(total.text()).toBe(''));
     });
 
-    it('does not render totals in header', () => {
+    it('renders totals in the footer with a showTotalsFooter prop', () => {
       const totals = ['', '', ''];
       const dataTable = mountWithAppProvider(
         <DataTable {...defaultProps} totals={totals} showTotalsFooter />,

From c8a05f9986fbef8c0050037ae1737abb331fb6ec Mon Sep 17 00:00:00 2001
From: Mitchell Soares <mitchell.soares@shopify.com>
Date: Fri, 27 Sep 2019 15:54:55 -0400
Subject: [PATCH 12/16] renamed prop to the final showTotalsInFooter

---
 src/components/DataTable/DataTable.tsx            | 8 ++++----
 src/components/DataTable/tests/DataTable.test.tsx | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
index 1ae6c83c771..5eadad7411d 100644
--- a/src/components/DataTable/DataTable.tsx
+++ b/src/components/DataTable/DataTable.tsx
@@ -33,7 +33,7 @@ export interface DataTableProps {
   /** List of numeric column totals, highlighted in the table’s header below column headings. Use empty strings as placeholders for columns with no total. */
   totals?: TableData[];
   /** Placement of totals row within table, true for t */
-  showTotalsFooter?: boolean;
+  showTotalsInFooter?: boolean;
   /** Lists of data points which map to table body rows. */
   rows: TableData[][];
   /** Truncate content in first column instead of wrapping.
@@ -121,7 +121,7 @@ class DataTable extends React.PureComponent<CombinedProps, DataTableState> {
     const {
       headings,
       totals,
-      showTotalsFooter,
+      showTotalsInFooter,
       rows,
       footerContent,
     } = this.props;
@@ -154,8 +154,8 @@ class DataTable extends React.PureComponent<CombinedProps, DataTableState> {
       <div className={styles.Footer}>{footerContent}</div>
     ) : null;
 
-    const headerTotalsMarkup = !showTotalsFooter ? totalsMarkup : null;
-    const footerTotalsMarkup = showTotalsFooter ? totalsMarkup : null;
+    const headerTotalsMarkup = !showTotalsInFooter ? totalsMarkup : null;
+    const footerTotalsMarkup = showTotalsInFooter ? totalsMarkup : null;
 
     return (
       <div className={wrapperClassName}>
diff --git a/src/components/DataTable/tests/DataTable.test.tsx b/src/components/DataTable/tests/DataTable.test.tsx
index 9a3c3c2b729..4061a4486f8 100644
--- a/src/components/DataTable/tests/DataTable.test.tsx
+++ b/src/components/DataTable/tests/DataTable.test.tsx
@@ -156,10 +156,10 @@ describe('<DataTable />', () => {
       totalsCells.forEach((total) => expect(total.text()).toBe(''));
     });
 
-    it('renders totals in the footer with a showTotalsFooter prop', () => {
+    it('renders totals in the footer with a showTotalsInFooter prop', () => {
       const totals = ['', '', ''];
       const dataTable = mountWithAppProvider(
-        <DataTable {...defaultProps} totals={totals} showTotalsFooter />,
+        <DataTable {...defaultProps} totals={totals} showTotalsInFooter />,
       );
 
       expect(dataTable.find('thead tr')).toHaveLength(1);

From 95b901feecb8645a47d5d6ba1066f8a961c6e3a9 Mon Sep 17 00:00:00 2001
From: Mitchell Soares <mitchell.soares@shopify.com>
Date: Mon, 30 Sep 2019 09:41:37 -0400
Subject: [PATCH 13/16] Edited the markup to use a <tfoot> for the footer
 totals

---
 src/components/DataTable/DataTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
index 5eadad7411d..614afd785dd 100644
--- a/src/components/DataTable/DataTable.tsx
+++ b/src/components/DataTable/DataTable.tsx
@@ -180,7 +180,7 @@ class DataTable extends React.PureComponent<CombinedProps, DataTableState> {
                 {headerTotalsMarkup}
               </thead>
               <tbody>{bodyMarkup}</tbody>
-              {footerTotalsMarkup}
+              <tfoot>{footerTotalsMarkup}</tfoot>
             </table>
           </div>
           {footerMarkup}

From e774654d02fb3526da65a5f665278c73674fb096 Mon Sep 17 00:00:00 2001
From: Mitchell Soares <mitchell.soares@shopify.com>
Date: Mon, 30 Sep 2019 10:10:48 -0400
Subject: [PATCH 14/16] Edited rendering logic for footer totals

---
 src/components/DataTable/DataTable.tsx            | 6 ++++--
 src/components/DataTable/tests/DataTable.test.tsx | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
index 614afd785dd..429a0173c30 100644
--- a/src/components/DataTable/DataTable.tsx
+++ b/src/components/DataTable/DataTable.tsx
@@ -155,7 +155,9 @@ class DataTable extends React.PureComponent<CombinedProps, DataTableState> {
     ) : null;
 
     const headerTotalsMarkup = !showTotalsInFooter ? totalsMarkup : null;
-    const footerTotalsMarkup = showTotalsInFooter ? totalsMarkup : null;
+    const footerTotalsMarkup = showTotalsInFooter ? (
+      <tfoot>{totalsMarkup}</tfoot>
+    ) : null;
 
     return (
       <div className={wrapperClassName}>
@@ -180,7 +182,7 @@ class DataTable extends React.PureComponent<CombinedProps, DataTableState> {
                 {headerTotalsMarkup}
               </thead>
               <tbody>{bodyMarkup}</tbody>
-              <tfoot>{footerTotalsMarkup}</tfoot>
+              {footerTotalsMarkup}
             </table>
           </div>
           {footerMarkup}
diff --git a/src/components/DataTable/tests/DataTable.test.tsx b/src/components/DataTable/tests/DataTable.test.tsx
index 4061a4486f8..90683a67393 100644
--- a/src/components/DataTable/tests/DataTable.test.tsx
+++ b/src/components/DataTable/tests/DataTable.test.tsx
@@ -162,7 +162,7 @@ describe('<DataTable />', () => {
         <DataTable {...defaultProps} totals={totals} showTotalsInFooter />,
       );
 
-      expect(dataTable.find('thead tr')).toHaveLength(1);
+      expect(dataTable.find('tfoot')).toHaveLength(1);
     });
   });
 

From 71c9e536e2bfe9c12d23273b97173f3d514b981a Mon Sep 17 00:00:00 2001
From: Mitchell Soares <mitchell.soares@shopify.com>
Date: Mon, 30 Sep 2019 10:50:07 -0400
Subject: [PATCH 15/16] Added example for the new totals prop in the readme

---
 src/components/DataTable/README.md | 47 ++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/src/components/DataTable/README.md b/src/components/DataTable/README.md
index 7bce44123d2..fc32ef433b7 100644
--- a/src/components/DataTable/README.md
+++ b/src/components/DataTable/README.md
@@ -174,6 +174,53 @@ function DataTableFooterExample() {
 }
 ```
 
+### Data table with totals in footer
+
+Use to reposition the totals row in a more appropriate location based on the data stored in the
+table for merchants to better understand its meaning.
+
+```jsx
+function DataTableExample() {
+  const rows = [
+    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
+    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
+    [
+      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
+      '$445.00',
+      124518,
+      32,
+      '$14,240.00',
+    ],
+  ];
+
+  return (
+    <Page title="Sales by product">
+      <Card>
+        <DataTable
+          columnContentTypes={[
+            'text',
+            'numeric',
+            'numeric',
+            'numeric',
+            'numeric',
+          ]}
+          headings={[
+            'Product',
+            'Price',
+            'SKU Number',
+            'Net quantity',
+            'Net sales',
+          ]}
+          rows={rows}
+          totals={['', '', '', 255, '$155,830.00']}
+          showTotalsInFooter
+        />
+      </Card>
+    </Page>
+  );
+}
+```
+
 ### Data table with row heading links
 
 Use to help merchants find relevant, finer grained data sets.

From 4ad1e2af6fe6190ddfb31f2a870661fc84011b85 Mon Sep 17 00:00:00 2001
From: Mitchell Soares <mitchell.soares@shopify.com>
Date: Mon, 7 Oct 2019 11:33:26 -0400
Subject: [PATCH 16/16] Added correct top border for a totals row in the footer

---
 src/components/DataTable/DataTable.scss           | 5 +++++
 src/components/DataTable/DataTable.tsx            | 3 +++
 src/components/DataTable/components/Cell/Cell.tsx | 3 +++
 3 files changed, 11 insertions(+)

diff --git a/src/components/DataTable/DataTable.scss b/src/components/DataTable/DataTable.scss
index b83a3cf95f9..c14464b5599 100644
--- a/src/components/DataTable/DataTable.scss
+++ b/src/components/DataTable/DataTable.scss
@@ -155,6 +155,11 @@ $breakpoint: 768px;
   border-bottom: border();
 }
 
+.Cell-total-footer {
+  border-top: border();
+  border-bottom: none;
+}
+
 .Footer {
   padding: spacing();
   background: color('sky', 'light');
diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
index 429a0173c30..908850a0ef7 100644
--- a/src/components/DataTable/DataTable.tsx
+++ b/src/components/DataTable/DataTable.tsx
@@ -330,9 +330,12 @@ class DataTable extends React.PureComponent<CombinedProps, DataTableState> {
       content = total;
     }
 
+    const totalInFooter = this.props.showTotalsInFooter;
+
     return (
       <Cell
         total
+        totalInFooter={totalInFooter}
         firstColumn={index === 0}
         key={id}
         content={content}
diff --git a/src/components/DataTable/components/Cell/Cell.tsx b/src/components/DataTable/components/Cell/Cell.tsx
index b8ad7df8250..be2a25e4153 100644
--- a/src/components/DataTable/components/Cell/Cell.tsx
+++ b/src/components/DataTable/components/Cell/Cell.tsx
@@ -16,6 +16,7 @@ export interface CellProps {
   truncate?: boolean;
   header?: boolean;
   total?: boolean;
+  totalInFooter?: boolean;
   sorted?: boolean;
   sortable?: boolean;
   sortDirection?: SortDirection;
@@ -31,6 +32,7 @@ export function Cell({
   truncate,
   header,
   total,
+  totalInFooter,
   sorted,
   sortable,
   sortDirection,
@@ -47,6 +49,7 @@ export function Cell({
     firstColumn && truncate && styles['Cell-truncated'],
     header && styles['Cell-header'],
     total && styles['Cell-total'],
+    totalInFooter && styles['Cell-total-footer'],
     numeric && styles['Cell-numeric'],
     sortable && styles['Cell-sortable'],
     sorted && styles['Cell-sorted'],