How to make mui table with loading overlay in react js?
March 07, 2024Hi Friends 👋,
Welcome To aGuideHub!
To make mui table with loading overlay in React js, you can use this code setTimeout(() => { setLoading(false);}, 2000); . It will make mui table with loading overlay in react js.
Today, I am going to show you, how to make mui table with loading overlay in react js.
Table of contents
- Install Material-UI
- Import the required Material-UI components.
- Define the table body.
Let’s start with the first step.
Step 1: Install Material-UI
Install the following packages to use make mui table with loading overlay in react js.
npm
npm install @mui/material @emotion/react @emotion/styledyarn
yarn add @mui/material @emotion/react @emotion/styledStep 2: Import the required Material-UI components.
To make mui table with loading overlay in React, first, you have to import the table. We have imported the table, tableBody, tableCell, tableContainer, tableHead, tableRow, and Paper components from the @mui/material library.
import React, { useState } from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, CircularProgress } from '@mui/material';Step 3: Define the table body.
Table body is needed after table head, This code creates a table body with one row for each object in the rows array.
<TableBody>
{/* Render data when not loading */}
{!loading && data.map(row => (
<TableRow key={row.id}>
<TableCell>{row.id}</TableCell>
<TableCell>{row.name}</TableCell>
<TableCell>{row.age}</TableCell>
</TableRow>
))}
</TableBody>MUI material make mui table with loading overlay example.
The below code is an example of a Material UI table. You have to import @mui material table. In the Material Table function when you create a table component, it consists of a table head and a table body. In this code, we create our TableContainer component with a Paper component as its child and use setTimeout(() => { setLoading(false);}, 2000); to make mui table with loading overlay in react js.
App.js
import React, { useState } from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, CircularProgress } from '@mui/material';
const LoadingTable = () => {
const [loading, setLoading] = useState(true);
// Simulated data for demonstration
const data = [
{ id: 1, name: 'John Doe', age: 30 },
{ id: 2, name: 'Jane Smith', age: 25 },
{ id: 3, name: 'Bob Johnson', age: 35 }
];
setTimeout(() => {
setLoading(false);
}, 2000);
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>Name</TableCell>
<TableCell>Age</TableCell>
</TableRow>
</TableHead>
<TableBody>
{/* Loading overlay */}
{loading && (
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100px' }}>
<CircularProgress />
</div>
)}
{/* Render data when not loading */}
{!loading && data.map(row => (
<TableRow key={row.id}>
<TableCell>{row.id}</TableCell>
<TableCell>{row.name}</TableCell>
<TableCell>{row.age}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
export default LoadingTable;In the above code example, I have used the @mui/material component and make mui table with loading overlay in react js.
Check the output of the above code example.
All the best 👍