RowSpan Grouping does not work on DataTable with virtualScroll feature

[EzaBlade]

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

https://stackblitz.com/github/primefaces/primeng-issue-template

Current behavior

When the property [virtualScroll] is set to 'true', and rowGroupMode is set to ''rowspan' the rowgroup property on the table is neither set to true or false and so the method of hiding the cell data as shown in your example does nothing and all the cells for the relevant column are empty. If [virtualScroll] is set to 'false' row grouping works as demonstrated:-

Extract below from example at https://www.primefaces.org/primeng/v12/#/table/rowgroup.

<ng-template pTemplate="body" let-customer let-rowIndex="rowIndex" let-rowgroup="rowgroup" let-rowspan="rowspan">
            <tr>
                <td>{{rowIndex}}</td>
                <td *ngIf="rowgroup" [attr.rowspan]="rowspan">
                    <img [alt]="customer.representative.name" src="assets/showcase/images/demo/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
                    <span class="p-text-bold p-ml-2">{{customer.representative.name}}</span>
                </td>
    ' 
    '
    '
 </ng-template>

Expected behavior

Row grouping should work together with virtual scrolling

Minimal reproduction of the problem with instructions

Follow the published example

What is the motivation / use case for changing the behavior?

This is a bug, not a behaviour change; one functionality is broken whilst trying to use another - I want to use both and it should work.

Please tell us about your environment:
Windows 10

• Angular version: 12

• PrimeNG version: 12.2.2

• Browser: Chrome 95.0.4638.69 (Official Build) (64-bit)

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[EzaBlade]

Is anything happening at all with this issue?

[mcrtricolor]

Same issue here. Sorry if I wrote in both topics, feel free to delete one.

[EzaBlade]

This issue is important for those users who want to have virtual scrolling and not pagination. Without a fix scrolling is required on the page which makes a nice application 'clunky'

It seems virtual scrolling may have several problems - I have come across a new one today with virtual scroll + row expand and I am going to raise a new issue for it.

Is this issue being reviewed for action.

[EzaBlade]

Grouping of the table headers using rowspan is also affected by this issue. I had a table with grouped column headers and pagination. Then I had to change to virtual scrolling for the user's preference and now it is broken.

Before

After - the two header rows are completely separate with no grouping

Also notice that the controls in my filtering row have been affected too

Is anything at all going to be done about this - I'm starting too see a pattern where virtualScrolling is being flagged up as a problem more than a few times.

[mohammed-b]

Same error for me. Even with [scrollable]="true"
Row grouping is working fine, but once we add the [scrollable]="true", we have the scroll but the grouping is broken and we have weired result

[john8329]

Same, row grouping is practically infeasible with large datasets. We had to resort to a custom table.

[AblHoang]

Virtual scrolling does not work with RowGrouping 'subheader' eaither. The 'subheader' rows nodes are totally missing if enabling virtual scrolling.

[mcrtricolor]

If they are going back to the primeng virtual scrolling instead of the angular cdk on version 14, does it also means that this bug will be fixed as well?

[TheParad0X]

I also need this feature. VirtualScroll with RowExpand!

[mcrtricolor]

This is still an issue in primeng 14, if you use virtualScroll rowspan doesn't work.

[JealousyM]

+.I also need this feature. VirtualScroll with RowGrouping

[mertsincan]

Hi,

Currently, only RowSpan Grouping + VirtualScroll feature is supported in the new version. Others are not supported due to technical limitations.

Exp;

<div class="card">
        <h5>RowSpan Grouping</h5>
        <p-table [value]="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortField="representative.name" sortMode="single"  [tableStyle]="{'min-width': '75rem'}" [scrollable]="true" scrollHeight="250px" [virtualScroll]="true" [virtualScrollItemSize]="70">
            <ng-template pTemplate="header">
                <tr>
                    <th style="width:3rem">#</th>
                    <th>Representative</th>
                    <th>Name</th>
                    <th>Country</th>
                    <th>Company</th>
                    <th>Status</th>
                    <th>Date</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-customer let-rowIndex="rowIndex" let-rowgroup="rowgroup" let-rowspan="rowspan">
                <tr style="height:70px">
                    <td>{{rowIndex}}</td>
                    <td *ngIf="rowgroup" [attr.rowspan]="rowspan">
                        <img [alt]="customer.representative.name" src="assets/showcase/images/demo/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
                        <span class="font-bold ml-2">{{customer.representative.name}}</span>
                    </td>
                    <td>
                        {{customer.name}}
                    </td>
                    <td>
                        <img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
                        <span class="image-text">{{customer.country.name}}</span>
                    </td>
                    <td>
                        {{customer.company}}
                    </td>
                    <td>
                        <span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
                    </td>
                    <td>
                        {{customer.date}}
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </div>

[Curtis-Saavedra]

Hi,
I'm having this issue in 14.2.3 which version is this fixed in? Is there any workaround for this issue aside from disabling virtual scroll?