feat(AnalyticalTable): allow multi-sorting (#4550)

Author: Lukas742

packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

@@ -1725,6 +1725,72 @@ describe('AnalyticalTable', () => {
     cy.get('[data-component-name="AnalyticalTableBody"]').invoke('scrollTop').should('not.equal', 0);
   });
 
+  it('multi-sort', () => {
+    const columns = [
+      {
+        Header: 'Name',
+        accessor: 'name',
+        enableMultiSort: true
+      },
+      {
+        Header: 'Age',
+        accessor: 'age',
+        enableMultiSort: true
+      },
+      {
+        Header: 'Name 2',
+        accessor: 'name2'
+      }
+    ];
+    const data = [
+      { name: 'A', age: 40, name2: 'Y', age2: 18 },
+      { name: 'B', age: 40, name2: 'X', age2: 21 },
+      { name: 'A', age: 30, name2: 'Z', age2: 90 },
+      { name: 'A', age: 70, name2: 'Z', age2: 15 },
+      { name: 'B', age: 60, name2: 'Q', age2: 80 },
+      { name: 'B', age: 20, name2: 'Y', age2: 80 },
+      { name: 'C', age: 40, name2: 'Y', age2: 80 }
+    ];
+    cy.mount(<AnalyticalTable columns={columns} data={data} sortable />);
+
+    //sort both Name and Age (multi-sort enabled)
+    cy.findByText('Name').click();
+    cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
+    cy.findByText('Age').click();
+    cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
+
+    cy.get('[data-column-index="0"][data-row-index="1"]').children().should('have.text', 'A');
+    cy.get('[data-column-index="1"][data-row-index="1"]').children().should('have.text', '30');
+    cy.get('[data-column-index="0"][data-row-index="2"]').children().should('have.text', 'A');
+    cy.get('[data-column-index="1"][data-row-index="2"]').children().should('have.text', '40');
+    cy.get('[data-column-index="0"][data-row-index="3"]').children().should('have.text', 'A');
+    cy.get('[data-column-index="1"][data-row-index="3"]').children().should('have.text', '70');
+
+    cy.get('[data-column-index="0"][data-row-index="4"]').children().should('have.text', 'B');
+    cy.get('[data-column-index="1"][data-row-index="4"]').children().should('have.text', '20');
+    cy.get('[data-column-index="0"][data-row-index="5"]').children().should('have.text', 'B');
+    cy.get('[data-column-index="1"][data-row-index="5"]').children().should('have.text', '40');
+    cy.get('[data-column-index="0"][data-row-index="6"]').children().should('have.text', 'B');
+    cy.get('[data-column-index="1"][data-row-index="6"]').children().should('have.text', '60');
+
+    cy.get('[data-column-index="0"][data-row-index="7"]').children().should('have.text', 'C');
+    cy.get('[data-column-index="1"][data-row-index="7"]').children().should('have.text', '40');
+
+    //only sort Name2
+    cy.findByText('Name 2').click();
+    cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
+
+    cy.get('[data-column-index="0"][data-row-index="1"]').children().should('have.text', 'B');
+    cy.get('[data-column-index="1"][data-row-index="1"]').children().should('have.text', '60');
+    cy.get('[data-column-index="2"][data-row-index="1"]').children().should('have.text', 'Q');
+    cy.get('[data-column-index="0"][data-row-index="2"]').children().should('have.text', 'B');
+    cy.get('[data-column-index="1"][data-row-index="2"]').children().should('have.text', '40');
+    cy.get('[data-column-index="2"][data-row-index="2"]').children().should('have.text', 'X');
+    cy.get('[data-column-index="0"][data-row-index="3"]').children().should('have.text', 'A');
+    cy.get('[data-column-index="1"][data-row-index="3"]').children().should('have.text', '40');
+    cy.get('[data-column-index="2"][data-row-index="3"]').children().should('have.text', 'Y');
+  });
+
   cypressPassThroughTestsFactory(AnalyticalTable, { data, columns });
 });
 

packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx

@@ -185,6 +185,7 @@ import * as ComponentStories from './AnalyticalTable.stories';
 | `PopInHeader`         | `string OR ComponentType`                                                | Custom pop-in header renderer. If set, the table will call that component for every column that is "popped-in" and pass the table instance as prop.                                                                                                                                                                                                                                                             |
 | `disableDragAndDrop`  | `boolean`                                                                | Defines if the column is reorderable by dragging and dropping columns.                                                                                                                                                                                                                                                                                                                                          |
 | `canReorder`          | `boolean`                                                                | **deprecated** Defines if the column is reorderable by dragging and dropping columns. Please use `disableDragAndDrop` instead. Defaults to: `true`.                                                                                                                                                                                                                                                             |
+| `enableMultiSort`     | `boolean`                                                                | Defines whether this column should allow multi-sort.<br /><br /> **Note:** When sorting by a column that does not allow multiple sorting, only the current column is sorted and all other sorted columns are reset.                                                                                                                                                                                             |
 
 <br />
 

packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx

@@ -82,7 +82,7 @@ export const ColumnHeaderModal = (props: ColumnHeaderModalProperties) => {
 
     switch (sortType) {
       case 'asc':
-        column.toggleSortBy(false);
+        column.toggleSortBy(false, !!column.enableMultiSort);
         if (typeof onSort === 'function') {
           onSort(
             enrichEventWithDetails(e, {
@@ -93,7 +93,7 @@ export const ColumnHeaderModal = (props: ColumnHeaderModalProperties) => {
         }
         break;
       case 'desc':
-        column.toggleSortBy(true);
+        column.toggleSortBy(true, !!column.enableMultiSort);
         if (typeof onSort === 'function') {
           onSort(
             enrichEventWithDetails(e, {

packages/main/src/components/AnalyticalTable/index.tsx

@@ -254,6 +254,12 @@ export interface AnalyticalTableColumnDefinition {
    * Defines if the column is reorderable by dragging and dropping columns.
    */
   disableDragAndDrop?: boolean;
+  /**
+   * Defines whether this column should allow multi-sort.
+   *
+   * __Note:__ When sorting by a column that does not allow multiple sorting, only the current column is sorted and all other sorted columns are reset.
+   */
+  enableMultiSort?: boolean;
 
   // all other custom properties of [React Table](https://react-table-v7.tanstack.com/) column options
   [key: string]: any;

packages/main/src/components/AnalyticalTable/types/ColumnType.ts

@@ -23,4 +23,5 @@ export interface ColumnType extends Column {
   hAlign: string;
   totalLeft: number;
   totalFlexWidth: number;
+  enableMultiSort?: boolean;
 }