Working With Tables in React: Part Two

In this two-part series, you will learn about the ins and outs of working with tabular data in React using the React Bootstrap Table2 component. You’ll be able to create sophisticated and professional-looking tables with little effort and yet be able to customize every aspect. In this part, we’ll continue the journey by expanding rows, pagination, cell editing, and advanced customization.

Overview

This is part two of a two-part series about React Bootstrap Table2. In part one, we created a simple React application using react-create-app and created the table shown below.

react table

We also populated a table with data, worked with columns, styled the table, and selected rows. 

In this part, we’ll continue the journey by creating expanding rows, allowing cell editing, and doing some advanced customization.

Expanding Rows

Expanding rows is one of the coolest features of React Bootstrap Table2. When displaying tabular data, you may want to see additional data on one or two rows, but you might clutter the display if you show all the data for all the rows. 

One option is to show tooltips, but tooltips require that you hover with the mouse over the target area, and you can only see one tooltip at a time. Expanding the rows lets you display additional data for each row in a kind of drawer that stays expanded as long as you want, and you can collapse it back when you’re done. You can expand as many rows as you want at the same time. Here is how it’s done with React Bootstrap Table2.

Let’s take a look at our data. 

We’ll use the prop expandRow to specify how rows will expand on click.

We then add the expandRow property to our table.

This is how the table will look when you click on a row.

expand rows

Pagination

So far, we’ve displayed just four rows of data. Tables are designed to display a lot of data that doesn’t necessarily all fit on the screen simultaneously. That’s where pagination comes in. React Bootstrap Table2 supports many pagination options. 

Let’s populate our table with additional data by adding a few entries, as shown below.

Let’s now implement pagination on our table. First, use NPM to install the react-bootstrap-table2-paginator package.

Next, open App.js and import the paginationFactory function.

 Customize the pagination by declaring the following configurations.

We then apply the property to the table, as shown below.

The table will be displayed starting from the first page and will show five entries per page.

pagination react

Cell Editing

Another form of data manipulation is in-place editing (a.k.a. cell editing). Cell editing can be triggered by a click or double-click. To enable this property, first install the react-bootstrap-table2-editor.

Then import it at the top of App.js.

This is how you enable cell editing on a table.

You can also specify non-editable rows and hook functions. For example, the code below restricts cell editing on row 3.

cell editing

Exporting Your Data

Sometimes, viewing your data in a web UI is not enough, and you need to take your data and feed it to other tools. Import the exportCSV attribute (and optionally a filename), and an export button is added to the table. When you click the button, it allows you to save your data to a CSV file.

Install react-bootstrap-table2-toolkit.

The export feature is available via the exportCSV prop in the ToolkitProvider wrapper. To display and enable CSV export, wrap the BootstrapTable in a ToolkitProvider.

export csv

Table Search

This property works the same way as the Export feature.  First, import the Search property, enable it on  ToolKitProvider, and wrap the SearchBar as a child of ToolkitProvider.

search react-bootstrap

Summary

We covered a lot of material in this tutorial, but React Bootstrap Table2 has a lot more in store. Practically every aspect of the table can be customized. Read the full documentation on how to customize a table.

Here are all the features offered by React Bootstrap Table2:

  • row customization
  • column customization
  • table sort
  • table search
  • row selection
  • column filter
  • cell edit
  • pagination
  • expandable row
  • overlay
  • remote tables

Conclusion

React Bootstrap Table2 packs a powerful punch. It provides a pleasant user interface for displaying, searching, and manipulating tabular data out of the box. The API is very consistent—major features can be enabled by specifying a simple attribute and optionally customized with additional attributes that often can be dynamic functions. While the default behavior and the basic configuration should satisfy most users, if you need more advanced features and customization, the official documentation has lots of examples of how to go about it.

Leave a comment

Your email address will not be published.