Add enableAllColumns prop to EuiBasicTable to default sorting to on f…

…or all columns. (#2906) * Add enableSorting prop to EuiBasicTable for default sorting of table. Fixes: #1866 * fix props description typo in sorting section docs. * fix typo and update test snapshot. Co-authored-by: Caroline Horn <[email protected]>
elastic · Mar 10, 2020 · fa2ec10 · fa2ec10
1 parent edea459
commit fa2ec10
Show file tree

Hide file tree

Showing 7 changed files with 206 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 - Added `sections` and `position` props to `EuiHeader` ([#2928](https://github.com/elastic/eui/pull/2928))
 - Added `gutterSize` prop to `EuiListGroup` ([#2980](https://github.com/elastic/eui/pull/2980))
 - Added `color` prop to `EuiListGroupItem` and updated size style ([#2980](https://github.com/elastic/eui/pull/2980))
+- Added `enableAllColumns` to `EuiBasicTable` component ([#2906](https://github.com/elastic/eui/pull/2906))
 
 **Bug Fixes**
 

diff --git a/src-docs/src/views/tables/basic/props_info.js b/src-docs/src/views/tables/basic/props_info.js
@@ -171,6 +171,11 @@ export const propsInfo = {
           required: false,
           type: { name: 'bool' },
         },
+        enableAllColumns: {
+          description: 'Enables the default sorting ability for each column.',
+          required: false,
+          type: { name: 'bool' },
+        },
       },
     },
   },

diff --git a/src-docs/src/views/tables/sorting/sorting_section.js b/src-docs/src/views/tables/sorting/sorting_section.js
@@ -24,7 +24,11 @@ export const section = {
       The following example shows how to configure column sorting via the{' '}
       <EuiCode>sorting</EuiCode>
       property and flagging the sortable columns as{' '}
-      <EuiCode>sortable: true</EuiCode>
+      <EuiCode>sortable: true</EuiCode>. To enable the default sorting ability
+      for <strong>every</strong> column, pass{' '}
+      <EuiCode>enableAllColumns: true</EuiCode> to the{' '}
+      <EuiCode>sorting</EuiCode>
+      prop.
     </p>
   ),
   components: { EuiBasicTable },

diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
@@ -3590,3 +3590,134 @@ exports[`EuiBasicTable with sorting 1`] = `
   </div>
 </div>
 `;
+
+exports[`EuiBasicTable with sorting enabled and enable all columns for sorting 1`] = `
+<div
+  className="euiBasicTable"
+>
+  <div>
+    <EuiTableHeaderMobile>
+      <EuiFlexGroup
+        alignItems="baseline"
+        justifyContent="spaceBetween"
+        responsive={false}
+      >
+        <EuiFlexItem
+          grow={false}
+        />
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiTableSortMobile
+            items={
+              Array [
+                Object {
+                  "isSortAscending": true,
+                  "isSorted": true,
+                  "key": "_data_s_name_0",
+                  "name": "Name",
+                  "onSort": [Function],
+                },
+              ]
+            }
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiTableHeaderMobile>
+    <EuiTable
+      responsive={true}
+      tableLayout="fixed"
+    >
+      <EuiScreenReaderOnly>
+        <caption
+          className="euiTableCaption"
+        >
+          <EuiDelayRender
+            delay={500}
+          >
+            <EuiI18n
+              default="This table contains {itemCount} rows."
+              token="euiBasicTable.tableDescriptionWithoutPagination"
+              values={
+                Object {
+                  "itemCount": 3,
+                }
+              }
+            />
+          </EuiDelayRender>
+        </caption>
+      </EuiScreenReaderOnly>
+      <EuiTableHeader>
+        <EuiTableHeaderCell
+          align="left"
+          data-test-subj="tableHeaderCell_name_0"
+          isSortAscending={true}
+          isSorted={true}
+          key="_data_h_name_0"
+          onSort={[Function]}
+        >
+          Name
+        </EuiTableHeaderCell>
+      </EuiTableHeader>
+      <EuiTableBody
+        bodyRef={[Function]}
+      >
+        <EuiTableRow
+          isSelected={false}
+        >
+          <EuiTableRowCell
+            align="left"
+            key="_data_column_name_0_0"
+            mobileOptions={
+              Object {
+                "header": "Name",
+                "render": undefined,
+              }
+            }
+            setScopeRow={false}
+            textOnly={true}
+          >
+            name1
+          </EuiTableRowCell>
+        </EuiTableRow>
+        <EuiTableRow
+          isSelected={false}
+        >
+          <EuiTableRowCell
+            align="left"
+            key="_data_column_name_1_0"
+            mobileOptions={
+              Object {
+                "header": "Name",
+                "render": undefined,
+              }
+            }
+            setScopeRow={false}
+            textOnly={true}
+          >
+            name2
+          </EuiTableRowCell>
+        </EuiTableRow>
+        <EuiTableRow
+          isSelected={false}
+        >
+          <EuiTableRowCell
+            align="left"
+            key="_data_column_name_2_0"
+            mobileOptions={
+              Object {
+                "header": "Name",
+                "render": undefined,
+              }
+            }
+            setScopeRow={false}
+            textOnly={true}
+          >
+            name3
+          </EuiTableRowCell>
+        </EuiTableRow>
+      </EuiTableBody>
+    </EuiTable>
+  </div>
+</div>
+`;
diff --git a/src/components/basic_table/basic_table.test.tsx b/src/components/basic_table/basic_table.test.tsx
@@ -394,6 +394,34 @@ describe('EuiBasicTable', () => {
     expect(component).toMatchSnapshot();
   });
 
+  test('with sorting enabled and enable all columns for sorting', () => {
+    const props: EuiBasicTableProps<BasicItem> = {
+      items: [
+        { id: '1', name: 'name1' },
+        { id: '2', name: 'name2' },
+        { id: '3', name: 'name3' },
+      ],
+      columns: [
+        {
+          field: 'name',
+          name: 'Name',
+          description: 'description',
+        },
+      ],
+      sorting: {
+        sort: {
+          field: 'name',
+          direction: SortDirection.ASC,
+        },
+        enableAllColumns: true,
+      },
+      onChange: () => {},
+    };
+    const component = shallow(<EuiBasicTable {...props} />);
+
+    expect(component).toMatchSnapshot();
+  });
+
   test('with pagination and selection', () => {
     const props: EuiBasicTableProps<BasicItem> = {
       items: [

diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx
@@ -511,6 +511,18 @@ export class EuiBasicTable<T = any> extends Component<
     }
 
     columns.forEach((column: EuiBasicTableColumn<T>, index: number) => {
+      if (
+        (column as EuiTableFieldDataColumnType<T>).field &&
+        sorting.sort &&
+        !!sorting.enableAllColumns &&
+        (column as EuiTableFieldDataColumnType<T>).sortable == null
+      ) {
+        column = {
+          ...(column as EuiTableFieldDataColumnType<T>),
+          sortable: true,
+        };
+      }
+
       if (
         !(column as EuiTableFieldDataColumnType<T>).sortable ||
         (column as EuiTableFieldDataColumnType<T>).hideForMobile
@@ -690,14 +702,29 @@ export class EuiBasicTable<T = any> extends Component<
 
       // field data column
       const sorting: SortOptions = {};
-      if (this.props.sorting && sortable) {
-        const sortDirection = this.resolveColumnSortDirection(column);
-        sorting.isSorted = !!sortDirection;
-        sorting.isSortAscending = sortDirection
-          ? SortDirection.isAsc(sortDirection)
-          : undefined;
-        sorting.onSort = this.resolveColumnOnSort(column);
-        sorting.allowNeutralSort = this.props.sorting.allowNeutralSort;
+      if (this.props.sorting) {
+        if (
+          this.props.sorting.sort &&
+          !!this.props.sorting.enableAllColumns &&
+          (column as EuiTableFieldDataColumnType<T>).sortable == null
+        ) {
+          column = {
+            ...(column as EuiTableFieldDataColumnType<T>),
+            sortable: true,
+          };
+        }
+
+        const { sortable } = column as EuiTableFieldDataColumnType<T>;
+
+        if (sortable) {
+          const sortDirection = this.resolveColumnSortDirection(column);
+          sorting.isSorted = !!sortDirection;
+          sorting.isSortAscending = sortDirection
+            ? SortDirection.isAsc(sortDirection)
+            : undefined;
+          sorting.onSort = this.resolveColumnOnSort(column);
+          sorting.allowNeutralSort = this.props.sorting.allowNeutralSort;
+        }
       }
       headers.push(
         <EuiTableHeaderCell

diff --git a/src/components/basic_table/table_types.ts b/src/components/basic_table/table_types.ts
@@ -71,6 +71,7 @@ export interface EuiTableSortingType<T> {
     direction: Direction;
   };
   allowNeutralSort?: boolean;
+  enableAllColumns?: boolean;
 }
 
 export interface EuiTableSelectionType<T> {