diff --git a/packages/optimus-ui/src/table/table.spec.ts b/packages/optimus-ui/src/table/table.spec.ts
index 53eff94d4f..18d3b0ba7c 100644
--- a/packages/optimus-ui/src/table/table.spec.ts
+++ b/packages/optimus-ui/src/table/table.spec.ts
@@ -262,9 +262,42 @@ describe('Table', () => {
];
}
+ @Component({
+ standalone: false,
+ template: `
+
+
+
+ | Product |
+ Inventory |
+
+
+ | Name |
+ Price |
+ Category |
+
+
+
+
+ | {{ product.name }} |
+ {{ product.price }} |
+ {{ product.category }} |
+
+
+
+ `
+ })
+ class TestGroupedResizableHeaderComponent {
+ products = [
+ { id: '1001', name: 'Gaming Laptop', price: 1299.99, category: 'Electronics' },
+ { id: '1002', name: 'Wireless Mouse', price: 29.99, category: 'Accessories' },
+ { id: '1003', name: 'Mechanical Keyboard', price: 149.99, category: 'Accessories' }
+ ];
+ }
+
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [Table, TestBasicTableComponent, TestSelectionTableComponent, TestSortingTableComponent, TestFilteringTableComponent, TestVirtualScrollTableComponent, TestLazyLoadTableComponent, TestTemplatesTableComponent],
+ declarations: [Table, TestBasicTableComponent, TestSelectionTableComponent, TestSortingTableComponent, TestGroupedResizableHeaderComponent, TestFilteringTableComponent, TestVirtualScrollTableComponent, TestLazyLoadTableComponent, TestTemplatesTableComponent],
imports: [CommonModule, FormsModule, TableModule, SharedModule, Select],
providers: [TableService, provideZonelessChangeDetection()]
}).compileComponents();
@@ -365,6 +398,23 @@ describe('Table', () => {
});
});
+ describe('Column Resize', () => {
+ it('should measure the active resize header row when grouped headers are used', async () => {
+ const testFixture = TestBed.createComponent(TestGroupedResizableHeaderComponent);
+ await testFixture.whenStable();
+ testFixture.detectChanges();
+
+ const tableInstance = testFixture.debugElement.query(By.directive(Table)).componentInstance as Table;
+ const actualHeaderCells = testFixture.nativeElement.querySelectorAll('thead tr:last-child th');
+ const allHeaderCells = testFixture.nativeElement.querySelectorAll('thead th');
+
+ (tableInstance as any).resizeColumnElement = actualHeaderCells[1];
+
+ expect(allHeaderCells.length).toBe(5);
+ expect((tableInstance as any)._totalTableWidth().length).toBe(3);
+ });
+ });
+
describe('Filtering Functionality', () => {
let testComponent: TestFilteringTableComponent;
let testFixture: ComponentFixture;
diff --git a/packages/optimus-ui/src/table/table.ts b/packages/optimus-ui/src/table/table.ts
index 5253e6747f..e90a9ed181 100644
--- a/packages/optimus-ui/src/table/table.ts
+++ b/packages/optimus-ui/src/table/table.ts
@@ -2683,7 +2683,13 @@ export class Table extends BaseComponent implem
private _totalTableWidth(): number[] {
let widths = [];
const tableHead = DomHandler.findSingle(this.el.nativeElement, '[data-pc-section="thead"]');
- let headers = DomHandler.find(tableHead, 'tr > th');
+ const resizeHeaderRow = this.resizeColumnElement?.parentElement;
+ let headers = resizeHeaderRow ? DomHandler.find(resizeHeaderRow, 'th') : DomHandler.find(tableHead, 'tr:last-child > th');
+
+ if (!headers.length) {
+ headers = DomHandler.find(tableHead, 'tr > th');
+ }
+
headers.forEach((header) => (widths as any[]).push(DomHandler.getOuterWidth(header)));
return widths;