Table:- In the Table row grouping(rowGroupMode="rowspan") with selectionMode="multiple" , On selecting the second/any other row (except the first row) of the group, the Representative column is not highlighting.

[megharajak-05]

Describe the bug

Table:- In the Table row grouping(rowGroupMode="rowspan") with selectionMode="multiple" and [metaKeySelection]="true" , On selecting the second/any other row (except the first row) of the group, the Representative column is not highlighting. And on Representative column selection, the respective all rows are not highlighting.

Environment

"primeng": "16.1.0",

https://stackblitz.com/edit/getneq?file=src%2Fapp%2Fdemo%2Ftable-rowspan-grouping-demo.html,src%2Fapp%2Fdemo%2Ftable-rowspan-grouping-demo.ts,package.json

Reproducer

No response

Angular version

16.0.0

PrimeNG version

16.1.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.16.0

Browser(s)

Chrome, WebView2

Steps to reproduce the behavior

1. Select first row on any group, the Representative column is highlighting.
2. Select second row/any other row (except the first row) of that group, the Representative column is not highlighting.
3. Select Representative column, all rows of that group are not getting highlighted.

Expected behavior

1. On Selecting any row of the group, the Representative column should be highlighted.
2. On Selecting Representative column, all rows of that group should be getting highlighted.

[cetincakiroglu]

Hi,

The situation you're referring to actually stems from the HTML table itself, not a bug. Take a look at the first row, due to the rowspan of the first element in the table being 7 and this element being only within the tags of the first row, the style is applied only to the row containing this element. The same applies to hover and focus states. If you wish to change this, you can use custom CSS. The example below is a refactored version of the example you provided, working as you desire.

https://stackblitz.com/edit/getneq-st2ajj?file=src%2Fapp%2Fdemo%2Ftable-rowspan-grouping-demo.html,src%2Fapp%2Fdemo%2Ftable-rowspan-grouping-demo.ts