Table RowGroup

[promodel]

Hey all,

So I have a requirement that says I should have the ability to select a row within a what would be Known as Row Grouping. For reference I'm referring to the ability within the p-table component to group data into sub rows.

The Problem:
When selecting a single item from an expanded RowGroup the entire grouping of data is highlighted (indicating more than one visual row is selected).
Should this behavior be expected? As when the selection of an expanded data section is done there appears to only be one item selected through two-way data binding.

Background:
- Assume, the data being passed is sorted by the dataKey required.
- Assume, rowGroupMetaData is an object as it's described in the example (https://www.primefaces.org/primeng/#/table/rowgroup).
- Assume, getCellData is simply a function that parses the columns inputs into a user displayable format.

I have the following HTML

Code: Select all

<p-table #table [autoLayout]="autoLayout" [columns]="selectedColumns" [dataKey]="dataKey" [exportFilename]="exportFileName"
    [paginator]="showPaginator" [(selection)]="selectedItem" [selectionMode]="selectionMode" [rows]="rowsPerPage"
    [value]="filteredData">
    
    ...

<!-- begin: row table layout -->
    <ng-template>
        <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex" let-expanded="expanded" let-columns="columns">
            <tr class="ui-widget-header" *ngIf="rowGroupMetaData[rowData[dataKey]].index === rowIndex">
                <td [attr.colspan]="columns.length">
                    <a href="#" [pRowToggler]="rowData">
                        <i [ngClass]="expanded ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
                        <span>{{rowData[dataKey]}}</span>
                        <span class="badge badge-info ml-2">{{ rowGroupMetaData[rowData[dataKey]].size
                            }}</span>
                    </a>
                </td>
            </tr>
        </ng-template>
        
        <!-- begin: possibly the offending bit --> 
        <ng-template pTemplate="rowexpansion" let-subRow let-index="rowIndex">
            <tr [pSelectableRow]="subRow" [pSelectableRowIndex]="index">
        <!-- end: possibly the offending bit --> 
        
                <td *ngFor="let col of columns" [ngSwitch]="col.type">
                   <!-- begin: implementation detail. IGNORE. -->
                    <div *ngSwitchCase="gridColumnTypes.Boolean" class="text-center">
                        <i *ngIf="getCellData(subRow, col)" class="fa fa-check" aria-hidden="true"></i>
                    </div>
                    <div *ngSwitchCase="gridColumnTypes.Date">
                        {{ getCellData(subRow, col.field) | dodDate }}
                    </div>
                    <div *ngSwitchCase="gridColumnTypes.DateTime">
                        {{ getCellData(subRow, col.field) | dodDateTime }}
                    </div>
                    <div *ngSwitchCase="gridColumnTypes.Number" class="text-center">
                        {{ getCellData(subRow, col.field) }}
                    </div>
                    <div *ngSwitchDefault>
                        {{ getCellData(subRow, col.field) }}
                    </div>
                    <!-- end: implementation detail. IGNORE. -->
                </td>
            </tr>
        </ng-template>
    </ng-template>
    <!-- end: row table layout -->

[yigitfindikli]

Hello,
Could you please create a ticket at GitHub with stackblitz ?

[eyassud]

Did you find a resolution or workaround for this issue?

[eyassud]

Hello,
Could you please create a ticket at GitHub with stackblitz ?

Here is a sample that demonstrates the issue: https://stackblitz.com/edit/tablewithbadselect

[ANAND249]

Hello @promodel did you resolved the above issue, have you created ticket Even I am having same issue . @PrimeFaces team can u have your attention on it and suggest solution for the above issue.