primefaces / primefaces/primereact

DataTable - selection: row colour doesn't look nice for frozen columns

Open
#3,230 3 comments 0 reactions 1 assignee View on GitHub

@mertsincan is already working on this.

Since Sep 2, 2022.

Component: Theme Type: Bug
Dominant language
CSS
Stars
8.3k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

I think there might be a bug with the "selection" feature of the data table. It automatically changes the colour of the chosen columns to a transparent background which doesn't look nice with frozen columns. Additionally, it only applies the colour until the point the frozen columns start from the original view. Is this an issue from my side or an actual bug ?

Capture d’écran 2022-09-01 à 16 20 19 Capture d’écran 2022-09-01 à 16 20 23
Reproducer

https://codesandbox.io/s/summer-cloud-zi7eep?file=/src/demo/DataTableScrollDemo.js

PrimeReact version

8.2.0

React version

18.x

Language

ES6

Build / Runtime

Create React App (CRA)

Browser(s)

Brave

Steps to reproduce the behavior
  1. Create a data table with cell edit and enough columns to having to scroll horizontally
  2. Add one or more frozen columns at the right side of the table
  3. Add the selection feature from the data table
  4. Select a row
  5. See the colour of the row being changed to transparent blue up to the frozen columns limit
Expected behavior

Frozen columns colour:

  • Either the frozen columns remain the standard colour and do not get the new transparent colour.
  • Either choose a colour which is not transparent

Frozen colour limit:

  • Colour the entire row in the chosen colour and not only until the frozen line view limit (when scrolling this doesn't look nice)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.