How to Show Data Grids with Bootstrap Theming in React with React Bootstrap Table

Bootstrap is one of the most popular UI frameworks. It provides ready-to-use components that simplify building web applications.

The Table component in Bootstrap provides beautiful styling for different styles of tables. However, it does not provide additional functionality commonly needed in applications like sorting, filtering, paging, in-cell editing. That's where the React Bootstrap Table comes into play.

The React Bootstrap Table is the library that provides the Table component that supports Bootstrap theming and has got a rich set of additional features.

For this article, we assume that you're familiar with React components and how to use props and state to control them.

Adding React Bootstrap Table#

We start by adding the React Bootstrap Table to a project:

React Bootstrap Table relies on Bootstrap for styling, so we need to install the bootstrap package for the Bootstrap CSS files as well:

React Bootstrap Table provides separate packages if you need additional features:

• react-bootstrap-table2-filter for filtering;

• react-bootstrap-table2-editor for in-cell editor;

• react-bootstrap-table2-paginator for paging;

• react-bootstrap-table2-overlay for an overlay with a loading indicator;

• react-bootstrap-table2-toolkit for table search, export to CSV, and columns toggle.

If you're going to use some of these additional features, you need to install them as well.

Now, we can add the Bootsrap Table to our project:

We start by importing CSS files. The bootstrap.css file provides styling for tables. We also import the react-bootstrap-table2.min.css for specific React Bootstrap Table styles not covered by Bootstrap, such as sorting icons and cell editing.

Next, we import the BootstrapTable table component.

The products array contains a list of items we'd like to display. The columns array defines settings for the table's columns. For each column, we define the name of the field it should display with the dataField field, its display name with the text field, and whether it should be sortable with the sort field.

Finally, we render the table with the table component. We specify the bootstrap4 property to notify the table that we're using the Bootstrap version 4. We provide the data to show in the data property and columns configuration in the columns property. We also specify that the id property of products should be used as the unique key with the keyField property.

Configuring React Bootstrap Table#

We can configure the BootstrapTable component using its properties. The full list of properties is available on the official site.

For example, let's add paging to our table.

As mentioned before, paging is implemented in a separate package. We need to install it before using:

Now, we can add paging support to our table:

This example is similar to the basic table demo. The difference with the previous example is that we import the paginationFactory function from the react-bootstrap-table2-paginator package. We call this function and pass the returned value to the pagination property of the table.

Styling React Bootstrap Table#

The advantage of the React Bootstrap Table is that it uses the Bootstrap theming.

If you're using Bootstrap in your React project, the table would use the same styling as the rest of the project. It will apply all the additional theming as well. If you'd like to apply styling to all tables in your application, this is a way to go.

We can specify custom CSS classes for additional customization. This can be useful if you need to apply styling for a particular table that differs from other tables. The BootstrapTable component provides properties such as classes, bodyClasses, rowClasses, and headerClasses.

Conclusion#

React Bootstrap Table provides the table component that works with Bootstrap theming. This is a great choice when you're using Bootstrap in a project and need to display a data grid with sorting, paging, and filtering.

More resources#

• React Bootstrap Table API and examples.

• Bootstrap theming guide.

• How to Start Using Bootstrap with React.

• How to use Bootstrap in React applications with reactstrap.