How to make mui table with infinite scroll in react js?
March 14, 2024Hi Friends 👋,
Welcome To aGuideHub!
To make mui table with infinite scroll in React js, you can use {loading && <CircularProgress style={{ position: 'absolute', top: '100px' }} />} . It will make mui table with infinite scroll in react js.
Today, I am going to show you, how to make mui table with infinite scroll 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 infinite scroll 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 infinite scroll 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, useRef, useLayoutEffect, useCallback } from 'react'
import { TableContainer, Table, TableHead, TableRow, TableCell, TableBody, 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>
{rows.map(({ id, name, type }) => (
<TableRow key={id}>
<TableCell>{name}</TableCell>
<TableCell>{type}</TableCell>
</TableRow>
))}
</TableBody>MUI material make mui table with infinite scroll 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 {loading && <CircularProgress style={{ position: 'absolute', top: '100px' }} />} to make mui table with infinite scroll in react js.
App.js
import React, { useState, useRef, useLayoutEffect, useCallback } from 'react'
import { TableContainer, Table, TableHead, TableRow, TableCell, TableBody, CircularProgress } from '@mui/material';
const generateItems = amount => {
const arr = Array.from(Array(amount))
return arr.map((number, i) => ({
id: i,
name: `Name ${i + 1}`,
type: `Item Type ${i + 1}`,
}))
}
const TableWithInfiniteScroll = () => {
const tableEl = useRef()
const [rows, setRows] = useState(generateItems(50))
const [loading, setLoading] = useState(false)
const [distanceBottom, setDistanceBottom] = useState(0)
// hasMore should come from the place where you do the data fetching
// for example, it could be a prop passed from the parent component
// or come from some store
const [hasMore] = useState(true)
const loadMore = useCallback(() => {
const loadItems = async () => {
await new Promise(resolve =>
setTimeout(() => {
const amount = rows.length + 50
setRows(generateItems(amount))
setLoading(false)
resolve()
}, 2000)
)
}
setLoading(true)
loadItems()
}, [rows])
const scrollListener = useCallback(() => {
let bottom = tableEl.current.scrollHeight - tableEl.current.clientHeight
// if you want to change distanceBottom every time new data is loaded
// don't use the if statement
if (!distanceBottom) {
// calculate distanceBottom that works for you
setDistanceBottom(Math.round(bottom * 0.2))
}
if (tableEl.current.scrollTop > bottom - distanceBottom && hasMore && !loading) {
loadMore()
}
}, [hasMore, loadMore, loading, distanceBottom])
useLayoutEffect(() => {
const tableRef = tableEl.current
tableRef.addEventListener('scroll', scrollListener)
return () => {
tableRef.removeEventListener('scroll', scrollListener)
}
}, [scrollListener])
return (
<TableContainer ref={tableEl}>
{loading && <CircularProgress style={{ position: 'absolute', top: '100px' }} />}
<Table stickyHeader>
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Type</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map(({ id, name, type }) => (
<TableRow key={id}>
<TableCell>{name}</TableCell>
<TableCell>{type}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)
}
export default TableWithInfiniteScroll;In the above code example, I have used the @mui/material component and made mui table with infinite scroll in react js.
Check the output of the above code example.
All the best 👍