AppDividend
Latest Code Tutorials

React Bootstrap Table2 Example

0 608

Get real time updates directly on you device, subscribe now.

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.

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

Related Posts
1 of 13
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

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 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.

React Datatable Tutorial

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.

React BootstrapTable Filtering

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/

React Bootstrap Pagination Table Tutorial

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

Leave A Reply

Your email address will not be published.