CODEWITHSUNDEEP
reactjsantd
Darkbound
Darkbound

Reputation: 3434

Change hover color on Table Rows in Ant-Design Table

I am trying to set the background color on rows when the mouse is hovering them, I tried a few approaches, one with styled components, styling the table itself:

const StyledTable = styled((props) => <Table {...props} />)`
  & tbody > tr:hover {
    background: rgba(224, 248, 232, 1);
  }
`;

This almost works, when I hover over a row, first I see the color that I have set, and immediatelly after that it changes back to the default, so its transitioning between my light green and the default antd color. I can't even find their color when I inspect the rows in the stylings.

The second way that I tried is with normal css and a class name:

Where the css for the class is:

.custom-row-hover:hover {
  background-color: rgba(224, 248, 232, 1);
}

And the result is the same, again, first my color and then transitions to the default one.

Upvotes: 10

Views: 19092

Answers (3)

Ammad Ahmed
Ammad Ahmed

Reputation: 19

This can be done by changing the style of the row and cell of the table

<Table
        dataSource={rowsWithButtonAction}
        columns={columns.map((col) => ({
          ...col,
          sorter: col.sorter || false, // Add sorter property to enable sorting
        }))}
        pagination={false}
        onRow={onRow}
        **rowClassName={rowClassName}**
        onChange={handlePageChange}
        style={{
          marginBottom: "10px",
        }}
        scroll={{ y: `calc(100vh - 300px)` }}
        loading={loading}
      />

First give rowClassName prop to the table component

And in that, you should assign your className to that row I have assigned selected-row

 const rowClassName = (record) => {
return record.userId === "id you selected"
  ? `selected-row ${externalClass ? "custom-pointer" : ""}` //concatenating selected-row with custom-pointer
  : `${externalClass ? "custom-pointer" : ""}`;

};

I am changing the background color of selected-row

 .selected-row {
  background-color: #ecf2f4;
}
.selected-row:hover td {
  background-color: #ecf2f4 !important;
}

The Antd tables apply the hovered bg-color to td as well, so I have changed the styling of td along with the whole row.

I have done it for a specifically selected row, you can do it for each row as well

Hope this works for you! :)

Upvotes: 1

Akash Bhatt
Akash Bhatt

Reputation: 11

in plain Css you must add td after tr:hover

.custom-row-hover:hover td {background: rgba(224, 248, 232, 1)!important;}

Upvotes: 1

Junaid Faryad
Junaid Faryad

Reputation: 1707

Seems like the background color is applied to td element in antd table and also you need to increase the specificity by using the && operator. The updated code should look something like this for the styledTable component.

const StyledTable = styled((props) => <Table {...props} />)`
  && tbody > tr:hover > td {
    background: rgba(224, 248, 232, 1);
  }
`

To test the above, I forked the antd codesandbox table demo and it seems to be working.

Upvotes: 11

Related Questions