React Table - How to create a nested sub table

React Table - How to create a nested sub table

Jan 05, 2021 - ReactJS

React Table Series - Table of Contents



In our previous article, we learned how to add a record count bar to a React Table. In this continuation article, we will show you how to create a nested sub table in the table that we created here, React Table - How to add a Record Count
Go to the Download Source section of the above tutorial and once you get access to the source, follow the below steps, as we will be modifying some of the files in that app.

Setup proxy configuration 

Open the file setupProxy.js and add the below proxy configuration. You can alsomodify the existing configuration to use a regular expression if you want all the URLs to be redirected to the same proxy.

Add the nested table as sub component 

Now, open Dashboard.js and modify the code as below. This component just fetches the data and displays as a table.
The above code is exactly same as the original code in the previous article, except for the numbered lines. Let's see what are the differences at the highlighted line numbers:
1. First we imported the nested child table component - Posts
2. Added the nested child table as a SubComponent to the React Table

Create nested child table component 

Create a file named Posts.js and add the code as below. This will create the child table component that fetches the data from API when the expand button is clicked.
Thats all, Now, Open the browser and test the code, you should see a table with data as shown below. Click on the expand button and observe that a nested child table is shown. Clicking again on the button will collapse the child table.
Thats all folks !! Happy coding. If you feel this helped you, keep supporting us by   or  or  below or on the articles on social media.
Like us on: