DataTable: Frozen columns have transparent background on the Arya theme

[rschyboll]

Describe the bug

The DataTable component, has an incorrect style on the Arya theme, when using it with frozen columns and selectable rows.
When freezing a column, and scrolling the datatable, so that some column is under the frozen one, the background of the frozen column will become partially transparent on selection or mouse hover, showing the data of the column under it.

It also seems, that the outline is also broken, if it's neccesary i can create a new issue, but this seems to be related, so i'm currently putting it only here.

Reproducer

https://codesandbox.io/s/silly-minsky-0oe4go?file=/src/demo/DataTableScrollDemo.js

PrimeReact version

8.7.2

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome 107

Steps to reproduce the behavior

1. Create a scrollable datatable with selectable rows and frozen columns
2. Scroll the datatable so that some column are under the frozen ones
3. Select a row or hover over it
4. The data of the column under the frozen one will be visible

Expected behavior

The frozen column should not be transparent, when selected or hovered.

I fixed it by setting the the background color myself, with the following selector:

.p-highlight.p-selectable-row {
  .p-frozen-column {
    background-color: var(--table-row-select-color);
  }
}

[melloware]

Actually I think this is the more accurate selector? You only want this when you frozen is highlighted.

.p-datatable .p-datatable-tbody > tr.p-highlight > td.p-frozen-column {
  background-color: var(--table-row-select-color);
}

[Dav3rs]

These workarounds doesn't work for stripedRows. One row will be transparent, and the next one will not.

[Dav3rs]

Also maybe related to this... I have a use case in what my table looses the gridLines with frozen columns

Looking into this issue I found that for dark theme, with stripedRows enabled to cause the bug, the gridlines are behind the frozen columns, completely imperceptible for light theme

[Dav3rs]

This happens because I'm applying the workaround for #3091 (Datatable: scrollable property loses column alignment)
Disabling it this will be my table

Primereact and primevue tables layout need a refactor. Don't know about primeng but I think that @cagataycivici was doing refactors there too.

https://twitter.com/cagataycivici/status/1581004789277917185?s=20&t=BMfkYOt5iSw2XPGwWT3XVQ

[mertsincan]

Hi,

I think this issue has already been fixed in 9.2.0. Please try it.
https://primereact.org/datatable/#frozen_columns

Best Regards,

[melloware]

Confirmed its fixed in 9.2.0