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 index c86724a006f..119b639fa3d 100644 --- 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 @@ -234,7 +234,6 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) { > `; } - /** * A selector that will return the slug item. */ diff --git a/packages/carbon-web-components/src/components/data-table/table.ts b/packages/carbon-web-components/src/components/data-table/table.ts index 0fc3cd5553c..4bee2b8f1ec 100644 --- a/packages/carbon-web-components/src/components/data-table/table.ts +++ b/packages/carbon-web-components/src/components/data-table/table.ts @@ -664,12 +664,14 @@ class CDSTable extends HostListenerMixin(LitElement) { } if (changedProperties.has('isSelectable')) { - this._tableHeaderRow.setAttribute('selection-name', 'header'); - this._tableRows.forEach((e, index) => { - if (!e.hasAttribute('selection-name')) { - e.setAttribute('selection-name', index); - } - }); + if (this.isSelectable) { + this._tableHeaderRow.setAttribute('selection-name', 'header'); + this._tableRows.forEach((e, index) => { + if (!e.hasAttribute('selection-name')) { + e.setAttribute('selection-name', index); + } + }); + } this.headerCount++; } @@ -677,29 +679,9 @@ class CDSTable extends HostListenerMixin(LitElement) { 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).isSelectable = this.isSelectable; - (e as CDSTableHeaderCell).isExpandable = this.expandable; - }); - 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 (this.isSortable) { + this._enableSortAction(); + } } if ( @@ -813,6 +795,39 @@ class CDSTable extends HostListenerMixin(LitElement) { : html``} `; } + + /** + * Adds isSortable value for table header cells. + */ + _enableSortAction() { + const headerCells = this.querySelectorAll( + (this.constructor as typeof CDSTable).selectorHeaderCell + ); + headerCells.forEach((e) => { + (e as CDSTableHeaderCell).isSortable = this.isSortable; + (e as CDSTableHeaderCell).isSelectable = this.isSelectable; + (e as CDSTableHeaderCell).isExpandable = this.expandable; + }); + const columns = [...this._tableHeaderRow.children]; + let sortDirection; + let columnIndex = -1; + columns.forEach((column, index) => { + if ( + column.hasAttribute('sort-direction') && + column.getAttribute('sort-direction') !== 'none' + ) { + sortDirection = column.getAttribute('sort-direction'); + columnIndex = index; + } + }); + + columns.forEach( + (e, index) => + index !== columnIndex && e.setAttribute('sort-direction', 'none') + ); + this._handleSortAction(columnIndex, sortDirection); + } + /* eslint-enable no-constant-condition */ /**