Have used Expander in one column of React-table. On expanding a different row of table i want to display different subComponents. My subComponent has another react-table. So the issue is when two rows are expanded , the subComponent react table gets the data source acc to the 2nd row and thus it updates the same in the 1st row subComponent as well. I want to have different data sources according to the row.
Also tell how to give Column accessor value with the Expander button in the same cell.
I have given the data dynamically to the subComponent react table that is doin fine.
you have to use React.CreateElement and pass your SubComponent And Separete Store (if exists)
for more information about creating dynamic component see React Site
Related
I am using the Table component from MUI version 4 that renders a table based on the value of header and data which are passed as props to the TableWrapper component.
The data also consists of an expanded menu which is hidden on initial load and when clicked, it toggles the child row.
The child row data is also the same as that of the parent one(in terms of "key"), but the alignment of the child row with respect to the header is not correct.
Tried solutions:
adjusting the margin and paddings on the expanded child row.
Add the same keys on the expanded data
Following is the codesandbox link : https://codesandbox.io/s/cocky-wing-1030gq?file=/src/App.js
I am facing an issue in the agGridReact table where I need to use multiple expand buttons in one column with different data to render. Is there any way to use multiple expand calls and show different data in the next row.
I am using a react table. I want to map through an api and if the data has changed in a cell I want to assign if a new color. I have never worked with react tables so I am not sure how to go about doing this. I want to target the individual cells .
It need to also in in a separate component and I need to just pass to the columns the component eg. Cell: ... Will the work??
I am trying to build a table using react-table libraries in which I want when I click on a custom button that I have already created, the state of that particular row updates and it also update the row with newly received data. Help me please, I tried all possible ways.
I have to create a table with different type of fields like text box , drop-down , toggle button etc.
For eg below fields for 20 rows
Name - textbox
Gender - dropdown
I was thinking of creating a redux form and embed it into a table and repeat it for each rows. Also want to bind data per row.
But not sure how to progress with it. Please help and suggest any other way. Due to certain restriction I could not use available components..so I have to create my own component