React Table - How to create a simple react table with pagination and sorting

React Table - How to create a simple react table with pagination and sorting

Oct 21, 2020 - ReactJS

React Table Series - Table of Contents

Part 1 : React Table - How to create a simple react table with pagination and sorting - [This article]



Everyone wants the data at somepoint to be shown in the form of a table. Let us look at how to create a simple table in react with pagination and sorting the data.
To save time, we will use the app that we created before to retrieve data from an API. We will use this data to show in our table. If you want to know how to retrieve data from an API in react, read this tutorial - React Proxy Backend API configuration
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.

Install react-table 

Open command prompt, navigate to the application root folder and type,
npm install react-table
That is all !! Yes, we dont need any other packages.

Add react-table component 

Now, open Dashboard.js and modify the code as below. This component will just fetches the data and displays as a table.
Let's review what we did above, here are the things that we added:
1. First we imported the react-table component, a CSS file
2. Default table properties ReactTableDefaults are imported and declared. For now, we just have a single property which just disabled the multi sort option, we will come to this later in sorting section
3. Added a method to fetchData(). This uses the same method getUsers() to fetch the data from the API from original source of the app
4. Additionally, the fetchData() calls getTableDataFromJSONObject() which just converts the data fetched from API into a format that react-table uses
5. Finally, added ReactTable component

Add logic to convert data into table data in CommonFunctions.js 

The method above simply returns 3 attributes:
1. rows - the table data in the form of rows
2. pages - the number of pages in the table
3. totalRecords - total records in the table

Add CSS to decorate the table 

Finally, you should see the table displayed as below,


You dont have to worry about the pagination as long as you are returning your data in the above format (3 attributes explained above). React Table will take care of the rest.


Sorting is taken care by React Table by default. It will pass the current sort column name in sorted property in fetchData()This sorted property is actually an object that has the sort order as well in desc property. Once you receive this property, sort your table data accordingly and send back.
Check the defaultSorted property of ReactTable component for the default sorted column configuration
By defult, react-table supports multi column sort, Use SHIFT + click on column to select multiple columns. Try this out and see. Most of the times, we dont need this functionality. This is the exact reason why we have to disabled multi column sort in ReactTableDefaults.
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: