How to make mui table with lazy loading in react js?
March 11, 2024Hi Friends 👋,
Welcome To aGuideHub!
To make mui table with lazy loading in React js, you can use this code you can call api’s when user reach end of scroll just like we have provided example of handleScroll . It will make mui table with lazy loading in react js.
Today, I am going to show you, how to make mui table with lazy loading 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 lazy loading 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 lazy loading 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 } 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>
{data.map((row, index) => (
<TableRow key={index}>
<TableCell>{row.id}</TableCell>
<TableCell>{row.name}</TableCell>
<TableCell>{row.email}</TableCell>
{/* Add more table cells as needed */}
</TableRow>
))}
{loading && (
<TableRow>
<TableCell colSpan={2}>Loading...</TableCell>
</TableRow>
)}
</TableBody>MUI material make mui table with lazy loading 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 handleScroll to make mui table with lazy loading in react js.
App.js
import React, { useState, useEffect } from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';
const LazyLoadTable = () => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
const [page, setPage] = useState(1);
useEffect(() => {
setLoading(true);
// Simulate fetching data from an API
fetch("https://jsonplaceholder.typicode.com/users")
.then(response => response.json())
.then(newData => {
setData(prevData => [...prevData, ...newData]);
setLoading(false);
})
.catch(error => {
console.error('Error fetching data: ', error);
setLoading(false);
});
}, [page]);
const handleScroll = (event) => {
const bottom = event.target.scrollHeight - event.target.scrollTop === event.target.clientHeight;
if (bottom && !loading) {
setPage(prevPage => prevPage + 1);
}
};
return (
<TableContainer component={Paper} onScroll={handleScroll} style={{ maxHeight: '400px', overflowY: 'auto' }}>
<Table>
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>Name</TableCell>
<TableCell>Email</TableCell>
{/* Add more table headers as needed */}
</TableRow>
</TableHead>
<TableBody>
{data.map((row, index) => (
<TableRow key={index}>
<TableCell>{row.id}</TableCell>
<TableCell>{row.name}</TableCell>
<TableCell>{row.email}</TableCell>
{/* Add more table cells as needed */}
</TableRow>
))}
{loading && (
<TableRow>
<TableCell colSpan={2}>Loading...</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
);
};
export default LazyLoadTable;In the above code example, I have used the @mui/material component and make mui table with lazy loading in react js.
Check the output of the above code example.
All the best 👍
