React Bootstrap Table2 Example

React Bootstrap Table2 Example is the today’s leading topic.  In this example, I will show you how you can 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. 

React Bootstrap Table2 Example

We start this tutorial by installing the react.js.

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

Type the following command.

npm install -g create-react-app

If 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 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 by the following command.

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

Configure CSS.

The react-bootstrap-table2 need you to add bootstrap css in your application firstly.

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 that which are the columns. Also, define the keyField in our table. So following things are required to display the BootstrapTable.

1. data
2. columns
3. keyField

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

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

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 Yarn package manager.

yarn global add json-server

# or

npm install -g json-server

Now we need to create a folder inside 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

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 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 setup then we can see the data.

Step 6: Add sorting functionality.

If you want to sort any particular columns, you just need to pass a property sort: true inside that columns 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 the 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 App.js file.

In our example, we are going to filter 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 name column.

Step 8: Add Pagination to the table.

It is also the 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 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 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/

Finally, React Bootstrap Table2 Tutorial with Example is over. Thanks for taking.