fix(datatable): is sortable not working in table header cell (carbon-…

…design-system#11516)
kennylam · Feb 9, 2024 · 02f3a7e · 02f3a7e
1 parent 45843f7
commit 02f3a7e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/packages/carbon-web-components/src/components/data-table/table-header-cell.ts b/packages/carbon-web-components/src/components/data-table/table-header-cell.ts
@@ -130,13 +130,13 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) {
   /**
    * `true` if the table has expandable rows
    */
-  @property({ type: Boolean, reflect: true, attribute: 'is-sortable' })
+  @property({ type: Boolean, reflect: true, attribute: 'expandable' })
   isExpandable = false;
 
   /**
    * `true` if this table has selectable rows
    */
-  @property({ type: Boolean, reflect: true, attribute: 'is-sortable' })
+  @property({ type: Boolean, reflect: true, attribute: 'is-selectable' })
   isSelectable = false;
   /**
    * `true` if this table header column should be sortable

diff --git a/packages/carbon-web-components/src/components/data-table/table.ts b/packages/carbon-web-components/src/components/data-table/table.ts
@@ -404,9 +404,13 @@ class CDSTable extends HostListenerMixin(LitElement) {
     const columns = [...this._tableHeaderRow.children];
     const columnIndex = columns.indexOf(target);
 
-    columns.forEach(
-      (e) => e !== target && e.setAttribute('sort-direction', 'none')
-    );
+    columns.forEach((e) => {
+      if (e !== target && this.isSortable) {
+        e.setAttribute('sort-direction', 'none');
+      } else if (e.hasAttribute('is-sortable')) {
+        e.setAttribute('sort-direction', 'none');
+      }
+    });
 
     this._handleSortAction(columnIndex, sortDirection);
 
@@ -821,10 +825,13 @@ class CDSTable extends HostListenerMixin(LitElement) {
       }
     });
 
-    columns.forEach(
-      (e, index) =>
-        index !== columnIndex && e.setAttribute('sort-direction', 'none')
-    );
+    columns.forEach((e, index) => {
+      if (index !== columnIndex && this.isSortable) {
+        e.setAttribute('sort-direction', 'none');
+      } else if (e.hasAttribute('is-sortable')) {
+        e.setAttribute('sort-direction', 'none');
+      }
+    });
     this._handleSortAction(columnIndex, sortDirection);
   }