diff --git a/packages/primeng/src/table/table.ts b/packages/primeng/src/table/table.ts index d8e9218a403..5f67c9af1b3 100644 --- a/packages/primeng/src/table/table.ts +++ b/packages/primeng/src/table/table.ts @@ -1176,6 +1176,8 @@ export class Table extends BaseComponent implem id: string = UniqueComponentId(); + private thScopeObserver: MutationObserver | null = null; + styleElement: any; responsiveStyleElement: any; @@ -1353,6 +1355,7 @@ export class Table extends BaseComponent implem if (this.isStateful() && this.resizableColumns) { this.restoreColumnWidths(); } + this.initThScopeObserver(); } } @@ -3198,6 +3201,36 @@ export class Table extends BaseComponent implem this.destroyStyleElement(); this.destroyResponsiveStyle(); + + if (this.thScopeObserver) { + this.thScopeObserver.disconnect(); + this.thScopeObserver = null; + } + } + + private initThScopeObserver() { + const thead = this.tableHeaderViewChild?.nativeElement; + if (!thead) { + return; + } + + thead.querySelectorAll(':scope > tr > th:not([scope])').forEach((th: HTMLElement) => th.setAttribute('scope', 'col')); + + this.thScopeObserver = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + mutation.addedNodes.forEach((node) => { + if (node.nodeType === Node.ELEMENT_NODE) { + const element = node as HTMLElement; + if (element.tagName === 'TH' && !element.hasAttribute('scope')) { + element.setAttribute('scope', 'col'); + } + element.querySelectorAll?.('th:not([scope])').forEach((th: HTMLElement) => th.setAttribute('scope', 'col')); + } + }); + }); + }); + + this.thScopeObserver.observe(thead, { childList: true, subtree: true }); } get dataP() { diff --git a/packages/primeng/src/treetable/treetable.ts b/packages/primeng/src/treetable/treetable.ts index 1c67185a410..10504f94b7a 100755 --- a/packages/primeng/src/treetable/treetable.ts +++ b/packages/primeng/src/treetable/treetable.ts @@ -914,6 +914,8 @@ export class TreeTable extends BaseComponent implements Bl toggleRowIndex: Nullable; + private thScopeObserver: MutationObserver | null = null; + onInit() { if (this.lazy && this.lazyLoadOnInit && !this.virtualScroll) { this.onLazyLoad.emit(this.createLazyLoadMetadata()); @@ -1033,6 +1035,12 @@ export class TreeTable extends BaseComponent implements Bl }); } + onAfterViewInit() { + if (isPlatformBrowser(this.platformId)) { + this.initThScopeObserver(); + } + } + filterService = inject(FilterService); tableService = inject(TreeTableService); @@ -2346,6 +2354,40 @@ export class TreeTable extends BaseComponent implements Bl this.editingCellField = null; this.editingCellData = null; this.initialized = null; + + if (this.thScopeObserver) { + this.thScopeObserver.disconnect(); + this.thScopeObserver = null; + } + } + + private initThScopeObserver() { + const theads = this.el.nativeElement.querySelectorAll(':scope thead'); + if (!theads.length) { + return; + } + + theads.forEach((thead: HTMLElement) => { + thead.querySelectorAll(':scope > tr > th:not([scope])').forEach((th: HTMLElement) => th.setAttribute('scope', 'col')); + }); + + this.thScopeObserver = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + mutation.addedNodes.forEach((node) => { + if (node.nodeType === Node.ELEMENT_NODE) { + const element = node as HTMLElement; + if (element.tagName === 'TH' && !element.hasAttribute('scope')) { + element.setAttribute('scope', 'col'); + } + element.querySelectorAll?.('th:not([scope])').forEach((th: HTMLElement) => th.setAttribute('scope', 'col')); + } + }); + }); + }); + + theads.forEach((thead: HTMLElement) => { + this.thScopeObserver!.observe(thead, { childList: true, subtree: true }); + }); } get dataP() {