How can i specific expanded data row in react-table?

1944 views reactjs
-1

From this document example.

https://react-table.js.org/#/story/custom-expander-position

Result from document example :

  1. when i click row0 data that expanded under row0 will show Hello
  2. when i click row1 data that expanded under row1 will show Hello

about props SubComponent in ReactTable. when a row is expanded that will show same data every row but I want to show data that specific by rows

Result that I want to do :

  1. when i click row0 data that expanded under row0 will show Hello 0
  2. when i click row1 data that expanded under row1 will show Hello 1

How can I do this with react-table ?

answered question

1 Answer

7

You can try this for you Subcomponent:

SubComponent={(v) => <div style={{padding: '10px'}}>Hello {v.row._index}</div>}

sandbox: https://codesandbox.io/s/o708980o7q

v is the element, and you get the index of the row to display. Hope this helps.

posted this

Have an answer?

JD

Please login first before posting an answer.