Introduction

In this article, we will learn how to use the Material-UI Table in React applications. Material UI is one of the most popular UI frameworks developed by Google. The Material UI library is designed for faster, easier, and developer-friendly user interface development. Now Material-UI is supported in all major browsers and platforms.

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 React strap and HTML

Implementation Steps

  • Create a database and table
  • Create Asp.net Web API Project
  • Create React App
  • Install Material-UI
  • Install Axios 

You may also enjoy: How to Learn React.js, Part 1: The React Road Map for Modern Web Developers 

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 a demo data in this table.

Create a New Web API Project

Open Visual Studio and create a new project.

Create new project

Create new project

Change the name to MatUITable.

Changing the name

Changing the name

Choose the template “Web API.”

Choosing a template

Choosing a template

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

Add data

Add data

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

Add ADO.NET Entity Data Model

Add ADO.NET Entity Data Model

Select EF Designer from the database and click the “Next” button. 

Select EF Designer

Select EF Designer

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

Add connections properties

Add connections properties

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

Finished

Finished

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 ReactJS Project

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

Open the newly created project in Visual Studio Code and install Material-UI. 

Install Material-UI

Now Install Material-UI by using the following command:

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

Now go to the src folder and add two new components; in one component we are going to use classes and in another, we will use Hooks.

  • MatTable.js
  • MatPaginationTable.js

Now open MatTable.js component and import required reference for material UI table.

 Add the following code in this component.

Now run the project by using the command  npm start  and check result.

Running the project

Running the project

Now open MatPaginationTable.js and add the following code to show the table with pagination.

Add the reference of this component in app.js file.

Now run the project.

Finished the project

Finished the project

Further Reading

Solving an Error in ReactJS/Material-UI


Top 5 Google Material Design Framework You Should Learn



Source link

Write A Comment