How to create expandable table in react? - reactjs

I have been trying for a while to create a table with expandable rows. And in the expandable row, i wanted to display a table with header and row data.
I tried different modules like Material-UI Table and material-table.
I can display a card for e.g., in the expandable row. But not a table with .
Does anyone know how to do this in react js?
thanks in advance

Related

I am using react-table to create a nested row grouping table can anyone guide me how to do it

I have created a table using react-table with row grouping working fine. but i am having problem with creating nested grouping. i am using tanstack react-table can anyone guide me how to do it.
I tried to create a nested grouped row table using react-table. but i am only able to group on single column not nested.

antd+react.js show table rows when clicking on table header

i have a list of rows
and i want to show the content of a row when clicking on it
i did it using Panel and Collapse of antd but i am not really satisfied
and i am looking for a solution using Table: expand table rows when clicking on the header ( i found "expandable" an attribute of antd Table but its related to expandable rows and its not really what i want)

Material UI table rows drag and drop

I'm trying to make my table rows draggable by using react-sortable-hoc. But I can't make it work correctly, can someone explain what am I'm doing wrong? My example: https://codesandbox.io/s/vibrant-cherry-dtkl5?file=/src/App.js

Change Material Table Column According to The Drop down Value In Table row React js

What I Have
I'm using "material-table": "1.67.1" sample image for show what I
need to do
What I Need to Do
I need to change columns in the table when i select dog from the drop
down already in the table using react js. as an example when i select
Dog i need to allow user to edit only two columns and when i select
cat i need to allow user to edit only one column.
Found the answer!
I used editComponent prop in material table with dropdown and then I used it's on change method to do the above task.

Reactjs Table Component

I've been using Fixed Data Table and i want to show/hide rows on row click. I couldn't find anything related to show/hide or sub table in react fixed data table. Is there any way to achieve this or any other table component which will help me achieve this.

Resources