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 - [This article]
In our previous article, we learned how to add a loading spinner to a React Table. In this continuation article, we will show you how to add a record count bar with range of record on that page and total count of records in the table that we created here, React Table - How to add a loading spinner
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.Create a new file named
RecordCount.js and add the code as below.loading...
Let's see the importants aspects of the above code snippet:
1.
makeTable() - This is the most important aspect. This will take care of everything. This function is passed from the parent and provides access to the table attributes in RecordCount component2.
recordsInfoText - This text is displayed below the table. You can modify this as per your needsNow, 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 RecordCount component
2. Created a state variable for holding the total record count and initialized to null
3. Set the total record count when the data is received from the API response
4. Finally, add the RecordCount component where we wanted to show on the screen
open index.css and modify the code as below.
loading...
Thats all, Now, Open the browser and test the code, you should see a record count bar under the table as shown below. Also, try to navigate using the pagination buttons and see the counts getting changed on the fly.
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.
