From 4ec37ed202ed30d2841c5fe1062690b00a2cefd4 Mon Sep 17 00:00:00 2001
From: xonaib <xonaib@users.noreply.github.com>
Date: Fri, 24 Jul 2026 15:54:53 +0500
Subject: [PATCH] fix(table): resize grouped header columns correctly

---
 packages/optimus-ui/src/table/table.spec.ts | 52 ++++++++++++++++++++-
 packages/optimus-ui/src/table/table.ts      |  8 +++-
 2 files changed, 58 insertions(+), 2 deletions(-)

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: `
+            <p-table [value]="products" [resizableColumns]="true" columnResizeMode="expand" [scrollable]="true">
+                <ng-template #header>
+                    <tr>
+                        <th colspan="2">Product</th>
+                        <th>Inventory</th>
+                    </tr>
+                    <tr>
+                        <th pResizableColumn>Name</th>
+                        <th pResizableColumn>Price</th>
+                        <th pResizableColumn>Category</th>
+                    </tr>
+                </ng-template>
+                <ng-template #body let-product>
+                    <tr>
+                        <td>{{ product.name }}</td>
+                        <td>{{ product.price }}</td>
+                        <td>{{ product.category }}</td>
+                    </tr>
+                </ng-template>
+            </p-table>
+        `
+    })
+    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<TestFilteringTableComponent>;
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<RowData = any> extends BaseComponent<TablePassThrough> 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;