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.

1
create-react-app react-table-app

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

1
2
3
cd react-table-app
npm install react-bootstrap-table-next --save
npm install --save bootstrap@4.0.0

Create a Basic Table

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

1
2
3
4
5
import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import BootstrapTable from 'react-bootstrap-table-next';

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.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
const data = [
  {id: 1, name: 'Gob', value: '2'},
  {id: 2, name: 'Buster', value: '5'},
  {id: 3, name: 'George Michael', value: '4'}
];
const columns = [{
  dataField: 'id',
  text: 'Product ID'
}, {
  dataField: 'name',
  text: 'Product Name'
}, {
  dataField: 'value',
  text: 'Product value'
}];

Following are the attributes of the Bootstrap component

  • keyField
  • data
  • columns

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

01
02
03
04
05
06
07
08
09
10
11
class App extends Component {
  render() {
    return (
      <div className="App">
        <p className="Table-header">Basic Table</p>
        
        <BootstrapTable keyField='id' data={ person } columns={ columns } />
      </div>
    );
  }
}

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.

1
2
3
4
5
6
7
8
9
Compiled successfully!
You can now view my-table-app in the browser.
  Local:            https://localhost:3002
  On Your Network:  http://192.168.43.206:3002
Note that the development build is not optimized.
To create a production build, use npm run build.

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:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
const columns = [{
  dataField: 'id',
  text: 'Product ID',
  headerStyle: (colum, colIndex) => {
          return { width: '20%', textAlign: 'center' };
        }
}, {
  dataField: 'name',
  text: 'Product Name',
  sort: true,
  headerStyle: (colum, colIndex) => {
          return { width: '60%', textAlign: 'center' };
        }
}, {
  dataField: 'value',
  text: 'Product value',
  headerStyle: (colum, colIndex) => {
          return { width: '20%', textAlign: 'center' };
        }
  
}];

The table now looks like this:

 

*

Post a Comment (0)
Previous Post Next Post