Issue Combining Virtualization with Expanding Sub-Rows in Material React Table

Question

First of all, I’d like to express my admiration for this package—it’s incredibly flexible and thoughtfully designed

Recently, I implemented virtualization in one of my projects to handle a large dataset, using the example provided in your documentation: Infinite Scrolling Example. It worked flawlessly—thank you for this excellent guide!

However, my project also requires an expand-collapse functionality for rows. I attempted to combine the virtualization example with the Expanding Sub-Rows Guide. Unfortunately, I’ve encountered an issue where expanding a parent row does not display the sub-rows.

Problem: When I expand a parent row, the sub-rows don’t render correctly in the table.

Steps I Followed:

I used the infinite scrolling example to handle large datasets with virtualization. I integrated the expanding sub-rows functionality as described in the guide.

Question: Could you please provide guidance on how to properly combine these two features? Are there any specific adjustments or best practices needed to make them work seamlessly together?

Thank you in advance for your help, and I’m happy to provide additional details or code snippets if needed.

This is what i have so far code wise:

    const { data, fetchNextPage, isError, isFetching, isLoading } = useInfiniteQuery({
    queryKey: ['table-data', columnFilters, expanded, sorting],
    queryFn: async ({ pageParam = 0 }) => {
      const offset = pageParam * fetchSize;
  
      const preQueryFilters = props.preQueryRes.decompose()[0].rawData();
      let response,processedResp;
  
      const expandedRowId = Object.entries(expanded).find(([id, isExpanded]) => isExpanded)?.[0];
  
      if (isTriggeredByExpansion) { //checking if there is a change in expanded state
        console.log('Fetching subRows for expanded row:', expandedRowId);
  
        const id = expandedRowId.split('-').pop(); // Extract the last part of the ID . since i only allow one expansion at a time
        const [subDim,readyQuery] = addSubQueryFilter(props.query, id)
        response = await loadCubeData(readyQuery);
        try{
          processedResp = processData(response,subDim)
          processedResp = [...completeData.current,...processedResp]
        }
        catch(e){
          console.log(e)
        }
      } else {
        console.log('Fetching top-level rows');
        response = await loadCubeData(addPreQueryResAsFilter(props.query, preQueryFilters.slice(offset, offset + fetchSize)));
        try{
          processedResp = processData(response)
          completeData.current=[...completeData.current,...processedResp]
        }
        catch(e){
          console.log(e)
        }
        // completeData.current = processedResp; // Cache top-level data
      }
  
      return {
        data: processedResp,
        meta: { totalRowCount: preQueryFilters.length || 0 },
      };
    },
    initialPageParam: 0,
    getNextPageParam: (_lastGroup, groups) => groups.length,
    refetchOnWindowFocus: false,
     });

 
     const flatReportData = useMemo(() => {
    console.log('my data.....',data)

    const newData = data?.pages?.flatMap((page) => page.data) || [];
    return [...newData];
      }, [data]);

       !r.parentId)}
            enablePagination={false}
            enableRowVirtualization
            getRowId={(originalRow) => originalRow.id} // Use the `id` field as the unique identifier
            muiTableContainerProps={{
              ref: tableContainerRef,
              sx: { maxHeight: '600px' },
              onScroll: (event) => fetchMoreOnBottomReached(event.target),
            }}
            muiToolbarAlertBannerProps={isError ? { color: 'error', children: 'Error loading data' } : undefined}
            renderBottomToolbarCustomActions={() => (
              
                Fetched {totalFetched} of {totalDBRowCount} total rows.
              
            )}
            
            state={{
              expanded,
              columnFilters,
              isLoading,
              showAlertBanner: isError,
              showProgressBars: isFetching,
              sorting,
            }}
            rowVirtualizerInstanceRef={rowVirtualizerInstanceRef}
            rowVirtualizerOptions={{ overscan: 4 }}
            onColumnFiltersChange={setColumnFilters}
            onExpandedChange= {setExpanded}
            enableTopToolbar={false}
            enableExpanding
            getRowCanExpand =  {(row) => {return row.original.level < levels.length}} //just some type of boolean
            getSubRows={ (row) => {
              console.log('row-expanded',row,flatReportData,flatReportData.filter((r) => r.parentId === row.id)) 
              return flatReportData.filter((r) => r.parentId === row.id)
            }}
            onSortingChange={setSorting}
            paginateExpandedRows={false}
            enableColumnFilters={false}
            enableColumnActions={false}
            enableFullScreenToggle={false}
            enableDensityToggle={false}
            initialState={{ density: 'spacious' }}
            enableHiding={false}
           
          />

Issue Combining Virtualization with Expanding Sub-Rows in Material React Table

Answers (1)

Related Questions