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

  

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.

 

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

Complete Employee controller code

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.

Create a ReactJS Project

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

 

Install bootstrap by using the following command.

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

 

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

Install React Bootstrap table by using the following command:

 

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

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.

 
Now, add the following code in this component.

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.

Now, add the following code in this component.

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. 

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:

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

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.



Source link

Write A Comment