Passing row specific data to expandableRowsComponent

Question

I have created a Table using react-data-table-component and now I would like to make the table rows expandable such that when I expand a row it displays details specific to that row something exactly like Material-UI Collapsible.

I read the react-data-table-component API documentation and its possible to have expandable rows by setting expandableRows to true and assigning a component to expandableRowsComponent. But how can I pass data to expandableRowsComponent such that if I expand row 1 I get data lets say "This is row 1", for row 2 I'll get "This is row 2" and so on...

Any help or guidance would be much appreciated. Thanks!

Answer 1

I went through the react-data-table-component author's github code and under stories I was able to find the relevant code which helped in figuring out exactly what I was looking for! In case someone is interested here's the example code link: DataTable

Answer 2

Data object will be automatically passed in props for each row.

for example:

<DataTable data={yourData} columns={yourColumns} expandableRows={true} keyField="yourId" expandableRowsComponent={ExpandableComponent} />

and your expandable component will receive row data inside the prop

const ExpandableComponent = props => <div>{props?.data?.title}</div>