React Table - How to add a Record Count

React Table - How to add a Record Count

Dec 21, 2020 - ReactJS

React Table Series - Table of Contents



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 resuable Record Count component 

Create a new file named RecordCount.js and add the code as below.
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 component
2. recordsInfoText - This text is displayed below the table. You can modify this as per your needs

Add RecordCount component to React Table 

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 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

Add CSS to align RecordCount component 

open index.css and modify the code as below.
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.
Like us on: