I have the following scenario:
- fetch a list of events, which provides initial set of data to be used in Table.
- within initial list of events, there are 3 cells which require additional api calls to obtain data more data.
I have tried cellDataGetter, cellRenderer, rowRenderer, and now I've settled on InfiniteLoader, which has proven to be the most successful up to this point.
The problem is that once the promise is resolved, the data gets updated, but the Table row does not render with the update. Usually, this would require forceUpdate(), however, I'm using a functional component and I don't know how to get a reference to the table since the ref prop gets registerChild from InfiniteLoader.
What's the best way to make additional asynchronous requests to obtain data for certain cells in a Table? Am I going down the best path here?
Here are parts of the component that I think are relevant:
const loadMoreRows = useCallback(async ({ startIndex }) => {
if (accountId) {
const page = Math.round(startIndex / ROW_COUNT);
const events = await fetchEvents(page, ROW_COUNT);
const nEvents = events.map((event) => {
const eventCopy = { ...event };
fetchViewersByEventId(event.id).then((viewers) => {
eventCopy.viewers = viewers;
});
return eventCopy;
});
setLoadedData(prev => prev.concat(nEvents));
}
}, [accountId, fetchEvents, fetchViewersByEventId]);
<AutoSizer>
{({ height, width }) => (
<InfiniteLoader
isRowLoaded={isRowLoaded}
loadMoreRows={loadMoreRows}
rowCount={eventListCount}
>
{({ onRowsRendered, registerChild }) => (
<Table
ref={registerChild}
rowHeight={40}
rowCount={loadedData.length}
width={width}
height={height}
headerHeight={40}
rowGetter={({ index }) => loadedData[index]}
onRowsRendered={onRowsRendered}
rowClassName="row"
data={loadedData}
headerClassName="headerColumn"
>
{columnData.current.map(col => (
<Column
key={col.id}
label={col.label}
dataKey={col.id}
flexGrow={col.flexGrow}
cellRenderer={col.cellDataGetter}
width={col.width}
/>
))}
</Table>
)}
</InfiniteLoader>
)}
</AutoSizer>
I have tried many different things and I could only get the additional data to appear once I start scrolling, which makes sense since the rows are rendered at that point.
