i have a customized react-virtuso table with a each row have a accordions like expand collapse row , i splitted the code in 3 different files i have a data set in one file then mapping the data set in to the react-virtuso , when i am running my code while rendering i am getting page unresponsive
i am tried with scroll functionality each table will render while a user scoll alone but also i wil navigate through the navbar for the each components at the time when i am doing like a scroll rendering , for example i have 30 table component with different data set now i am scroll to the 2nd one then navigate to the last one by clicking in the navbar at the time the table not rendered. i need without scroll rendering i want to render all the tables in the first time.
const handleScroll = () => {
const container = scrollContainerRef.current;
if (container) {
const { scrollTop, clientHeight, scrollHeight } = container;
if (scrollHeight - (scrollTop + clientHeight) < 100) {
loadNextItem();
}
}
};
const loadNextItem = (item) => {
const nextIndex = loadedItems.length;
// Calculate the next index based on the current length of loadedItems
if (nextIndex < leftNavigationFields.length) {
setLoadingIndex(nextIndex);
setTimeout(() => {
setLoadedItems((prevLoadedItems) => {
const newLoadedItems = [...prevLoadedItems];
newLoadedItems[nextIndex] = nextIndex; // Assign the nextIndex value to the corresponding index
return newLoadedItems;
});
setLoadingIndex(-1);
}, 500); // Delay of 1 second
}
};
<div ref={scrollContainerRef} style={{ height: '94vh', overflow: 'auto' , scrollBehavior:"smooth" }} onScroll={handleScroll}>
{navigationfield.map((item , index) =>{
const isLoadedAndChecked = loadedItems.includes(index) && item.checked === true && item.fieldName!=="Job Details";
if (isLoadedAndChecked ) {
return (
<div id={item.fieldName}>
<Suspense fallback={<div style={{ marginLeft: '150px', marginTop: '40px', color: 'red' }} key={isLoadedAndChecked}>Loading</div>} >
<TableVirtuoso
itemName={item.fieldName}
icon={item.icon}
columns={item.columns}
listData={item.data}
checkbox={true}
hover={true}
isOpened={isOpened}
/>
</Suspense>
</div>
);
} else if (loadingIndex === index) {
return (
<div style={{ marginLeft: '120px', marginTop: '40px', color: 'red' }} key={item.fieldName}>Loading</div>
);
}
return null;
})}
</div>
inside the navigationfield i have a different dataset now i am rendering this my page gettting unresponive i need a solution without scroll functionallity
