Primeng: DataTable column width not effective when headerColumnGroup has more than 1 header row (again)

[harogaston]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please fork the plunkr below and create a case demonstrating your bug report. Issues without a plunkr have much less possibility to be reviewed.

http://plnkr.co/edit/qECgsdbhv1rmT3eKx5bD?p=preview

Current behavior
If you have more than one row inside a headerColumnGroup, column widths of second, third, etc rows in the header are ignored.

Expected behavior
If a datatable with a headerColumnGroup has 2 or more p-rows in the header, column widths are respected allowing to set row headers with required % or px.

Minimal reproduction of the problem with instructions
Example in Plunker.
<p-dataTable [value]=""> <p-headerColumnGroup> <p-row> <p-column header="A" rowspan="2" styleClass="text-left" [style]="{'width':'10%'}"></p-column> <p-column header="B" colspan="2"></p-column> </p-row> <p-row> <p-column header="B1" styleClass="text-left" [style]="{'width':'25%'}"></p-column> <p-column header="B2" styleClass="text-left"></p-column> </p-row> </p-headerColumnGroup> <p-column field=""></p-column> <p-column field=""></p-column> <p-column field=""></p-column> </p-dataTable>

What is the motivation / use case for changing the behavior?
Need to set individual widths for "child" column headers.

Please tell us about your environment:
Windows 10

• Angular version:
  4.2.0

• PrimeNG version:
  4.1.0-rc.2

• Browser:
  Chrome 58.0.3029.110 (64-bit)

[cagataycivici]

Try;

<p-dataTable [tableStyle]={'table-layout':'auto'}

[ghost]

+1

[harogaston]

Try;

<p-dataTable [tableStyle]={'table-layout':'auto'}

Great support! Suggesting something that doesn't work and closing the issue. Way to go! That doesn't make the problem go away you know.

[jllodra]

I was having this problem and found this issue. The same happens for p-table.

As we know on tables, table-layout: fixed makes impossible to set explicit widths for columns
in tables with 2 or more rows in <thead>.

For the same reason, resizableColumns won't work either in this scenario (it will only work in first-level headers).

And, switching to table-layout: auto is not a solution because it defeats the purpose of the fixed layout (in fixed layout, the content does not dictate the layout. We might want to set the table column width less than its content).

I think the solution can be using <colgroup> and <col>, adding them just before the <thead>. Colgroup and col let us set the width in pixels for any column. The resize could work by changing the width in the col elements instead of changing the width of the th elements. I have made some raw tests and it seems to be working. Would you consider trying this approach and implementing in the p-table component?