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

I recently incorporated my first react table 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 based table 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.

import React, { Component } from 'react';  
import Reactable from 'reactable';  

We also need to import some things from the Reactable library, then we'll be able to start creating some data and working with it.

var Table = Reactable.Table,  
    Thead = Reactable.Thead,
    Th = Reactable.Th;

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.

Let's populate an array with this information or your own:

var sgTeams = [  
  {name: "SG-1", leader: "Oneil", assignment: "Exploration", members: 4},
  {name: "SG-2", leader: "Kawalsky", assignment: "Search and Rescue", members: 5},
  {name: "SG-3", leader: "Reynolds", assignment: "Marine Combat", members: 10},
  {name: "SG-4", leader: "Howe", assignment: "Medical", members: 4},
  {name: "SG-5", leader: "Davis", assignment: "Marine Combat", members: 6},
  {name: "SG-6", leader: "Fischer", assignment: "Search and Rescue", members: 10},
  {name: "SG-7", leader: "Isaacs", assignment: "Scientific", members: 6},
  {name: "SG-8", leader: "Yip", assignment: "Medical", members: 6},
  {name: "SG-9", leader: "Winters", assignment: "Diplomatic", members: 7},
  {name: "SG-10", leader: "Colville", assignment: "Military Exploration", members: 5}
];

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.


Creating the table

We can very easily and quickly get the basic table created right now:

export default class SgTeamsList extends Component {  
 renderTable() {
   return (
    <Table className="table" data={sgTeams} />
   )
 }

  render() {
      return (
        <div>
          {this.renderTable()}
        </div>
      )
  }
}

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.

  renderTable() {
    return (
      <Table className="table"
        filterable={['leader', 'assignment', 'members']}
        noDataText="No matching records found"
        itemsPerPage={5}
        currentPage={0}
        sortable={true}
        data={sgTeams}>
        <Thead>
          <Th column="name">Away Team</Th>
          <Th column="leader">Leader</Th>
          <Th column="assignment">Mission</Th>
          <Th column="members">Team Members</Th>
        </Thead>
      </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 table that's ready to actually do some work for the SGC.

Er, I mean your business.

Don't forget to check out the complete source code at this gist!

David Meents

React.js developer, web designer, and business owner.

Subscribe to David Meents

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus