Creating Paginated Tables with React That You can Sort, Filter, and Customize

Creating Paginated Tables with React That You can Sort, Filter, and Customize

I recently incorporated first set of react tables into an app that I’m building. My goal was to display all of the clients that are using my app for the admins to manage. I wanted it to have all those nice features, like sorting by column, filtering by name/role/etc, and it had to be fast. Needless to say, I pretty quickly threw out the standard HTML <table>and started looking into React options.

What I settled on was Reactable. It is an incredible piece of work that makes all of those features easy to implement and customize. The hardest part became how I wanted to organize my data and not how to make the table itself work. This tutorial’s goal is to show you how to set up your own React tables and implement sorting and filtering features.

You can find the complete source code for our table component at this gist.

Setting up your work environment

First things first, you need to get Reactable installed into your project:

npm install --save reactable

Then get it imported into your dedicated “table” component, let’s call it sg-teams.

Working with data in our Reactable

For our tutorial, we are going to be creating by hand the array of objects that we want to show in our table. In my application, the table was populated by a database, however, the concept is nearly identical. Our example objects are going to be filled with valuable information regarding Stargate Teams, like: who is leading the team, what their assignment is, and how many people are in the team. We’ll want to be able to sort this table so that we can identify a prime candidate for a mission. Or, perhaps, we’ll want to just filter our data by “Oneil” so that we can find SG-1. Come on, we all know who’s really saving the day here.

The data in our objects (in our array) do not have to be sorted so that all the names:come first, then the leader, etc. You can just throw in any of your information or only part of it. Reactable will be able to decipher it and populate the appropriate data into their columns.

However, this table will be the most simple, and our columns will have the very untidy titles given to the information in our array. Right now we have no ability to filter or sort this information, but we can solve this and the ugly titles by adding a few parameters to our Table.

This is pretty incredible stuff right here. By simply adding those parameters we get the instant benefit of sorting (numbers, strings, and dates), paginating, and filtering our data. With the Thead element we can define the column titles to display, and it’s all neatly packaged up.

filterable takes an array that lists the column names you want to filter by.

noDataText returns a string when no data matches the filter

itemsPerPage paginates the table

currentPage is required to paginate, setting it to 0 starts the table on the first page.

sortable pretty self-explanatory.

<Thead> Short for ‘Table Header’, used to define the Th values.

With these options included we get a much more functional react tables that are ready to actually do some work for Stargate Command.

Subscribe to my mailing list

View older content

Keeping the lights on

To put it simply, I want to make a little extra to justify the amount of time and effort I put into this website. I love writing these tutorials, so every bit helps make it possible. Don’t worry, my advertising will never become intrusive. I value your readership and thank you for your support!