From 8290324c69cb00af6935c91c2692c88399bbdef1 Mon Sep 17 00:00:00 2001 From: Sangeetha Babu Date: Thu, 1 Feb 2024 21:59:58 +0530 Subject: [PATCH] Fix(datatable): setting default sort column doesn't work (#11468) ### Related Ticket(s) Closes #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. --- .../data-table/table-header-cell.ts | 8 +- .../src/components/data-table/table.ts | 112 ++++++++++-------- 2 files changed, 72 insertions(+), 48 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 index 33f20c918e7..c1574733010 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 @@ -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) { 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 83d6be3794c..8ebd2898194 100644 --- a/packages/carbon-web-components/src/components/data-table/table.ts +++ b/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,7 +380,6 @@ class CDSTable extends HostListenerMixin(LitElement) { return; } - const rows = [...this._tableRows]; const columns = [...this._tableHeaderRow.children]; const columnIndex = columns.indexOf(target); @@ -342,47 +387,7 @@ class CDSTable extends HostListenerMixin(LitElement) { (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 (