Fix(datatable): setting default sort column doesn't work (carbon-desi…

…gn-system#11468)

### Related Ticket(s)

Closes carbon-design-system#11451

### Description

Setting default sort column for data table using `sort-direction` property doesn't work.

### Changelog

**New**

- Added a condition to check if during initial load `sort-direction` is set for any of the table header cells, and if so sort that column by default.

**Changed**

- Moved sorting into separate function so that it can be called during initial load as well as on click event on sort icons. 


<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/carbon-web-components/src/components/data-table/table-header-cell.ts

@@ -89,6 +89,7 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) {
       this._hasSlug = Boolean(hasContent);
       (hasContent[0] as HTMLElement).setAttribute('size', 'mini');
     }
+
     this.requestUpdate();
   }
 
@@ -174,11 +175,16 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'columnheader');
     }
+
     super.connectedCallback();
   }
 
   updated(changedProperties) {
-    if (this.isSortable && !changedProperties.has('sortDirection')) {
+    if (
+      this.isSortable &&
+      !changedProperties.has('sortDirection') &&
+      !this.sortDirection
+    ) {
       this.sortDirection = TABLE_SORT_DIRECTION.NONE;
     }
     if (this._hasSlug) {

packages/carbon-web-components/src/components/data-table/table.ts

@@ -233,6 +233,52 @@ class CDSTable extends HostListenerMixin(LitElement) {
     this.withHeader = hasContent;
   }
 
+  private _handleSortAction(columnIndex, sortDirection) {
+    const rows = [...this._tableRows];
+
+    // regular row sorting
+    rows.sort((a, b) => {
+      const cellA = a.querySelectorAll(
+        (this.constructor as typeof CDSTable).selectorTableRowCells
+      )[columnIndex].textContent;
+      const cellB = b.querySelectorAll(
+        (this.constructor as typeof CDSTable).selectorTableRowCells
+      )[columnIndex].textContent;
+      return (
+        this.collationFactors[sortDirection] *
+        this.customSortRow(cellA, cellB, this.collator)
+      );
+    });
+
+    // take into account the expanded rows, mapping each expandable row to its original for proper reinsertion
+    if (this.expandable) {
+      const originalRows = [...this._tableRows];
+      const expandedRows = [...this._tableExpandedRows];
+
+      const mapping = originalRows.reduce((acc, element, index) => {
+        const sortId = element.getAttribute('sort-id');
+        acc[sortId] = expandedRows[index];
+        return acc;
+      }, {});
+
+      const sortedWithExpanded = [] as any;
+
+      rows.forEach((e) => {
+        const sortId = e.getAttribute('sort-id');
+        sortedWithExpanded.push(e);
+        sortedWithExpanded.push(mapping[sortId]);
+      });
+
+      sortedWithExpanded.forEach((e) => {
+        this._tableBody.insertBefore(e, null);
+      });
+    } else {
+      rows.forEach((e) => {
+        this._tableBody.insertBefore(e, null);
+      });
+    }
+  }
+
   private _handleFilterRows() {
     const unfilteredRows = [] as any;
     forEach(this._tableRows, (elem) => {
@@ -334,55 +380,14 @@ class CDSTable extends HostListenerMixin(LitElement) {
       return;
     }
 
-    const rows = [...this._tableRows];
     const columns = [...this._tableHeaderRow.children];
     const columnIndex = columns.indexOf(target);
 
     columns.forEach(
       (e) => e !== target && e.setAttribute('sort-direction', 'none')
     );
 
-    // regular row sorting
-    rows.sort((a, b) => {
-      const cellA = a.querySelectorAll(
-        (this.constructor as typeof CDSTable).selectorTableRowCells
-      )[columnIndex].textContent;
-      const cellB = b.querySelectorAll(
-        (this.constructor as typeof CDSTable).selectorTableRowCells
-      )[columnIndex].textContent;
-      return (
-        this.collationFactors[sortDirection] *
-        this.customSortRow(cellA, cellB, this.collator)
-      );
-    });
-
-    // take into account the expanded rows, mapping each expandable row to its original for proper reinsertion
-    if (this.expandable) {
-      const originalRows = [...this._tableRows];
-      const expandedRows = [...this._tableExpandedRows];
-
-      const mapping = originalRows.reduce((acc, element, index) => {
-        const sortId = element.getAttribute('sort-id');
-        acc[sortId] = expandedRows[index];
-        return acc;
-      }, {});
-
-      const sortedWithExpanded = [] as any;
-
-      rows.forEach((e) => {
-        const sortId = e.getAttribute('sort-id');
-        sortedWithExpanded.push(e);
-        sortedWithExpanded.push(mapping[sortId]);
-      });
-
-      sortedWithExpanded.forEach((e) => {
-        this._tableBody.insertBefore(e, null);
-      });
-    } else {
-      rows.forEach((e) => {
-        this._tableBody.insertBefore(e, null);
-      });
-    }
+    this._handleSortAction(columnIndex, sortDirection);
 
     const init = {
       bubbles: true,
@@ -647,20 +652,33 @@ class CDSTable extends HostListenerMixin(LitElement) {
       this.headerCount++;
     }
 
+    if (changedProperties.has('locale')) {
+      this.collator = new Intl.Collator(this.locale);
+    }
     if (changedProperties.has('isSortable')) {
       const headerCells = this.querySelectorAll(
         (this.constructor as typeof CDSTable).selectorHeaderCell
       );
       headerCells.forEach((e) => {
         (e as CDSTableHeaderCell).isSortable = this.isSortable;
-        (e as CDSTableHeaderCell).removeAttribute('sort-direction');
         (e as CDSTableHeaderCell).isSelectable = this.isSelectable;
         (e as CDSTableHeaderCell).isExpandable = this.expandable;
       });
-    }
-
-    if (changedProperties.has('locale')) {
-      this.collator = new Intl.Collator(this.locale);
+      const columns = [...this._tableHeaderRow.children];
+      columns.forEach((column, index) => {
+        if (
+          column.hasAttribute('sort-direction') &&
+          column.getAttribute('sort-direction') !== 'none'
+        ) {
+          const sortDirection = column.getAttribute('sort-direction');
+          const columnIndex = index;
+
+          columns.forEach(
+            (e) => e !== column && e.setAttribute('sort-direction', 'none')
+          );
+          this._handleSortAction(columnIndex, sortDirection);
+        }
+      });
     }
 
     if (