How to make mui table with loading skeleton in react js?
March 11, 2024Hi Friends π,
Welcome To aGuideHub!
To make mui table with loading skeleton in React js, you can use <Skeleton />
. It will make mui table with loading skeleton in react js.
Today, I am going to show you, how to make mui table with loading skeleton 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 skeleton in react js.
npm
npm install @mui/material @emotion/react @emotion/styled
yarn
yarn add @mui/material @emotion/react @emotion/styled
Step 2: Import the required Material-UI components.
To make mui table with loading skeleton 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, useEffect } from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Skeleton } 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>
{loading ? (
// Rendering skeleton while loading
<>
<TableRow>
<TableCell>
<Skeleton />
</TableCell>
<TableCell>
<Skeleton />
</TableCell>
<TableCell>
<Skeleton />
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<Skeleton />
</TableCell>
<TableCell>
<Skeleton />
</TableCell>
<TableCell>
<Skeleton />
</TableCell>
</TableRow>
</>
) : (
// Rendering actual data when loaded
data.map(item => (
<TableRow key={item.id}>
<TableCell>{item.id}</TableCell>
<TableCell>{item.name}</TableCell>
<TableCell>{item.quantity}</TableCell>
</TableRow>
))
)}
</TableBody>
MUI material make mui table with loading skeleton 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 <Skeleton />
to make mui table with loading skeleton in react js.
App.js
import React, { useState, useEffect } from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Skeleton } from '@mui/material';
const DataTable = () => {
const [loading, setLoading] = useState(true);
const [data, setData] = useState([]);
// Simulating loading data from an API
useEffect(() => {
const fetchData = async () => {
// Simulating an API call delay
await new Promise(resolve => setTimeout(resolve, 2000));
// Simulating fetched data
const fetchedData = [
{ id: 1, name: 'Item 1', quantity: 5 },
{ id: 2, name: 'Item 2', quantity: 10 },
{ id: 3, name: 'Item 3', quantity: 15 },
];
setData(fetchedData);
setLoading(false);
};
fetchData();
}, []);
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>Name</TableCell>
<TableCell>Quantity</TableCell>
</TableRow>
</TableHead>
<TableBody>
{loading ? (
// Rendering skeleton while loading
<>
<TableRow>
<TableCell>
<Skeleton />
</TableCell>
<TableCell>
<Skeleton />
</TableCell>
<TableCell>
<Skeleton />
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<Skeleton />
</TableCell>
<TableCell>
<Skeleton />
</TableCell>
<TableCell>
<Skeleton />
</TableCell>
</TableRow>
</>
) : (
// Rendering actual data when loaded
data.map(item => (
<TableRow key={item.id}>
<TableCell>{item.id}</TableCell>
<TableCell>{item.name}</TableCell>
<TableCell>{item.quantity}</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</TableContainer>
);
};
export default DataTable;
In the above code example, I have used the @mui/material
component and make mui table with loading skeleton in react js.
Check the output of the above code example.
All the best π