Learn in 
React Table Series - Table of Contents
Part 1 : React Table - How to create a simple react table with pagination and sorting
Part 2 : React Table - How to add Loading Spinner
Part 3 : React Table - How to add a Record Count
Part 4 : React Table - How to create a nested sub table - [This article]
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.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.loading...
Now, open Dashboard.js and modify the code as below. This component just fetches the data and displays as a table.
loading...
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 -
Posts2. Added the nested child table as a SubComponent to the React Table
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.loading...
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.
