Add enableSorting prop to EuiBasicTable for default sorting of table.

Fixes: #1866
elastic · Feb 27, 2020 · 055ccaa · 055ccaa
1 parent 15aaf89
commit 055ccaa
Show file tree

Hide file tree

Showing 7 changed files with 180 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `enableAllColumns` to `EuiBasicTable` component ([#2906](https://github.com/elastic/eui/pull/2906))
 - Converted `EuiForm` to TypeScript, added many missing `/form` Prop types ([#2896](https://github.com/elastic/eui/pull/2896))
 - Empty table th elements replaced with td in `EuiTable`. ([#2934](https://github.com/elastic/eui/pull/2934))
 - Added default prompt text to `aria-describedby` for `EuiFilePicker` ([#2919](https://github.com/elastic/eui/pull/2919))

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>. You can also set the default sorting
+      behavior of field columns by passing
+      <EuiCode>enableAllColumns: true</EuiCode> to <EuiCode>sorting</EuiCode>
+      prop of EuiBasicTable without the need to specify it for each individual
+      column.
     </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,120 @@ 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}
+        />
+      </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
@@ -690,14 +690,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> {