Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 51 additions & 1 deletion packages/optimus-ui/src/table/table.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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>;
Expand Down
8 changes: 7 additions & 1 deletion packages/optimus-ui/src/table/table.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down