DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • CRUD Operations Using ReactJS Hooks and Web API
  • The Cypress Edge: Next-Level Testing Strategies for React Developers
  • How to Build Scalable Mobile Apps With React Native: A Step-by-Step Guide
  • Mastering React App Configuration With Webpack

Trending

  • Beyond ChatGPT, AI Reasoning 2.0: Engineering AI Models With Human-Like Reasoning
  • Mastering Advanced Traffic Management in Multi-Cloud Kubernetes: Scaling With Multiple Istio Ingress Gateways
  • Artificial Intelligence, Real Consequences: Balancing Good vs Evil AI [Infographic]
  • Comprehensive Guide to Property-Based Testing in Go: Principles and Implementation
  1. DZone
  2. Coding
  3. JavaScript
  4. React Bootstrap Table With Searching and Custom Pagination

React Bootstrap Table With Searching and Custom Pagination

By 
Sanwar Ranwa user avatar
Sanwar Ranwa
DZone Core CORE ·
Mar. 20, 20 · Tutorial
Likes (4)
Comment
Save
Tweet
Share
39.5K Views

Join the DZone community and get the full member experience.

Join For Free

Introduction

In this article, we will learn how to use the React Bootstrap Table in React applications.  I will also explain how we can implement pagination, searching, and sorting in this Table. 

Prerequisites

  • We should have the basic knowledge of React.js and Web API.
  • Visual Studio and Visual Studio Code IDE should be installed on your system.
  • SQL Server Management Studio.
  • Basic knowledge of Bootstrap and HTML.

Implementation Steps

  • Create a Database and Table.
  • Create Asp.net Web API Project.
  • Create React App.
  • Install React-bootstrap-table2.
  • Implement Sorting.
  • Implement Searching.
  • Implement Custom Pagination.
  • Install Bootstrap.
  • Install Axios.

Create a Table in the Database

Open SQL Server Management Studio, create a database named "Employee", and in this database, create a table. Give that table a name like "Employee".

C#
xxxxxxxxxx
1
15
 
1
CREATE TABLE [dbo].[Employee](      
2
    [Id] [int] IDENTITY(1,1) NOT NULL,      
3
    [Name] [varchar](50) NULL,      
4
    [Age] [int] NULL,      
5
    [Address] [varchar](50) NULL,      
6
    [City] [varchar](50) NULL,      
7
    [ContactNum] [varchar](50) NULL,      
8
    [Salary] [decimal](18, 0) NULL,      
9
    [Department] [varchar](50) NULL,      
10
 CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED       
11
(      
12
    [Id] ASC      
13
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]      
14
) ON [PRIMARY]      
15
GO     

  

Now add some demo data in this table.

Create a New Web API Project

Open Visual Studio and create a new project.

Creating a new project

Creating a new project

Change the name to MatUITable.

Changing name to MatUITable
Changing name to MatUITable

 Choose the template as Web API.

Selecting Web API as the template
Selecting Web API as the template

Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data. 

Adding new item
Adding new item

Click on the "ADO.NET Entity Data Model" option and click "Add". 

Adding a new data model
Adding a new data model

 Select EF Designer from the database and click the "Next" button. 

Selecting EF Designer
Selecting EF Designer

 Add the connection properties and select database name on the next page and click OK. 

Adding connection properties and selecting database
Adding connection properties and selecting database

Check the "Table" checkbox. The internal options will be selected by default. Now, click the "Finish" button.

Finishing project creation
Finishing project creation

Now, our data model is successfully created.

Right-click on the Controllers folder and add a new controller. Name it "Employee controller" and add the following namespace in the Employee controller.

C#
xxxxxxxxxx
1
 
1
using MatUITable.Models;

 

Now, add a method to fetch data from the database. 

C#
xxxxxxxxxx
1
 
1
[HttpGet]    
2
[Route("employee")]    
3
public object Getrecord()    
4
{    
5
    var emp = DB.Employees.ToList();    
6
    return emp;    
7
}  


Complete Employee controller code

C#
xxxxxxxxxx
1
24
 
1
using System;    
2
using System.Collections.Generic;    
3
using System.Linq;    
4
using System.Net;    
5
using System.Net.Http;    
6
using System.Web.Http;    
7
using MatUITable.Models;    
8
namespace MatUITable.Controllers    
9
{    
10
    
11
    [RoutePrefix("Api/Emp")]    
12
    public class EmployeeController : ApiController    
13
    {    
14
        EmployeeEntities DB = new EmployeeEntities();    
15
        [HttpGet]    
16
        [Route("employee")]    
17
        public object Getrecord()    
18
    
19
        {    
20
            var emp = DB.Employees.ToList();    
21
            return emp;    
22
        }    
23
    }    
24
}  


Now, let's enable CORS. Go to Tools, open NuGet Package Manager, search for CORS, and install the "Microsoft.Asp.Net.WebApi.Cors" package. Open Webapiconfig.cs and add the following lines.

C#
xxxxxxxxxx
1
 
1
EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");          
2
config.EnableCors(cors);  


Create a ReactJS Project

Now, let's first create a React application with the following command.

Shell
xxxxxxxxxx
1
 
1
npx create-react-app matform   

 

Install bootstrap by using the following command.

Shell
xxxxxxxxxx
1
 
1
npm install --save bootstrap  


Now, open the index.js file and add a Bootstrap reference.

JavaScript
xxxxxxxxxx
1
 
1
import 'bootstrap/dist/css/bootstrap.min.css';  

 

Now, install the Axios library by using the following command. Learn more about Axios.

Shell
xxxxxxxxxx
1
 
1
npm install --save axios  


Install React Bootstrap table by using the following command:

Shell
xxxxxxxxxx
1
 
1
npm install react-bootstrap-table-next --save  

 

Now, right-click on "src" folder and add a new component named "Bootstraptab.js". 

JavaScript
xxxxxxxxxx
1
75
 
1
import React, { Component } from 'react'  
2
import BootstrapTable from 'react-bootstrap-table-next';  
3
import axios from 'axios';  
4
export class Bootstraptab extends Component {  
5
        state = {  
6
                employee: [],  
7
                columns: [{  
8
                  dataField: 'Id',  
9
                  text: 'Id'  
10
                },  
11
                {  
12
                  dataField: 'Name',  
13
                  text: 'Name',  
14
                 sort:true  
15
                }, {  
16
                  dataField: 'Age',  
17
                  text: 'Age',  
18
                  sort: true  
19
                },  
20
                {  
21
                        dataField: 'Address',  
22
                        text: 'Address',  
23
                        sort: true  
24
                      },  
25
                      {  
26
                        dataField: 'City',  
27
                        text: 'City',  
28
                        sort: true  
29
                      },  
30
                      {  
31
                        dataField: 'ContactNum',  
32
                        text: 'ContactNum',  
33
                        sort: true  
34
                      },  
35
                      {  
36
                        dataField: 'Salary',  
37
                        text: 'Salary',  
38
                        sort: true  
39
                      },  
40
                      {  
41
                        dataField: 'Department',  
42
                        text: 'Department',  
43
                        sort: true  
44
                      }]  
45
              }  
46
              componentDidMount() {    
47
                axios.get('http://localhost:51760/Api/Emp/employee').then(response => {    
48
                  console.log(response.data);    
49
                  this.setState({    
50
                        employee: response.data    
51
                  });    
52
                });    
53
              }   
54
        render() {  
55
                return (  
56
                        <div className="container">  
57
                        <div class="row" className="hdr">    
58
                        <div class="col-sm-12 btn btn-info">    
59
                        React Bootstrap Table with Searching and Custom Pagination   
60
                         </div>    
61
                          </div>    
62
                        <div  style={{ marginTop: 20 }}>  
63
                        <BootstrapTable   
64
                        striped  
65
                        hover  
66
                        keyField='id'   
67
                        data={ this.state.employee }   
68
                        columns={ this.state.columns } ></BootstrapTable>  
69
                      </div>  
70
                      </div>  
71
                )  
72
        }  
73
}  
74
  
75
export default Bootstraptab 


Now, open the Bootstraptab.js component and import the required reference. Add the following code in this component. Run the project by using npm start and check the result:

 Initial output

Initial output

Click on the button to check sorting in table 

Implement Searching

Install the following library to add searching in this table.

JavaScript
xxxxxxxxxx
1
 
1
npm install react-bootstrap-table2-filter --save

 
Now, add the following code in this component.

JavaScript
xxxxxxxxxx
1
77
 
1
import React, { Component } from 'react'  
2
import BootstrapTable from 'react-bootstrap-table-next';  
3
import axios from 'axios';  
4
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';  
5
export class Bootstraptab extends Component {  
6
        state = {  
7
                employee: [],  
8
                columns: [{  
9
                  dataField: 'Id',  
10
                  text: 'Id'  
11
                },  
12
                {  
13
                  dataField: 'Name',  
14
                  text: 'Name',  
15
                 filter: textFilter()  
16
                }, {  
17
                  dataField: 'Age',  
18
                  text: 'Age',  
19
                  sort: true  
20
                },  
21
                {  
22
                        dataField: 'Address',  
23
                        text: 'Address',  
24
                        sort: true  
25
                      },  
26
                      {  
27
                        dataField: 'City',  
28
                        text: 'City',  
29
                        sort: true  
30
                      },  
31
                      {  
32
                        dataField: 'ContactNum',  
33
                        text: 'ContactNum',  
34
                        sort: true  
35
                      },  
36
                      {  
37
                        dataField: 'Salary',  
38
                        text: 'Salary',  
39
                        sort: true  
40
                      },  
41
                      {  
42
                        dataField: 'Department',  
43
                        text: 'Department',  
44
                        sort: true  
45
                      }]  
46
              }  
47
              componentDidMount() {    
48
                axios.get('http://localhost:51760/Api/Emp/employee').then(response => {    
49
                  console.log(response.data);    
50
                  this.setState({    
51
                        employee: response.data    
52
                  });    
53
                });    
54
              }   
55
        render() {  
56
                return (  
57
                        <div className="container">  
58
                        <div class="row" className="hdr">    
59
                        <div class="col-sm-12 btn btn-info">    
60
                        React Bootstrap Table with Searching and Custom Pagination   
61
                         </div>    
62
                          </div>    
63
                        <div  style={{ marginTop: 20 }}>  
64
                        <BootstrapTable   
65
                        striped  
66
                        hover  
67
                        keyField='id'   
68
                        data={ this.state.employee }   
69
                        columns={ this.state.columns }  
70
                        filter={ filterFactory() } />  
71
                      </div>  
72
                      </div>  
73
                )  
74
        }  
75
}  
76
  
77
export default Bootstraptab 


Run the project by using npm start and check the result:

 Searching implemented

Searching implemented

Demonstrating search functionality

Demonstrating search functionality

Implement Pagination

Install the following library to add pagination in this table.

JavaScript
 




xxxxxxxxxx
1


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



Now, add the following code in this component.

JavaScript
xxxxxxxxxx
1
77
 
1
import React, { Component } from 'react'  
2
import BootstrapTable from 'react-bootstrap-table-next';  
3
import axios from 'axios';  
4
import paginationFactory from 'react-bootstrap-table2-paginator';  
5
export class Bootstraptab extends Component {  
6
        state = {  
7
                employee: [],  
8
                columns: [{  
9
                  dataField: 'Id',  
10
                  text: 'Id'  
11
                },  
12
                {  
13
                  dataField: 'Name',  
14
                  text: 'Name',  
15
                  
16
                }, {  
17
                  dataField: 'Age',  
18
                  text: 'Age',  
19
                  sort: true  
20
                },  
21
                {  
22
                        dataField: 'Address',  
23
                        text: 'Address',  
24
                        sort: true  
25
                      },  
26
                      {  
27
                        dataField: 'City',  
28
                        text: 'City',  
29
                        sort: true  
30
                      },  
31
                      {  
32
                        dataField: 'ContactNum',  
33
                        text: 'ContactNum',  
34
                        sort: true  
35
                      },  
36
                      {  
37
                        dataField: 'Salary',  
38
                        text: 'Salary',  
39
                        sort: true  
40
                      },  
41
                      {  
42
                        dataField: 'Department',  
43
                        text: 'Department',  
44
                        sort: true  
45
                      }]  
46
              }  
47
              componentDidMount() {    
48
                axios.get('http://localhost:51760/Api/Emp/employee').then(response => {    
49
                  console.log(response.data);    
50
                  this.setState({    
51
                        employee: response.data    
52
                  });    
53
                });    
54
              }   
55
        render() {  
56
                return (  
57
                        <div className="container">  
58
                        <div class="row" className="hdr">    
59
                        <div class="col-sm-12 btn btn-info">    
60
                        React Bootstrap Table with Searching and Custom Pagination   
61
                         </div>    
62
                          </div>    
63
                        <div  style={{ marginTop: 20 }}>  
64
                        <BootstrapTable   
65
                        striped  
66
                        hover  
67
                        keyField='id'   
68
                        data={ this.state.employee }   
69
                        columns={ this.state.columns }  
70
                        pagination={ paginationFactory() } />  
71
                      </div>  
72
                      </div>  
73
                )  
74
        }  
75
}  
76
  
77
export default Bootstraptab 


Run the project by using npm start and check the result:

Pagination implemented
Pagination implemented

By default, it shows 10 records per page, so let's create a function to add custom page size. Add the following code in this component and check. 

JavaScript
xxxxxxxxxx
1
95
 
1
import React, { Component } from 'react'  
2
import BootstrapTable from 'react-bootstrap-table-next';  
3
import axios from 'axios';  
4
import paginationFactory from 'react-bootstrap-table2-paginator';  
5
export class Bootstraptab extends Component {  
6
        state = {  
7
                employee: [],  
8
                columns: [{  
9
                  dataField: 'Id',  
10
                  text: 'Id'  
11
                },  
12
                {  
13
                  dataField: 'Name',  
14
                  text: 'Name',  
15
                  
16
                }, {  
17
                  dataField: 'Age',  
18
                  text: 'Age',  
19
                  sort: true  
20
                },  
21
                {  
22
                        dataField: 'Address',  
23
                        text: 'Address',  
24
                        sort: true  
25
                      },  
26
                      {  
27
                        dataField: 'City',  
28
                        text: 'City',  
29
                        sort: true  
30
                      },  
31
                      {  
32
                        dataField: 'ContactNum',  
33
                        text: 'ContactNum',  
34
                        sort: true  
35
                      },  
36
                      {  
37
                        dataField: 'Salary',  
38
                        text: 'Salary',  
39
                        sort: true  
40
                      },  
41
                      {  
42
                        dataField: 'Department',  
43
                        text: 'Department',  
44
                        sort: true  
45
                      }]  
46
              }  
47
              componentDidMount() {    
48
                axios.get('http://localhost:51760/Api/Emp/employee').then(response => {    
49
                  console.log(response.data);    
50
                  this.setState({    
51
                        employee: response.data    
52
                  });    
53
                });    
54
              }   
55
        render() {  
56
                const options = {  
57
                        page: 2,   
58
                        sizePerPageList: [ {  
59
                          text: '5', value: 5  
60
                        }, {  
61
                          text: '10', value: 10  
62
                        }, {  
63
                          text: 'All', value: this.state.employee.length  
64
                        } ],   
65
                        sizePerPage: 5,   
66
                        pageStartIndex: 0,   
67
                        paginationSize: 3,    
68
                        prePage: 'Prev',   
69
                        nextPage: 'Next',   
70
                        firstPage: 'First',   
71
                        lastPage: 'Last',   
72
                       
73
                      };  
74
                return (  
75
                        <div className="container">  
76
                        <div class="row" className="hdr">    
77
                        <div class="col-sm-12 btn btn-info">    
78
                        React Bootstrap Table with Searching and Custom Pagination   
79
                         </div>    
80
                          </div>    
81
                        <div  style={{ marginTop: 20 }}>  
82
                        <BootstrapTable   
83
                        striped  
84
                        hover  
85
                        keyField='id'   
86
                        data={ this.state.employee }   
87
                        columns={ this.state.columns }  
88
                        pagination={ paginationFactory(options) } />  
89
                      </div>  
90
                      </div>  
91
                )  
92
        }  
93
}  
94
  
95
export default Bootstraptab 


Run the project by using 'npm start' and check the result. Now, create a new component Bootstraptab1.js and add the following code in this component:

JavaScript
xxxxxxxxxx
1
97
 
1
import React, { Component } from 'react'  
2
import BootstrapTable from 'react-bootstrap-table-next';  
3
import axios from 'axios';  
4
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';  
5
import paginationFactory from 'react-bootstrap-table2-paginator';  
6
export class Bootstraptab1 extends Component {  
7
        state = {  
8
                products: [],  
9
                columns: [{  
10
                  dataField: 'Id',  
11
                  text: 'Id'  
12
                },  
13
                {  
14
                  dataField: 'Name',  
15
                  text: 'Name',  
16
                  filter: textFilter()  
17
                }, {  
18
                  dataField: 'Age',  
19
                  text: 'Age',  
20
                  sort: true  
21
                },  
22
                {  
23
                        dataField: 'Address',  
24
                        text: 'Address',  
25
                        sort: true  
26
                      },  
27
                      {  
28
                        dataField: 'City',  
29
                        text: 'City',  
30
                        sort: true  
31
                      },  
32
                      {  
33
                        dataField: 'ContactNum',  
34
                        text: 'ContactNum',  
35
                        sort: true  
36
                      },  
37
                      {  
38
                        dataField: 'Salary',  
39
                        text: 'Salary',  
40
                        sort: true  
41
                      },  
42
                      {  
43
                        dataField: 'Department',  
44
                        text: 'Department',  
45
                        sort: true  
46
                      }]  
47
              }  
48
              componentDidMount() {    
49
                axios.get('http://localhost:51760/Api/Emp/employee').then(response => {    
50
                  console.log(response.data);    
51
                  this.setState({    
52
                        products: response.data    
53
                  });    
54
                });    
55
              }   
56
        render() {  
57
                const options = {  
58
                        page: 2,   
59
                        sizePerPageList: [ {  
60
                          text: '5', value: 5  
61
                        }, {  
62
                          text: '10', value: 10  
63
                        }, {  
64
                          text: 'All', value: this.state.products.length  
65
                        } ],   
66
                        sizePerPage: 5,   
67
                        pageStartIndex: 0,   
68
                        paginationSize: 3,    
69
                        prePage: 'Prev',   
70
                        nextPage: 'Next',   
71
                        firstPage: 'First',   
72
                        lastPage: 'Last',   
73
                        paginationPosition: 'top'    
74
                      };  
75
                return (  
76
                        <div className="container">  
77
                        <div class="row" className="hdr">    
78
                        <div class="col-sm-12 btn btn-info">    
79
                        React Bootstrap Table with Searching and Custom Pagination   
80
                         </div>    
81
                          </div>   
82
                        <div className="container" style={{ marginTop: 50 }}>  
83
                        <BootstrapTable   
84
                        striped  
85
                        hover  
86
                        keyField='id'   
87
                        data={ this.state.products }   
88
                        columns={ this.state.columns }   
89
                        filter={ filterFactory() }   
90
                        pagination={ paginationFactory(options) }/>  
91
                      </div>  
92
                      </div>  
93
                )  
94
        }  
95
}  
96
  
97
export default Bootstraptab1 


Now, open app.js file and add the following code:

JavaScript
xxxxxxxxxx
1
13
 
1
import React from 'react';  
2
import logo from './logo.svg';  
3
import './App.css';  
4
import Bootstraptab1 from './Bootstraptab1';  
5
function App() {  
6
  return (  
7
    <div className="App">  
8
      <Bootstraptab1/>  
9
    </div>  
10
  );  
11
}  
12
  
13
export default App; 


Run the project by using npm start and check the result: 

final output
Pagination implemented

Summary 

In this article, we learned how we add React Bootstrap Table and show data in that table using Web API in ReactJS applications. We also learned how to implement sorting, searching, and pagination in the table.

Database Bootstrap (front-end framework) React (JavaScript library) Web API JavaScript

Opinions expressed by DZone contributors are their own.

Related

  • CRUD Operations Using ReactJS Hooks and Web API
  • The Cypress Edge: Next-Level Testing Strategies for React Developers
  • How to Build Scalable Mobile Apps With React Native: A Step-by-Step Guide
  • Mastering React App Configuration With Webpack

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!