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 paging, 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".
  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.
React Bootstrap Table With Searching And Custom Pagination
Change the name to MatUITable.
React Bootstrap Table With Searching And Custom Pagination
Choose the template as Web API.
React Bootstrap Table With Searching And Custom Pagination
Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data.
React Bootstrap Table With Searching And Custom Pagination
Click on the "ADO.NET Entity Data Model" option and click "Add".
React Bootstrap Table With Searching And Custom Pagination
Select EF Designer from the database and click the "Next" button.
React Bootstrap Table With Searching And Custom Pagination
Add the connection properties and select database name on the next page and click OK.
React Bootstrap Table With Searching And Custom Pagination
Check the "Table" checkbox. The internal options will be selected by default. Now, click the "Finish" button.
React Bootstrap Table With Searching And Custom Pagination
Now, our data model is successfully created.
Right-click on the Controllers folder and add a new controller. Name it as "Employee controller" and add the following namespace in the Employee controller.
using MatUITable.Models;
Now add a method to fetch data from database.
  1. [HttpGet]
  2. [Route("employee")]
  3. public object Getrecord()
  4. {
  5. var emp = DB.Employees.ToList();
  6. return emp;
  7. }
Complete Employee controller code
  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. {
  11. [RoutePrefix("Api/Emp")]
  12. public class EmployeeController : ApiController
  13. {
  14. EmployeeEntities DB = new EmployeeEntities();
  15. [HttpGet]
  16. [Route("employee")]
  17. public object Getrecord()
  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.
  1. EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");
  2. config.EnableCors(cors);

Create ReactJS project

Now let's first create a React application with the following command.
  1. npx create-react-app matform
Install bootstrap by using following command
  1. npm install --save bootstrap
Now, open the index.js file and add Bootstrap reference.
  1. import 'bootstrap/dist/css/bootstrap.min.css';
Now Install the Axios library by using the following command. Learn more about Axios
  1. npm install --save axios
Install react-bootstrap-table2.
Install react bootstrap table by using following command,
  1. npm install react-bootstrap-table-next --save
Now, right click on "src" folder and add a new component named 'Bootstraptab.js'.
Now open Bootstraptab.js component and import required reference. Add the following code in this component.
  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 } />
  69. </div>
  70. </div>
  71. )
  72. }
  73. }
  75. export default Bootstraptab
Run the project by using 'npm start' and check the result,
React Bootstrap Table With Searching And Custom Pagination
React Bootstrap Table With Searching And Custom Pagination
Click on the button to check sorting in table
Implement Searching
Install the following library to add searching in this table.
  1. npm install react-bootstrap-table2-filter --save
Now add the following code in this component.
  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. }
  77. export default Bootstraptab
Run the project by using 'npm start' and check the result,
React Bootstrap Table With Searching And Custom Pagination
React Bootstrap Table With Searching And Custom Pagination
Implement Pagination
Install the following library to add pagination in this table.
  1. npm install react-bootstrap-table2-paginator --save
Now add the following code in this component.
  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',
  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. }
  77. export default Bootstraptab
Run the project by using 'npm start' and check the result
React Bootstrap Table With Searching And Custom Pagination
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.
  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',
  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',
  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. }
  95. export default Bootstraptab
Run the project by using 'npm start' and check the result,
React Bootstrap Table With Searching And Custom Pagination
Now create a new component Bootstraptab1.js and add the following code in this component
  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. }
  97. export default Bootstraptab1
Now open app.js file and add the following code,
  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. }
  13. export default App;
Run the project by using 'npm start' and check the result,
React Bootstrap Table With Searching And Custom Pagination

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 Llarned how to implement sorting, searching and pagination in the table