DataTable: "Striped" style at odd rows overrides selection ":hover" style

omelched commented 4 months ago

Describe the bug

Odd DataTable rows continue to have striped background despite being hovered.

DataTable component has props stripedRows and v-model:selection="..." selectionMode="single" dataKey="..."

Reproducer

https://stackblitz.com/edit/zfdzzm-yp3mek?file=src%2FApp.vue

PrimeVue version

4.0.0-rc.2

Vue version

3.x

Language

ES6

Build / Runtime

Vite

Browser(s)

Chrome 125.0.6422.142

Steps to reproduce the behavior

Add DataTable component with stripedRows and selection logic.
Hover cursor on even rows - row background changes as intended.
Hover curser on odd (striped) rows - row background does not change.

Expected behavior

Row background changes at odd (striped) rows if DataTable has selection mode.

BrianCurrie commented 1 month ago

Having the same issue on v4.0.5 and firefox. Any updates on this or workaround?

klsl2008 commented 1 month ago

I encounter this on v4.0.5 too. To work around this, I use PT to add tailwind class like below:

<DataTable :value="records" size="small" showGridlines stripedRows
          :pt="{
            bodyRow: 'hover:bg-surface-100'
          }">
...
</DataTable>

moduly-solutions-slechner commented 4 weeks ago

Have the same issue. Think I'll just wait till this get fixed.

djhoward01 commented 1 week ago

I haven't researched the root cause but here's my current work-around in a

primefaces / primevue