React Bootstrap Table2: How to Use Bootstrap Table in React
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.
- data
- 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.
- data
- columns
- 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.
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
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.
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.
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/
That’s it for this tutorial. Thanks for taking it.
Hello Kunal,
Thanks for the post. Its really useful.
How to add a link or custom dialog into a column?
Thanks
how do I add a custom button to this table?
great tutorial! from basic table to gradually adding more features into the table. a very great approach!
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.
thanks
it’s very useful
Thank you so much for this post! I can’t say thank you enough!
Would be good to show how to export this data to a JSON variable…
Gracias totales