fbpx Skip to content

Aquent | DEV6

How to display tabular data with React Bootstrap Table 2

Written by: Morgan Lockhart

Tables are a classic tool for displaying large amounts of data in an easy to consume format, a structure of rows and columns. Unfortunately, they can be a bit of a headache to code from scratch and maintain. Enter React Bootstrap Table 2! This is an incredibly powerful plugin that gets you up and running in no time and can be adapted for a variety of table related-needs that are well-documented with examples. This blog post will walk you through the basic setup of the table in your React project, the implementation of some of the most useful features, such as data formatting, sorting, and pagination, and how they can be customized to fit your needs.

Setting up the table

Begin by installing the necessary dependencies, Bootstrap and React Bootstrap:

$ npm install react-bootstrap-table-next --save

$ npm install bootstrap

$ npm install react-bootstrap

and adding the stylesheet to your index.js file:

import "bootstrap/dist/css/bootstrap.min.css";

Then we can import the BootstrapTable component. Check out this Code Sandbox to see how I set up my files and follow along.

import React from "react";
import BootstrapTable from "react-bootstrap-table-next";

const BasicTable = () => {
 return (
   <BootstrapTable
     keyField=""
     data={data}
     columns={columns}
   />
 );
};

This component has three required props: “keyField”, “data”, and “columns”. The keyField is a string representing a unique identifier in the data. Data and columns are both arrays of objects.

const data = [
 {
   id: 0,
   name: "banana",
   price: "0.25"
 },
 {
   id: 1,
   name: "spinach",
   price: "4.49"
 },
 {
   id: 2,
   name: "icecream",
   price: "4.99"
 },
 {
   id: 3,
   name: "bagel",
      price: "1.19"
 },
 {
   id: 4,
   name: "fish",
   price: "10.00"
 }
];
const columns = [
 {
   dataField: "id",
   hidden: true
 },
 {
   dataField: "name",
   text: "Grocery"
 },
 {
   dataField: "price",
   text: "Price"
 }
];

You can see how the “dataField” property in the columns array is related to the “name” property in the data array. Also note how we use the “hidden” property to keep certain columns out of the UI. At this point, you should have a very basic table that looks something like this:

table 1

Levelling up your table with styles and formatting!

This plugin leverages the styling power of Bootstrap so it already looks better than plain HTML but with a few keywords, we can make this table a little more visually appealing and improve the user experience. Add the “striped”, “hover”, and “condensed” props to the table component.

const BasicTable = () => {
 return (
   <BootstrapTable
     keyField="id"
     data={data}
     columns={columns}
     striped
     hover
     condensed
   />
 );
};

Looking better, but what about those prices? Perhaps the database we pulled them from doesn’t format the values with dollar signs, so we’ll need to add them ourselves. A custom formatter function can be added to any column to modify the data for the UI. The formatter receives two parameters, “cell” and “row”. Add a formatter to the “price” column like this:

{
   dataField: "price",
   text: "Price",
   formatter: (cell, row) => {
     return <p>${cell}</p>;
   }
 }

We didn’t use the “row” parameter, so it is crossed out, but it’s an object that is available to you if you need to access the data from any column in that given row. Wow, looks great!

table 2

Next up, sorting

Maybe we want the user to be able to sort the items in each column, perhaps giving them the option to list the groceries alphabetically. To enable sorting on a column, add the sort property to each column you’d like it to be enabled on:

{
   dataField: "name",
   text: "Grocery",
   sort: true
 },

Clicking on the table header now allows you to sort them in ascending/descending alphabetical order, but there’s no visual indication of this functionality. To make the sort carets visible, we need to add a bit of custom CSS, which I was able to find through the following issue opened on the plugin’s GitHub:

table thead .caret {
 display: inline-block;
 width: 0;
 height: 0;
 margin-left: 2px;
 vertical-align: middle;
 border-top: 4px dashed;
 border-top: 4px solid \9;
 border-right: 4px solid transparent;
 border-left: 4px solid transparent;
}

table thead .dropup .caret,
table thead .navbar-fixed-bottom .dropdown .caret {
 border-top: 0;
 border-bottom: 4px dashed;
 border-bottom: 4px solid \9;
 content: "";
}

This is a good time to mention that Allen, the creator of the plugin, is super responsive and helpful, as is the community surrounding them. There are a lot of useful tips and workarounds, as well as discussions surrounding new features.

That’s a nice table:

table 3

The default sort function sorts data as strings, which is a problem for our price column. You’ll see it’s sorting all the strings that start with 1 together, not in ascending/descending order. That’s okay though, this gives us an opportunity to write a custom sort function. The sortFunc property is a function that accepts the following arguments:

  • ‘a’ and ‘b’: any two values from the column being compared
  • ‘order’: either ascending or descending, toggled by the sort carets
  • ‘dataField’: the name of the column data from the data array
  • ‘rowA’ and ‘rowB’: the objects representing all data from the respective rows being compared

Now we can use them to write a “sort numbers” function below:

{
   dataField: "price",
   text: "Price",
   formatter: (cell, row) => {
     return <p>${cell}</p>;
   },
   sort: true,
   sortFunc: (a, b, order, dataField, rowA, rowB) => {
     const numA = parseFloat(a);
     const numB = parseFloat(b);
     if (order === "asc") {
       return numB - numA;
     }
     return numA - numB; // desc
   }
 }

Last but not least, a super useful feature of any robust table is pagination. No one wants to scroll through dozens of rows of data, let alone hundreds or thousands. Pagination is one of the features that is separated into its own module, so you’ll need to add the react-bootstrap-table2-paginator dependency and import the paginationFactory:

$ npm install react-bootstrap-table2-paginator --save

import paginationFactory from "react-bootstrap-table2-paginator";

You can add the pagination prop to the table like this:

const BasicTable = () => {
 return (
   <BootstrapTable
     keyField="id"
     data={data}
     columns={columns}
     striped
     hover
     condensed
     pagination={paginationFactory({})}
   />
 );
};

We don’t have very much data so it’s a little underwhelming in this example, but believe me, the pagination power of this plugin is prodigious!

Hopefully you got a little taste of what the React Bootstrap Table2 plugin is capable of and feel confident incorporating it into your next React project. It will save you some of the headache of building a table from scratch. There are so many features we didn’t get a chance to go into including extensive custom styling, row selection, row expansion, cell editing, filtering (which could be a whole series of posts on its own), exporting data to CSV, and table searching. The possibilities are endless. Good luck with your next React table project 👋

Resources:

GitHub: https://github.com/react-bootstrap-table/react-bootstrap-table2

Storybook: https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html