Ant Design Table expanded change CSS class | React

4
votes

I'm using ant design in my project. There I'm using DataTable.

It has row expand feature.

Problem

When user expand the child row, the parent row background color needs to be changed or else needs to add css class for that row.

Fiddle Here

I have created function onExpand of the table.

  onExpand = (expanded, record) => {
    alert(expanded);
    console.log('onExpand', expanded, record);   }

TIA

1
htmlcssreactjsdatatablesantd

1 Answers

3
votes

You have to use the onRow property to add a custom css class for each expanded row. First of all you need distinguish the expanded rows from the collapsed one. Therefore you have to store the keys of the expanded rows in the state to assign the css class to the right rows. For that purpose you have to use expandedRowKeys and onExpand properties too.

You can check the working example overhere:

https://codesandbox.io/s/2xyy8mqwoj