React Bootstrap Table2: How to Use Bootstrap Table in React

By
Krunal
-
8
363
React Table Pagination, Sorting and Searching Example

React Bootstrap Table2 Example

In this example, I will show you how to install react-bootstrap-table2 and display the backend data to the frontend using this library. There are so many options that we can apply to our react-bootstrap-table2. We start this tutorial by installing React.js.

Step 1: Install React using create-react-app.

Type the following command.

npm install -g create-react-app

If it fails, then try running on administrator mode.

Now, create the boilerplate using the following command.

create-react-app react-table2

Go into that folder.

cd react-table2

Open the project in your editor. I am using the Visual Studio Code.

code .

Also, you can run this project by the following command.

yarn start

Step 2: Install react-bootstrap-table2.

Here is the official documentation of the react-bootstrap-table2 library.

You can install this library with the following command.

npm install react-bootstrap-table-next --save

Configure CSS.

The react-bootstrap-table2 needs you to add bootstrap css in your application first.

So, install the bootstrap using the following command.

npm install --save bootstrap@4.0.0

Step 3: Create a Bootstrap Table2 with Static Data.

Inside src  >>  App.js file, write the following code.

// App.js

import React, { Component } from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
import BootstrapTable from 'react-bootstrap-table-next';

class App extends Component {
  state = {
    products: [
      {
        id: 1,
        name: 'TV',
        'price': 1000
      },
      {
        id: 2,
        name: 'Mobile',
        'price': 500
      },
      {
        id: 3,
        name: 'Book',
        'price': 20
      },
    ],
    columns: [{
      dataField: 'id',
      text: 'Product ID'
    },
    {
      dataField: 'name',
      text: 'Product Name'
    }, {
      dataField: 'price',
      text: 'Product Price',
      sort: true
    }]
  } 
  
  render() {
    return (
      <div className="container" style={{ marginTop: 50 }}>
        <BootstrapTable 
        striped
        hover
        keyField='id' 
        data={ this.state.products } 
        columns={ this.state.columns } />
      </div>
    );
  }
}

export default App;

So, what we have done is initialize the state with the following variables.

  1. data
  2. columns

Assign the data to the BootstrapTable component, and also, we need to tell it which are the columns. Also, define the keyField in our table. So the following things are required to display the BootstrapTable.

  1. data
  2. columns
  3. keyField

The striped property tells our table that our bootstrap table class is table-striped.

So, after passing the required properties, we can see the table.

React Bootstrap Table2 Example

Step 4: Create a backend.

We need the fake data to work with. That is why I am using one package called json-server for this tutorial. Okay, so let us install the package using the Yarn package manager.

yarn global add json-server

# or

npm install -g json-server

Now we need to create a folder inside the src directory called data and in that folder, create one file called db.json. Let us add the following data inside a db.json file.

{
    "results": [
    {
        "id": "1",
        "name": "Book",
        "price": "18"
    },
    {
        "id": "2",
        "name": "Mobile",
        "price": "400"
    },
    {
        "id": "3",
        "name": "PC",
        "price": "1000"
    },
    {
        "id": "4",
        "name": "PS4",
        "price": "500"
    },
    {
        "id": "5",
        "name": "Chromebook",
        "price": "500"
    }]
}

Now, start the JSON server using the following command.

json-server --watch src/data/db.json --port 4000

React Bootstrap Table Tutorial

Now, we have a server running that can feed the data to our React Bootstrap Application.

Our JSON server is started at port: 4000, and the URL is http://localhost:4000.

Step 5: Install Axios and fetch the data.

Type the command to install Axios.

npm install axios --save

# or

yarn add axios

Okay, now we need to fetch the data from the JSON server. Modify the App.js file.

// App.js

import React, { Component } from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
import BootstrapTable from 'react-bootstrap-table-next';
import axios from 'axios';

class App extends Component {
  state = {
    products: [],
    columns: [{
      dataField: 'id',
      text: 'Product ID'
    },
    {
      dataField: 'name',
      text: 'Product Name'
    }, {
      dataField: 'price',
      text: 'Product Price',
      sort: true
    }]
  }

  componentDidMount() {
    axios.get('http://localhost:4000/results')
      .then(response => {
        this.setState({
          products: response.data
        });
      });
  }
  
  render() {
    return (
      <div className="container" style={{ marginTop: 50 }}>
        <BootstrapTable 
        striped
        hover
        keyField='id' 
        data={ this.state.products } 
        columns={ this.state.columns } />
      </div>
    );
  }
}

export default App;

Now, save the file, and if everything is correctly installed and set up, we can see the data.

React Datatable Tutorial

Step 6: Add sorting functionality.

If you want to sort any particular columns, you must pass a property sort: true inside that column’s array. In our example, it is like this.

// App.js

state = {
    products: [],
    columns: [{
      dataField: 'id',
      text: 'Product ID',
      sort: true
    },
    {
      dataField: 'name',
      text: 'Product Name',
      sort: true
    }, {
      dataField: 'price',
      text: 'Product Price',
      sort: true
    }]
  }

Step 7: Add Filters to our table.

For the filters, we need to add a separate library. So let us install it.

yarn add react-bootstrap-table2-filter

# or

npm install react-bootstrap-table2-filter --save

Okay, now import that filter inside the App.js file.

In our example, we are going to filter the name column. So we add the property filter to the name column and then pass that filter column to the React Bootstrap Table component.

// App.js

import React, { Component } from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
import BootstrapTable from 'react-bootstrap-table-next';
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
import axios from 'axios';

class App extends Component {
  state = {
    products: [],
    columns: [{
      dataField: 'id',
      text: 'Product ID',
      sort: true
    },
    {
      dataField: 'name',
      text: 'Product Name',
      sort: true,
      filter: textFilter()
    }, {
      dataField: 'price',
      text: 'Product Price',
      sort: true
    }]
  }

  componentDidMount() {
    axios.get('http://localhost:4000/results')
      .then(response => {
        this.setState({
          products: response.data
        });
      });
  }
  
  render() {
    return (
      <div className="container" style={{ marginTop: 50 }}>
        <BootstrapTable 
        striped
        hover
        keyField='id' 
        data={ this.state.products } 
        columns={ this.state.columns }
        filter={ filterFactory() } />
      </div>
    );
  }
}

export default App;

Now, you can see that; we can filter based on the name column.

React BootstrapTable Filtering

Step 8: Add Pagination to the table.

It is also a separate library. So let us install it.

yarn add react-bootstrap-table2-paginator

# or

npm install react-bootstrap-table2-paginator --save

Okay, by default, we have pagination after 10 records. So we need to add some more data inside the db.json file. So replace the db.json code with the following code.

{
    "results": [
    {
        "id": "1",
        "name": "Book",
        "price": "18"
    },
    {
        "id": "2",
        "name": "Mobile",
        "price": "400"
    },
    {
        "id": "3",
        "name": "PC",
        "price": "1000"
    },
    {
        "id": "4",
        "name": "PS4",
        "price": "500"
    },
    {
        "id": "5",
        "name": "Chromebook",
        "price": "500"
    },
    {
        "id": "6",
        "name": "Chromebook",
        "price": "500"
    },
    {
        "id": "7",
        "name": "Chromebook",
        "price": "500"
    },
    {
        "id": "8",
        "name": "Chromebook",
        "price": "500"
    },
    {
        "id": "9",
        "name": "Chromebook",
        "price": "500"
    },
    {
        "id": "10",
        "name": "Chromebook",
        "price": "500"
    },
    {
        "id": "11",
        "name": "Chromebook",
        "price": "500"
    },
    {
        "id": "12",
        "name": "Chromebook",
        "price": "500"
    },
    {
        "id": "13",
        "name": "Chromebook",
        "price": "500"
    },
    {
        "id": "14",
        "name": "Chromebook",
        "price": "500"
    },
    {
        "id": "15",
        "name": "Chromebook",
        "price": "500"
    },
    {
        "id": "16",
        "name": "Chromebook",
        "price": "500"
    }]
}

Okay, now import the pagination library inside the App.js file.

Pass the pagination property inside BootstrapTable.

// App.js

import React, { Component } from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
import BootstrapTable from 'react-bootstrap-table-next';
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
import paginationFactory from 'react-bootstrap-table2-paginator';
import axios from 'axios';

class App extends Component {
  state = {
    products: [],
    columns: [{
      dataField: 'id',
      text: 'Product ID',
      sort: true
    },
    {
      dataField: 'name',
      text: 'Product Name',
      sort: true,
      filter: textFilter()
    }, {
      dataField: 'price',
      text: 'Product Price',
      sort: true
    }]
  }

  componentDidMount() {
    axios.get('http://localhost:4000/results')
      .then(response => {
        this.setState({
          products: response.data
        });
      });
  }
  
  render() {
    return (
      <div className="container" style={{ marginTop: 50 }}>
        <BootstrapTable 
        striped
        hover
        keyField='id' 
        data={ this.state.products } 
        columns={ this.state.columns }
        filter={ filterFactory() } 
        pagination={ paginationFactory() }/>
      </div>
    );
  }
}

export default App;

Save the file and go to the browser: http://localhost:3000/

React Bootstrap Pagination Table Tutorial

That’s it for this tutorial. Thanks for taking it.

8 Comments

  1. Hello Kunal,

    Thanks for the post. Its really useful.
    How to add a link or custom dialog into a column?

    Thanks

  4. Hi Kunal,

    Just need your help, I was trying to develop a same table using your code base.
    Meanwhile, when I added filter factory plugin, the initial data stop loading until I search for anything for anything at page load. Can u please help me on this.

    I need to display the initial data when page loads.

Leave A Reply

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.