How to Work with Tables in React

Your data is usually presented in a table as part of the user interface. When working with tables, there are many aspects to consider, such as:

• The definition of columns and headers
• Cell formats (text, numbers, check boxes)
• resizing
• filtering
• dynamic growing
• styling

You will learn how to use React Bootstrap Table component to work with tabular data in this tutorial. Create sophisticated and professional-looking tables with little effort and yet be able to customize every detail.

Getting Started

Create a React app by running create-react-app.

Install Bootstrap 2 and React Bootstrap Table 2 from the project folder.

Create a Basic Table

To begin, we will create a basic table. The BootstrapTable component and CSS are first imported as shown below.

After initializing the data and column variables, we assign the data to the BootstrapTable component. The data includes names of some characters from Arrested Development.

Following are the attributes of the Bootstrap component

Render() creates a table with three columns: “ID”, “Name”, and “Value”.

Use the command npm start — reload to view the table. You only need to run create-react-app once, since it watches over your code and recompiles it when you change anything. Each change will then be automatically reflected.

In the end, here is what we found:

How to Work With Columns

Columns can be controlled in many ways. Additionally, column widths can be specified in absolute units, as percentages, or left unspecified. Column widths for unspecified columns are determined by dividing the remainder equally. For example, let’s specify the columns for our basic table as follows:

• first column: 20%
• second column: 60%
• third column: 20%

The alignment of text and columns can also be changed, as well as the style of headers and columns. In the following example, you can specify different column widths, text alignment, and custom styles:

The table now looks like this:

How to Style Your Table

We discussed how to style individual columns and headers, but styling can go much further. There are many options for customizing React Bootstrap Table 2. You can simply add the striped and hover attributes to the BootstrapTable component to get alternate background colors on each row.

To make our table striped and hovered, let’s apply those properties.

See how you would style different columns with different colors.

Sorting the tables

Sortable columns are available in React Bootstrap Table 2. Sort: true is specified in the columns definition for this purpose.

Selecting Rows

As soon as you have your data in a table, you may want to select some rows to perform some operations on them. A variety of selection options are available in the React Bootstrap Table 2. Options are grouped into a single object you pass to the component as the selectRow attribute. The following selection options are available:

• single selection mode (radio button)
• multi-selection mode (checkbox)
• configurable column selection width
• select on row click: by default, you must click the selector (radio button or checkbox)
• hide selection column (useful if select on row click is true)
• change background color on selection
• initial selected rows
• selection hooks (on single row or when all rows are selected)

Many of these options can be seen in the following components:

Data Tables in React with Other Libraries

Check out some other open-source React table libraries

react-virtualized

When rendering large lists and tabular data, react-virtualized is perfect for efficiently displaying large amounts of data.

Virtual rendering is used by react-virtualized to display large amounts of data efficiently. The virtual rendering only renders what can be seen. React-virtualized, for example, will only display a fraction of the data (ones that fit on screen) at any given time, until the user scrolls to see more data. Additional features include:

• Grids, lists, tables, masonry, and collections can be rendered
• ability to auto-resize components
• ability to display items in reverse order
• ability to customize CSS classes and styles\

react-table

React-table is a lightweight, open-source library that offers fast and extendable data grids. Additionally, it supports hooks. The following are some of its best features:

• highly customizable
• Sorting, filters, row selection, column ordering, and row expansion are available
• fully controllable API
• animatable and virtualizable
• resizable

React Data Grid

React Data Grid is another open-source library that uses Bootstrap and is perfect for editing tables. It also has a stunning UI. Features include:

• column sorting, searching, filtering, and grouping
• ability to edit columns
• expand columns to show more data

Conclusion

In this tutorial, we created a simple React application using create-react-app, added react-bootstrap-table2, populated a table with data, worked with columns, styled the table, and selected rows.

Originally published at https://www.rc-educate.com on November 24, 2021.