I am using Waypoint with Material UI Table . I want to call my API when 4-5 items/rows are pending for the user to see inside the table so that there is enough data always and user has never has to see the loader on the screen.
I have tried using threshold but it doesen't seem to work . I am attaching my Code for your reference.
`import React, { useState, useEffect } from "react";
// @material-core
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
//react-waypoint
import { Waypoint } from "react-waypoint";
//molecules
import CircularLoader from "components/molecules/CircularLoader";
//dummy data
import { rows } from "./dummyData";
const useStyles = makeStyles({
table: {
minWidth: 650,
},
hideLastBorder: {
"&:last-child td, &:last-child th": {
border: 0,
},
},
});
export default function TableInfiniteScrolling({
initialOffSet = 10,
generalOffSet = 10,
}) {
const classes = useStyles();
const [data, setData] = useState([]);
const [hasMoreItems, setHasMoreItems] = useState(true);
const [isLoading, setIsLoading] = useState(false);
const fetchData = (offset) => {
setIsLoading(true);
let newtableData = [];
for (
let i = data.length;
i < data.length + offset && i < rows.length;
i++
) {
newtableData.push(rows[i]);
}
if (newtableData.length === 0) {
setHasMoreItems(false);
}
setData((prevData) => {
return [...prevData, ...newtableData];
});
setIsLoading(false);
};
useEffect(() => {
fetchData(initialOffSet);
}, []);
return (
<>
ID
Name
Email
Gender
{data.map((row, index) => (
<React.Fragment key={index}>
{row.id}
{row.name}
{row.email}
{row.gender}
</React.Fragment>
))}
{isLoading && <CircularLoader />}
{hasMoreItems && (
<Waypoint
onEnter={() => fetchData(generalOffSet)}
threshold={0.5}
/>
)}
</>
);
}`
I am using Waypoint with Material UI Table . I want to call my API when 4-5 items/rows are pending for the user to see inside the table so that there is enough data always and user has never has to see the loader on the screen.
I have tried using threshold but it doesen't seem to work . I am attaching my Code for your reference.
`import React, { useState, useEffect } from "react";
// @material-core
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
//react-waypoint
import { Waypoint } from "react-waypoint";
//molecules
import CircularLoader from "components/molecules/CircularLoader";
//dummy data
import { rows } from "./dummyData";
const useStyles = makeStyles({
table: {
minWidth: 650,
},
hideLastBorder: {
"&:last-child td, &:last-child th": {
border: 0,
},
},
});
export default function TableInfiniteScrolling({
initialOffSet = 10,
generalOffSet = 10,
}) {
const classes = useStyles();
const [data, setData] = useState([]);
const [hasMoreItems, setHasMoreItems] = useState(true);
const [isLoading, setIsLoading] = useState(false);
const fetchData = (offset) => {
};
useEffect(() => {
fetchData(initialOffSet);
}, []);
return (
<>
ID
Name
Email
Gender
{data.map((row, index) => (
<React.Fragment key={index}>
{row.id}
{row.name}
{row.email}
{row.gender}
</React.Fragment>
))}
);
}`