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)
- dynamic growing
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.
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.
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
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 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
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
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.