CODEWITHSUNDEEP
reactjsantd
llevar
llevar

Reputation: 785

Antd table expand row and place textarea inside

I am trying to implement row editing with Antd where when I click on the Edit link the row expands and has a textarea inside the user can type into. I haven't been able to figure out how to trigger row expansion (didn't see any onclick event handlers on the + sign) nor how to get access to the expanded row element to slide a form field in there in a non hacky way.

This is the current code - https://gist.github.com/llevar/8f9a68bcc15ab0e37defb14a5126c5ad. The goal is to have the column "Configuration" with JSON in it end up in a text area upon clicking Edit.

Thanks in advance.

Upvotes: 0

Views: 2408

Answers (1)

Yichz
Yichz

Reputation: 9681

Did you try onExpandedRowsChange props and onExpand they give you access to the expanded row callback and expanded row change.

edit: I haven't try this, but I think you should be able to programatically expand rows with expandedRowKeys and state. and use the expandedRowRender to conditionally render "view mode" and "edit mode(text area)", also you can add a save button to save the textarea values and turn it back to "view mode"

onExpand is trigger when you press the + icon (or expand the row via rowClick)

Upvotes: 1

Related Questions