p-Table: resizing a scrollable table resizes the expanded row

[Quacck]

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)
https://stackblitz.com/edit/primeng-tablerowexpansion-demo-te1jhb?file=src%2Fapp%2Fapp.component.html

Current behavior
Resizing a column in a table that has an expandable row, resizes the expanded row to the width of the first column of the parent-table.

Expected behavior
The expanded row should have the width of the whole table.

Minimal reproduction of the problem with instructions

• Go to the above stackblitz
• expand the first row. Notice how the width is still the same as the whole table.
• Also notice the column widths of the child-table
• Grab the resizer from 'Name', drag it to the left of 'Price'
• The expand row is now wrongly the size of the first column
• Scroll through the expanded row. The widths of the child-table's columns are also wrongly adjusted (they match the widths of the parent-table!)

What is the motivation / use case for changing the behavior?
We want to resize tables that have expanded rows. Resizing the parent table should not bleed into the child table.

Please tell us about your environment:

Angular version: 12

PrimeNG version: 12.1.0

Browser: Chrome Version 92.0.4515.159

Language: TypeScript

Node (for AoT issues): node --version = v14.15.4

[MuhSchaf]

I have this problem too.
I found out, that on resize, the <th> and <td> -elements get an id: #pr_id_1.
The expanded row tables recieve the same id's. Therefore i assume that the resize-event uses the assigned id's.

I want to add, that you can slightly improve this behaviour, if you add flex: 1 1 0 !important; as styling to your expanded row <td>.

<td colspan="7" style="background-color: red; color: black; overflow:scroll" style="flex: 1 1 0 !important">

[MuhSchaf]

So, after some research, i found the culprit.

Inside the table.ts - file on line 1923 and 1924 the column-widths get set:

let headers = DomHandler.find(this.containerViewChild.nativeElement, '.p-datatable-thead > tr > th');
headers.forEach(header => widths.push(DomHandler.getOuterWidth(header)));

The DomHandler find - function searches inside the parent table for ALL tableHeader.
In @Quacck 's case (and in mine too), the DomHandler finds the tableheader for the parent and child table.
Therefore he adds the #pr_id_1 to every tableCell and changes therefore every width of the nth-childs equivalent to this id.

Solution Idea:

const tableHead = DomHandler.findSingle(this.containerViewChild.nativeElement, '.p-datatable-thead');
let headers = DomHandler.find(tableHead, 'tr > th');

In this case, the DomHandler will only find the header for the parent table.

Be blessed

[sandipchitale]

The rule like this:

#pr_id_1-table > .p-datatable-tbody > tr > td:nth-child(2)

seems to make an assumption that all rows of header, body and rowexpansion templates have same column structure. But this may not be true for the rowexpansion template. For expansion rows we typically use:

<tr}>
  <td style="width: 3rem"><!-- whitespace in first column below the expansion icon --></td>
  <td colspan="N-1">
  ... expansion data which itself could be a table.
  </td>
<tr>

This needs to be fixed differently. At minimum rule should be (note the :not([colspan])):

#pr_id_1-table > .p-datatable-tbody > tr > td:not([colspan]):nth-child(2)

Hope the above makes sense.