ant-design icon indicating copy to clipboard operation
ant-design copied to clipboard

Table property rowClassName not working as expected on fixed columns after V5

Open balboFK opened this issue 3 years ago • 6 comments

Reproduction link

Edit on CodeSandbox

Steps to reproduce

Click on a row and look at the "Age" column, it should have its background colored as red and not change the background from the "Full Name" column

What is expected?

In Antd v4 you could pass styles like I did on the example and it would correctly apply to the "fixed" columns and not overwrite the styles passed directly on the columns with "onCell" property.

What is actually happening?

Styles are not applying to fixed rows unless you use "!important", but using "!important" also changes the color of the columns that use the property "onCell"

Environment Info
antd 5.0.3
React ^18.0.0
System Windows 10
Browser Brave

Using "!important" is not a way of fixing it, since it changes the coloring of the columns that use the property "onCell" to change the backgroud. For row selection also, should be easier to disable the hover, as you can see on the example, unless you apply a style over the hover property, it changes the color back to white on hover.

balboFK avatar Dec 01 '22 11:12 balboFK

You may look for issues:

  1. 59% #19091
  2. 53% #36946
  3. 51% #36959

🤖 By issues-similarity-analysis

github-actions[bot] avatar Dec 01 '22 11:12 github-actions[bot]

let me try~

Yuiai01 avatar Dec 02 '22 01:12 Yuiai01

Hi, I noticed that v5 added a style to a fixed column that caused the rowClassName property to not work as expected. image

Yuiai01 avatar Dec 03 '22 07:12 Yuiai01

We could solve the styling problem here by unfixing the columns, but I think we could add a new feature in v5 that controls whether or not we want to use unfixed column styles via a field.

Yuiai01 avatar Dec 03 '22 07:12 Yuiai01

Perhaps the css scheme makes rowClassName less prioritized

MuxinFeng avatar Dec 03 '22 12:12 MuxinFeng

We could solve the styling problem here by unfixing the columns, but I think we could add a new feature in v5 that controls whether or not we want to use unfixed column styles via a field.

Yes, that solves the problem, but for smaller screens i can't unfix the columns, sadly. Your point seems like a good idea, i think we should either have control of that, or let the styling work as before even with the new css scheme.

balboFK avatar Dec 05 '22 10:12 balboFK

Hello again! Can we get some light on this one by one of the maiteners? @li-jia-nan @MadCcc @afc163 ?

balboFK avatar Mar 16 '23 12:03 balboFK

How about https://codesandbox.io/s/fixed-columns-and-header-antd-5-0-3-forked-eb639p?file=/index.css

afc163 avatar Mar 16 '23 12:03 afc163

I tried reproducing it on my project which uses SASS and it didnt really work at all, but I think that might be scss class handling fault, on this case with pure CSS it worked fine. I switched the sass to css and it worked fine.

balboFK avatar Mar 16 '23 14:03 balboFK