From 4a1b748faac706ea02e29b9f5d875b6776b5001e Mon Sep 17 00:00:00 2001
From: kostasdano <kostas.danochristos@orfium.com>
Date: Mon, 15 Jul 2024 20:10:09 +0300
Subject: [PATCH] feat: sorting order

---
 .../Table/Table/Basics-BasicExample.snap      |  9 ++--
 .../Table/Table/Columns-ColumnChooser.snap    |  9 ++--
 .../Table/Table/Columns-ColumnWidth.snap      | 18 ++++---
 .../Table/Table/Columns-Sorting.snap          | 29 +++++++----
 .../Table/Table/Header-StickyHeader.snap      |  9 ++--
 .../Table/Table/Pagination-Pagination.snap    |  9 ++--
 .../Rows and Cells-CellContentAlignment.snap  |  9 ++--
 .../Table/Rows and Cells-RowDetails.snap      | 18 ++++---
 .../Table/Rows and Cells-RowSelection.snap    | 18 ++++---
 .../Table/Table/Rows and Cells-RowSizes.snap  |  9 ++--
 .../Table/Table/Showcase-Playground.snap      |  9 ++--
 src/components/Table/Table.tsx                | 12 ++++-
 .../Table/components/TH/TH.style.ts           | 14 +++---
 src/components/Table/components/TH/TH.tsx     | 23 ++++-----
 .../SortingButton/SortingButton.style.ts      | 17 +++++++
 .../SortingButton/SortingButton.tsx           | 48 +++++++++++++++++++
 .../TH/components/SortingButton/index.ts      |  1 +
 src/components/Table/constants.tsx            | 27 +++++++++++
 .../Table/docs/Columns/Columns.stories.tsx    | 16 +++++--
 19 files changed, 229 insertions(+), 75 deletions(-)
 create mode 100644 src/components/Table/components/TH/components/SortingButton/SortingButton.style.ts
 create mode 100644 src/components/Table/components/TH/components/SortingButton/SortingButton.tsx
 create mode 100644 src/components/Table/components/TH/components/SortingButton/index.ts

diff --git a/src/__storyshots__/Updated Components/Table/Table/Basics-BasicExample.snap b/src/__storyshots__/Updated Components/Table/Table/Basics-BasicExample.snap
index 3cdc5b656..7074c2147 100644
--- a/src/__storyshots__/Updated Components/Table/Table/Basics-BasicExample.snap	
+++ b/src/__storyshots__/Updated Components/Table/Table/Basics-BasicExample.snap	
@@ -41,12 +41,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-4 [data-header-role='options'] button {
+.emotion-4 [data-header-role='options'],
+.emotion-4 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-4:hover [data-header-role='options'] button,
-.emotion-4:focus-visible [data-header-role='options'] button {
+.emotion-4:hover [data-header-role='options'],
+.emotion-4:focus-visible [data-header-role='options'],
+.emotion-4:hover [data-header-role='sorting-button'],
+.emotion-4:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
diff --git a/src/__storyshots__/Updated Components/Table/Table/Columns-ColumnChooser.snap b/src/__storyshots__/Updated Components/Table/Table/Columns-ColumnChooser.snap
index 8d90a13e6..04e2bfade 100644
--- a/src/__storyshots__/Updated Components/Table/Table/Columns-ColumnChooser.snap	
+++ b/src/__storyshots__/Updated Components/Table/Table/Columns-ColumnChooser.snap	
@@ -145,12 +145,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-10 [data-header-role='options'] button {
+.emotion-10 [data-header-role='options'],
+.emotion-10 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-10:hover [data-header-role='options'] button,
-.emotion-10:focus-visible [data-header-role='options'] button {
+.emotion-10:hover [data-header-role='options'],
+.emotion-10:focus-visible [data-header-role='options'],
+.emotion-10:hover [data-header-role='sorting-button'],
+.emotion-10:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
diff --git a/src/__storyshots__/Updated Components/Table/Table/Columns-ColumnWidth.snap b/src/__storyshots__/Updated Components/Table/Table/Columns-ColumnWidth.snap
index f4b28e739..2eb326050 100644
--- a/src/__storyshots__/Updated Components/Table/Table/Columns-ColumnWidth.snap	
+++ b/src/__storyshots__/Updated Components/Table/Table/Columns-ColumnWidth.snap	
@@ -41,12 +41,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-4 [data-header-role='options'] button {
+.emotion-4 [data-header-role='options'],
+.emotion-4 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-4:hover [data-header-role='options'] button,
-.emotion-4:focus-visible [data-header-role='options'] button {
+.emotion-4:hover [data-header-role='options'],
+.emotion-4:focus-visible [data-header-role='options'],
+.emotion-4:hover [data-header-role='sorting-button'],
+.emotion-4:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
@@ -93,12 +96,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-10 [data-header-role='options'] button {
+.emotion-10 [data-header-role='options'],
+.emotion-10 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-10:hover [data-header-role='options'] button,
-.emotion-10:focus-visible [data-header-role='options'] button {
+.emotion-10:hover [data-header-role='options'],
+.emotion-10:focus-visible [data-header-role='options'],
+.emotion-10:hover [data-header-role='sorting-button'],
+.emotion-10:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
diff --git a/src/__storyshots__/Updated Components/Table/Table/Columns-Sorting.snap b/src/__storyshots__/Updated Components/Table/Table/Columns-Sorting.snap
index db955397e..40e6d0e2d 100644
--- a/src/__storyshots__/Updated Components/Table/Table/Columns-Sorting.snap	
+++ b/src/__storyshots__/Updated Components/Table/Table/Columns-Sorting.snap	
@@ -41,7 +41,8 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-4 [data-header-role='options'] button {
+.emotion-4 [data-header-role='options'],
+.emotion-4 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
@@ -55,8 +56,10 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-4:hover [data-header-role='options'] button,
-.emotion-4:focus-visible [data-header-role='options'] button {
+.emotion-4:hover [data-header-role='options'],
+.emotion-4:focus-visible [data-header-role='options'],
+.emotion-4:hover [data-header-role='sorting-button'],
+.emotion-4:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
@@ -187,12 +190,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-16 [data-header-role='options'] button {
+.emotion-16 [data-header-role='options'],
+.emotion-16 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-16:hover [data-header-role='options'] button,
-.emotion-16:focus-visible [data-header-role='options'] button {
+.emotion-16:hover [data-header-role='options'],
+.emotion-16:focus-visible [data-header-role='options'],
+.emotion-16:hover [data-header-role='sorting-button'],
+.emotion-16:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
@@ -216,7 +222,8 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-19 [data-header-role='options'] button {
+.emotion-19 [data-header-role='options'],
+.emotion-19 [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
@@ -230,8 +237,10 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-19:hover [data-header-role='options'] button,
-.emotion-19:focus-visible [data-header-role='options'] button {
+.emotion-19:hover [data-header-role='options'],
+.emotion-19:focus-visible [data-header-role='options'],
+.emotion-19:hover [data-header-role='sorting-button'],
+.emotion-19:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
@@ -358,6 +367,7 @@
                 >
                   <button
                     class="emotion-9"
+                    data-header-role="sorting-button"
                     data-testid="ictinus_sort_firstName_asc-icon-button"
                     type="button"
                   >
@@ -456,6 +466,7 @@
                 >
                   <button
                     class="emotion-9"
+                    data-header-role="sorting-button"
                     data-testid="ictinus_sort_age_asc-icon-button"
                     type="button"
                   >
diff --git a/src/__storyshots__/Updated Components/Table/Table/Header-StickyHeader.snap b/src/__storyshots__/Updated Components/Table/Table/Header-StickyHeader.snap
index 0124384ca..a576a0450 100644
--- a/src/__storyshots__/Updated Components/Table/Table/Header-StickyHeader.snap	
+++ b/src/__storyshots__/Updated Components/Table/Table/Header-StickyHeader.snap	
@@ -52,12 +52,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-4 [data-header-role='options'] button {
+.emotion-4 [data-header-role='options'],
+.emotion-4 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-4:hover [data-header-role='options'] button,
-.emotion-4:focus-visible [data-header-role='options'] button {
+.emotion-4:hover [data-header-role='options'],
+.emotion-4:focus-visible [data-header-role='options'],
+.emotion-4:hover [data-header-role='sorting-button'],
+.emotion-4:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
diff --git a/src/__storyshots__/Updated Components/Table/Table/Pagination-Pagination.snap b/src/__storyshots__/Updated Components/Table/Table/Pagination-Pagination.snap
index 2c2d349b4..c08a1f9b9 100644
--- a/src/__storyshots__/Updated Components/Table/Table/Pagination-Pagination.snap	
+++ b/src/__storyshots__/Updated Components/Table/Table/Pagination-Pagination.snap	
@@ -41,12 +41,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-4 [data-header-role='options'] button {
+.emotion-4 [data-header-role='options'],
+.emotion-4 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-4:hover [data-header-role='options'] button,
-.emotion-4:focus-visible [data-header-role='options'] button {
+.emotion-4:hover [data-header-role='options'],
+.emotion-4:focus-visible [data-header-role='options'],
+.emotion-4:hover [data-header-role='sorting-button'],
+.emotion-4:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
diff --git a/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-CellContentAlignment.snap b/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-CellContentAlignment.snap
index 3cdc5b656..7074c2147 100644
--- a/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-CellContentAlignment.snap	
+++ b/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-CellContentAlignment.snap	
@@ -41,12 +41,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-4 [data-header-role='options'] button {
+.emotion-4 [data-header-role='options'],
+.emotion-4 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-4:hover [data-header-role='options'] button,
-.emotion-4:focus-visible [data-header-role='options'] button {
+.emotion-4:hover [data-header-role='options'],
+.emotion-4:focus-visible [data-header-role='options'],
+.emotion-4:hover [data-header-role='sorting-button'],
+.emotion-4:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
diff --git a/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowDetails.snap b/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowDetails.snap
index 123ae9bcb..491d9ce47 100644
--- a/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowDetails.snap	
+++ b/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowDetails.snap	
@@ -75,12 +75,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-7 [data-header-role='options'] button {
+.emotion-7 [data-header-role='options'],
+.emotion-7 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-7:hover [data-header-role='options'] button,
-.emotion-7:focus-visible [data-header-role='options'] button {
+.emotion-7:hover [data-header-role='options'],
+.emotion-7:focus-visible [data-header-role='options'],
+.emotion-7:hover [data-header-role='sorting-button'],
+.emotion-7:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
@@ -127,12 +130,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-19 [data-header-role='options'] button {
+.emotion-19 [data-header-role='options'],
+.emotion-19 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-19:hover [data-header-role='options'] button,
-.emotion-19:focus-visible [data-header-role='options'] button {
+.emotion-19:hover [data-header-role='options'],
+.emotion-19:focus-visible [data-header-role='options'],
+.emotion-19:hover [data-header-role='sorting-button'],
+.emotion-19:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
diff --git a/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowSelection.snap b/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowSelection.snap
index c826253a9..27692037c 100644
--- a/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowSelection.snap	
+++ b/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowSelection.snap	
@@ -279,12 +279,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-30 [data-header-role='options'] button {
+.emotion-30 [data-header-role='options'],
+.emotion-30 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-30:hover [data-header-role='options'] button,
-.emotion-30:focus-visible [data-header-role='options'] button {
+.emotion-30:hover [data-header-role='options'],
+.emotion-30:focus-visible [data-header-role='options'],
+.emotion-30:hover [data-header-role='sorting-button'],
+.emotion-30:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
@@ -424,12 +427,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-37 [data-header-role='options'] button {
+.emotion-37 [data-header-role='options'],
+.emotion-37 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-37:hover [data-header-role='options'] button,
-.emotion-37:focus-visible [data-header-role='options'] button {
+.emotion-37:hover [data-header-role='options'],
+.emotion-37:focus-visible [data-header-role='options'],
+.emotion-37:hover [data-header-role='sorting-button'],
+.emotion-37:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
diff --git a/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowSizes.snap b/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowSizes.snap
index 3cdc5b656..7074c2147 100644
--- a/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowSizes.snap	
+++ b/src/__storyshots__/Updated Components/Table/Table/Rows and Cells-RowSizes.snap	
@@ -41,12 +41,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-4 [data-header-role='options'] button {
+.emotion-4 [data-header-role='options'],
+.emotion-4 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-4:hover [data-header-role='options'] button,
-.emotion-4:focus-visible [data-header-role='options'] button {
+.emotion-4:hover [data-header-role='options'],
+.emotion-4:focus-visible [data-header-role='options'],
+.emotion-4:hover [data-header-role='sorting-button'],
+.emotion-4:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
diff --git a/src/__storyshots__/Updated Components/Table/Table/Showcase-Playground.snap b/src/__storyshots__/Updated Components/Table/Table/Showcase-Playground.snap
index 58c74c353..59670983a 100644
--- a/src/__storyshots__/Updated Components/Table/Table/Showcase-Playground.snap	
+++ b/src/__storyshots__/Updated Components/Table/Table/Showcase-Playground.snap	
@@ -75,12 +75,15 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-7 [data-header-role='options'] button {
+.emotion-7 [data-header-role='options'],
+.emotion-7 [data-header-role='sorting-button'] {
   opacity: 0;
 }
 
-.emotion-7:hover [data-header-role='options'] button,
-.emotion-7:focus-visible [data-header-role='options'] button {
+.emotion-7:hover [data-header-role='options'],
+.emotion-7:focus-visible [data-header-role='options'],
+.emotion-7:hover [data-header-role='sorting-button'],
+.emotion-7:focus-visible [data-header-role='sorting-button'] {
   opacity: 1;
 }
 
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 55c7516e6..698587d4a 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -78,7 +78,17 @@ const Table = <TData extends NoUndefined<TData>>({
                   width={header.getSize()}
                   metaData={header.column.columnDef.meta}
                   {...(header.column.getCanSort() && {
-                    colSortingState: sorting?.sortingColumn?.find((col) => col.id === header.id),
+                    colSortingState: sorting?.sortingColumn?.find((col) => col.id === header.id)
+                      ? {
+                          /** Find and pass the ColumnSort object */
+                          ...sorting?.sortingColumn?.find((col) => col.id === header.id),
+                          /** Check if multiSort and determine the position of the ColumnSort object in the Sorting Array */
+                          ...(sorting.sortingColumn.length > 1 && {
+                            badge:
+                              sorting?.sortingColumn?.findIndex((col) => col.id === header.id) + 1,
+                          }),
+                        }
+                      : undefined,
                     onSort: header.column.toggleSorting,
                     isMultiSortable: header.column.getCanMultiSort(),
                     resetSorting: header.column.clearSorting,
diff --git a/src/components/Table/components/TH/TH.style.ts b/src/components/Table/components/TH/TH.style.ts
index c14feede7..65846881a 100644
--- a/src/components/Table/components/TH/TH.style.ts
+++ b/src/components/Table/components/TH/TH.style.ts
@@ -41,10 +41,9 @@ export const thContainer =
       )};
       ${generateStylesFromTokens(theme.tokens.typography.get('normal.body02'))};
 
-      [data-header-role='options'] {
-        button {
-          opacity: ${hasVisibleOptions ? 1 : 0};
-        }
+      [data-header-role='options'],
+      [data-header-role='sorting-button'] {
+        opacity: ${hasVisibleOptions ? 1 : 0};
       }
 
       &:hover,
@@ -52,10 +51,9 @@ export const thContainer =
         color: ${isSortable && theme.tokens.colors.get('textColor.default.primary')};
         ${isSortable && generateStylesFromTokens(theme.tokens.typography.get('normal.label02'))};
 
-        [data-header-role='options'] {
-          button {
-            opacity: 1;
-          }
+        [data-header-role='options'],
+        [data-header-role='sorting-button'] {
+          opacity: 1;
         }
       }
 
diff --git a/src/components/Table/components/TH/TH.tsx b/src/components/Table/components/TH/TH.tsx
index 3ebc5c0a2..785b0a275 100644
--- a/src/components/Table/components/TH/TH.tsx
+++ b/src/components/Table/components/TH/TH.tsx
@@ -5,9 +5,8 @@ import isEqual from 'react-fast-compare';
 import type { DivProps } from 'utils/common';
 
 import { THOptions } from './components';
+import SortingButton from './components/SortingButton';
 import { thContainer, optionsContainer, thContent } from './TH.style';
-import type { AcceptedIconNames } from 'components/Icon';
-import IconButton from 'components/IconButton';
 import type { RowSize } from 'components/Table/types';
 
 import type { TestProps } from '~/utils/types';
@@ -24,7 +23,7 @@ type Props = {
   /** Whether multi-sorting is enabled */
   isMultiSortable?: boolean;
   /** The Sorting State of the column */
-  colSortingState?: ColumnSort;
+  colSortingState?: ColumnSort & { badge?: number };
   /** Callback to reset sorting for this column */
   resetSorting?: () => void;
   /** Metadata for the th element */
@@ -53,7 +52,7 @@ const TH: React.FCC<Props & Pick<DivProps, 'onClick' | 'id'>> = ({
 
   const [hasVisibleOptions, setHasVisibleOptions] = React.useState(false);
 
-  const { desc: isDesc } = colSortingState ?? {};
+  const { desc: isDesc, badge } = colSortingState ?? {};
 
   const { contentAlign = 'left' } = metaData;
 
@@ -70,19 +69,13 @@ const TH: React.FCC<Props & Pick<DivProps, 'onClick' | 'id'>> = ({
       return onSort(false, isMultiSortable);
     };
 
-    const getIcon = (): AcceptedIconNames => {
-      if (isDesc === false || isDesc === undefined) return 'arrowUp';
-
-      return 'arrowDown';
-    };
-
     return (
-      <IconButton
-        iconName={getIcon()}
-        type="tertiary"
-        size="compact"
+      <SortingButton
+        id={id}
+        isDesc={isDesc}
         onClick={handleClick}
-        dataTestPrefixId={`${dataTestPrefixId}_sort_${id}_${isDesc ? 'desc' : 'asc'}`}
+        badge={badge}
+        dataTestPrefixId={dataTestPrefixId}
       />
     );
   };
diff --git a/src/components/Table/components/TH/components/SortingButton/SortingButton.style.ts b/src/components/Table/components/TH/components/SortingButton/SortingButton.style.ts
new file mode 100644
index 000000000..c1919f0f5
--- /dev/null
+++ b/src/components/Table/components/TH/components/SortingButton/SortingButton.style.ts
@@ -0,0 +1,17 @@
+import type { SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
+
+import type { Theme } from '~/theme';
+
+export const badgeContainer =
+  () =>
+  (theme: Theme): SerializedStyles => {
+    return css`
+      position: absolute;
+      right: 0;
+      font-size: ${theme.globals.typography.fontSize.get('1')};
+      line-height: normal;
+      font-weight: ${theme.globals.typography.fontWeight.get('bold')};
+      color: ${theme.tokens.colors.get('textColor.default.primary')};
+    `;
+  };
diff --git a/src/components/Table/components/TH/components/SortingButton/SortingButton.tsx b/src/components/Table/components/TH/components/SortingButton/SortingButton.tsx
new file mode 100644
index 000000000..b9cc14d28
--- /dev/null
+++ b/src/components/Table/components/TH/components/SortingButton/SortingButton.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { badgeContainer } from './SortingButton.style';
+import IconButton from 'components/IconButton';
+
+import type { AcceptedIconNames } from '~/components/Icon';
+import type { TestProps } from '~/utils/types';
+
+type Props = {
+  /** ID of the columns */
+  id: string;
+  /** Whether the sorting direction is descending or not */
+  isDesc: boolean;
+  /** Callback for sorting button  */
+  onClick: () => void;
+  /** Indicates the sorting order */
+  badge?: number;
+} & TestProps;
+
+const SortingButton: React.FC<Props> = ({ id, isDesc, badge, onClick, dataTestPrefixId }) => {
+  const getIcon = (): AcceptedIconNames => {
+    if (isDesc === false || isDesc === undefined) return 'arrowUp';
+
+    return 'arrowDown';
+  };
+
+  const button = (
+    <IconButton
+      data-header-role="sorting-button"
+      iconName={getIcon()}
+      type="tertiary"
+      size="compact"
+      onClick={onClick}
+      dataTestPrefixId={`${dataTestPrefixId}_sort_${id}_${isDesc ? 'desc' : 'asc'}`}
+    />
+  );
+
+  return badge ? (
+    <div css={{ position: 'relative' }} data-header-role="sorting-button">
+      <div css={badgeContainer()}>{badge}</div>
+      {button}
+    </div>
+  ) : (
+    button
+  );
+};
+
+export default SortingButton;
diff --git a/src/components/Table/components/TH/components/SortingButton/index.ts b/src/components/Table/components/TH/components/SortingButton/index.ts
new file mode 100644
index 000000000..5b0abfed1
--- /dev/null
+++ b/src/components/Table/components/TH/components/SortingButton/index.ts
@@ -0,0 +1 @@
+export { default } from './SortingButton';
diff --git a/src/components/Table/constants.tsx b/src/components/Table/constants.tsx
index 58d1c1929..558467542 100644
--- a/src/components/Table/constants.tsx
+++ b/src/components/Table/constants.tsx
@@ -82,6 +82,33 @@ export const sortedData = (data, sorting: SortingState) => {
   }
 };
 
+export const multiSortDataByKey = (data, keys) => {
+  const returnData =
+    keys.length === 0
+      ? data
+      : data.sort((a, b) => {
+          for (const { id, desc } of keys) {
+            const valueA = a.cells[id];
+            const valueB = b.cells[id];
+
+            let comparison;
+            if (id === 'age') {
+              comparison = parseInt(valueA, 10) - parseInt(valueB, 10);
+            } else {
+              comparison = valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
+            }
+
+            if (comparison !== 0) {
+              return desc ? -comparison : comparison;
+            }
+          }
+
+          return 0;
+        });
+
+  return returnData;
+};
+
 const quotes = {
   rachel: {
     1: "It's like all my life everyone has always told me, 'You're a shoe! You're a shoe! You're a shoe!' Well, what if I don't want to be a shoe? What if I want to be a purse, you know, or a hat!",
diff --git a/src/components/Table/docs/Columns/Columns.stories.tsx b/src/components/Table/docs/Columns/Columns.stories.tsx
index 8114d2099..fa4ace9a9 100644
--- a/src/components/Table/docs/Columns/Columns.stories.tsx
+++ b/src/components/Table/docs/Columns/Columns.stories.tsx
@@ -1,6 +1,12 @@
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import Table from '../../Table';
-import { SimpleData, simpleColumns, simpleData, sortedData } from '../../constants';
+import {
+  SimpleData,
+  multiSortDataByKey,
+  simpleColumns,
+  simpleData,
+  sortedData,
+} from '../../constants';
 import { TableColumn } from '../../types';
 import { SortingState } from '@tanstack/react-table';
 
@@ -117,9 +123,13 @@ export const Sorting = {
       { id: 'job', header: 'Job' },
     ];
 
+    const data = isMultiSortable
+      ? multiSortDataByKey(simpleData(), sortingColumn)
+      : sortedData(simpleData(), sortingColumn);
+
     return (
       <Table
-        data={sortedData(simpleData(), sortingColumn)}
+        data={data}
         columns={columns}
         sorting={{
           sortingColumn,