[DataTable] Added ability to control location of Totals row

UNRELEASED.md

@@ -10,6 +10,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Enhancements
 
+- Added showTotalsFooter prop to `DataTable` for control over placement of Totals row ([#2200](https://github.com/Shopify/polaris-react/pull/2200))
+- Removed the need for z-indexes in `Icon` ([#2207](https://github.com/Shopify/polaris-react/pull/2207))
 - Added `hasFocusableParent` to `Spinner` ([#2176](https://github.com/Shopify/polaris-react/pull/2176))
 
 ### Bug fixes

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');

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 */
+  showTotalsInFooter?: boolean;
   /** Lists of data points which map to table body rows. */
   rows: TableData[][];
   /** Truncate content in first column instead of wrapping.
@@ -120,7 +122,13 @@ class DataTable extends React.PureComponent<CombinedProps, DataTableState> {
   }
 
   render() {
-    const {headings, totals, rows, footerContent} = this.props;
+    const {
+      headings,
+      totals,
+      showTotalsInFooter,
+      rows,
+      footerContent,
+    } = this.props;
     const {
       condensed,
       columnVisibilityData,
@@ -150,6 +158,11 @@ class DataTable extends React.PureComponent<CombinedProps, DataTableState> {
       <div className={styles.Footer}>{footerContent}</div>
     ) : null;
 
+    const headerTotalsMarkup = !showTotalsInFooter ? totalsMarkup : null;
+    const footerTotalsMarkup = showTotalsInFooter ? (
+      <tfoot>{totalsMarkup}</tfoot>
+    ) : null;
+
     return (
       <div className={wrapperClassName}>
         <Navigation
@@ -170,9 +183,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}
@@ -320,9 +334,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}

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.

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'],

src/components/DataTable/tests/DataTable.test.tsx

@@ -155,6 +155,15 @@ describe('<DataTable />', () => {
 
       totalsCells.forEach((total) => expect(total.text()).toBe(''));
     });
+
+    it('renders totals in the footer with a showTotalsInFooter prop', () => {
+      const totals = ['', '', ''];
+      const dataTable = mountWithAppProvider(
+        <DataTable {...defaultProps} totals={totals} showTotalsInFooter />,
+      );
+
+      expect(dataTable.find('tfoot')).toHaveLength(1);
+    });
   });
 
   describe('rows', () => {