CODEWITHSUNDEEP
reactjshoverantd
Adnan
Adnan

Reputation: 63

AntD table - change cell color on mouse hover

I'm trying to change background color of the cell in antD table using onCell property and onMouseOver function, but without success.

onCell: (record, rowIndex) => {
  return {
    onMouseOver: () => {
      console.log("record, row", record, rowIndex);
      return {
        props: {
          style: { background: "yellow", fontWeight: "bold" }
        }
      };
    }
  };
}

Working sandbox example: demo

Any help would be highly appreciated.

Upvotes: 0

Views: 1305

Answers (1)

John Li
John Li

Reputation: 7447

If the goal is to add a custom background on hover to the cells of a certain column, perhaps a simple solution would be adding this as a custom class with onCell.

Forked demo with modification: codesandbox

onCell: (record, rowIndex) => {
  return {
    className: "custom",
  };
};

In CSS, define :hover styles with a higher specificity so that it overrides default style for selected cells:

.ant-table-cell.ant-table-cell-row-hover.custom:hover {
  background-color: hotpink;
  color: white;
}

Upvotes: 1

Related Questions