I have a list of item which I called from API and uses the react infinite scroller and it works. So I use the same logic of the fetching API with infinite scroller as I use from the list and use it on a table (I am using material tailwind table ). However it does not work and it only fetches data when I open the table window multiple times.
This is my jsx to use the infinite scroller. Im using react-infinite-scroller
<div
className='fixed inset-0 z-50 bg-black flex justify-center items-center bg-opacity-60 backdrop-blur-sm '>
<div className='p-5 bg-white shadow-inner border-e-emerald-600 rounded-lg md:py-5 max-h-screen overflow-y-auto'>
<div>
<Card color="transparent" shadow={false} className='sm:max-w-[22rem] w-[70vh] h-[80vh] 2xs:max-w-[16rem] '>
<CardHeader variant="filled" floated={false} shadow={false} className='bg-primary max-w-[80vh] -my-5 -mx-5 h-[8vh] rounded-none flex justify-between items-center overflow-visible'>
<Typography color="blue-gray" className='text-2xl sm:text-xl ml-4 font-normal'>
Add Non-Barcode Items
</Typography>
<IconButton variant='text' onClick={closePop} className='mr-4'>
<XMarkIcon className='h-5 w-5' />
</IconButton>
</CardHeader>
<CardBody className='px-0 py-2'>
<div className='flex justify-between mt-5'>
<Typography color="blue-gray" className='text-xl sm:text-lg font-normal'>
Select Multiple Items
</Typography>
<Button variant='text' className='p-0' onClick={clearSelection} >
<Typography className='text-lg font-normal flex items-center gap-2 normal-case' >
<BackspaceIcon className='h-5 w-5 text-primary'/>
Clear
</Typography>
</Button>
</div>
<CategorySlider onChange={handleCategoryFilter}/>
<div className="mt-5 mb-2" onSubmit={(e) => e.preventDefault()}>
<div className="scroll-container" style={{ maxHeight: '50vh', overflowY: 'auto' }}>
<Card className="h-full w-full">
<InfiniteScroll
pageStart={0}
loadMore={fetchInvDetails}
hasMore={hasMore}
loader={<Spinner key={0} className='mx-auto my-10' />}
useWindow={false}
threshold={10}
>
<table className="w-full table-auto text-left">
<thead>
<tr>
{TABLE_HEAD.map((head) => (
<th
key={head}
className="border-b border-white bg-gray-200 p-4"
>
<Typography
variant="small"
color="black"
className="font-bold leading-none sm:text-sm w-max"
>
{head}
</Typography>
</th>
))}
</tr>
</thead>
<tbody>
{invDetails.map(({ stockid,stockdesc, totalqty, uom , cat}, index) => {
const isLast = index === invDetails.length - 1;
const classes = isLast ? "p-4 border-b border-white" : "p-4 border-b border-white";
const item = selectedItems[stockid] || {};
const isSelected = item.quantity && item.quantity > 0;
const selected = isSelected ? `${classes} bg-primary` : classes;
return (
<tr key={stockid}>
<td className={`${selected} !w-4/5`}>
<Typography
variant="small"
color="black"
className="font-normal"
>
{stockdesc}
</Typography>
</td>
<td className={`${selected} w-1/6`}>
<Typography
variant="small"
color="black"
className="font-normal"
>
{totalqty}
</Typography>
</td>
<td className={`${selected} w-1/6`}>
<Input
type='Number'
labelProps={{className:"hidden"}}
className='max-w-24 !border !border-black'
max={999}
min={0}
value={item.quantity || ''}
containerProps={{className:"flex-1 !min-w-8 md:w-24"}}
onChange={(e) => handleQuantityChange( stockid, stockdesc,totalqty, uom, cat, e.target.value)}
onKeyDown={e => exceptThisSymbols.includes(e.key) && e.preventDefault()}
/>
</td>
</tr>
);
})}
</tbody>
</table>
</InfiniteScroll>
</Card>
</div>
</div>
</CardBody>
<div className='flex justify-end normal-case py-3'>
<Button
onClick={saveSelectedItemsToDB}
className=' bg-primary text-black sm:w-3/5 w-2/5'
>
Add to List
</Button>
</div>
</Card>
</div>
</div>
</div>