CODEWITHSUNDEEP
htmlcssreactjsdatatablesantd
Maria Jeysingh Anbu
Maria Jeysingh Anbu

Reputation: 3312

Ant Design Table expanded change CSS class | React

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

Upvotes: 5

Views: 7966

Answers (1)

sultan
sultan

Reputation: 4729

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

Upvotes: 5

Related Questions