[DataTable] Add prop to disable scroll indicator

UNRELEASED.md

@@ -7,6 +7,7 @@
 - Added a split variant to `Button` ([#2329](https://github.com/Shopify/polaris-react/pull/2329))
 - Allow DataTable headers to be React Elements ([#2635](https://github.com/Shopify/polaris-react/pull/2635))
 - Added support for explicit order of items in `ActionMenu` ([2057](https://github.com/Shopify/polaris-react/pull/2057))
+- Made the `DataTable` horizontal `Navigation` optional ([#2647](https://github.com/Shopify/polaris-react/pull/2647))
 
 ### Bug fixes
 

src/components/DataTable/DataTable.tsx

@@ -36,9 +36,13 @@ export interface DataTableProps {
   showTotalsInFooter?: boolean;
   /** Lists of data points which map to table body rows. */
   rows: TableData[][];
-  /** Truncate content in first column instead of wrapping.
+  /** Hide column visibility and navigation buttons above the header when the table horizontally collapses to be scrollable.
    * @default false
    */
+  hideScrollIndicator?: boolean;
+  /** Truncate content in first column instead of wrapping.
+   * @default true
+   */
   truncate?: boolean;
   /** Vertical alignment of content in the cells.
    * @default 'top'
@@ -131,6 +135,7 @@ class DataTableInner extends React.PureComponent<
       showTotalsInFooter,
       rows,
       footerContent,
+      hideScrollIndicator = false,
     } = this.props;
     const {
       condensed,
@@ -166,15 +171,19 @@ class DataTableInner extends React.PureComponent<
       <tfoot>{totalsMarkup}</tfoot>
     ) : null;
 
+    const navigationMarkup = hideScrollIndicator ? null : (
+      <Navigation
+        columnVisibilityData={columnVisibilityData}
+        isScrolledFarthestLeft={isScrolledFarthestLeft}
+        isScrolledFarthestRight={isScrolledFarthestRight}
+        navigateTableLeft={this.navigateTable('left')}
+        navigateTableRight={this.navigateTable('right')}
+      />
+    );
+
     return (
       <div className={wrapperClassName}>
-        <Navigation
-          columnVisibilityData={columnVisibilityData}
-          isScrolledFarthestLeft={isScrolledFarthestLeft}
-          isScrolledFarthestRight={isScrolledFarthestRight}
-          navigateTableLeft={this.navigateTable('left')}
-          navigateTableRight={this.navigateTable('right')}
-        />
+        {navigationMarkup}
         <div className={className} ref={this.dataTable}>
           <div className={styles.ScrollContainer} ref={this.scrollContainer}>
             <EventListener event="resize" handler={this.handleResize} />

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

@@ -2,7 +2,7 @@ import React from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
 import {Checkbox} from 'components';
-import {Cell} from '../components';
+import {Cell, Navigation} from '../components';
 import {DataTable, DataTableProps} from '../DataTable';
 
 describe('<DataTable />', () => {
@@ -223,6 +223,30 @@ describe('<DataTable />', () => {
     });
   });
 
+  describe('hideScrollIndicator', () => {
+    it('shows <Navigation /> by default', () => {
+      const dataTable = mountWithAppProvider(<DataTable {...defaultProps} />);
+
+      expect(dataTable.find(Navigation)).toHaveLength(1);
+    });
+
+    it('hide <Navigation /> when true', () => {
+      const dataTable = mountWithAppProvider(
+        <DataTable {...defaultProps} hideScrollIndicator />,
+      );
+
+      expect(dataTable.find(Navigation)).toHaveLength(0);
+    });
+
+    it('show <Navigation /> when false', () => {
+      const dataTable = mountWithAppProvider(
+        <DataTable {...defaultProps} hideScrollIndicator={false} />,
+      );
+
+      expect(dataTable.find(Navigation)).toHaveLength(1);
+    });
+  });
+
   describe('verticalAlign', () => {
     it('defaults to undefined', () => {
       const dataTable = mountWithAppProvider(<DataTable {...defaultProps} />);