Is there a way to virtualize (e.g. with react-window) antd nested tables?

Question

antd has an example in their docs for integrating virtual scroll via react-window to improve performance for large table data

Anyone done something like that for nested tables in antd? Or have any pointers/tips for how to?

Answer 1

<div
    className={classNames('virtual-table-cell', {
        'virtual-table-cell-last': columnIndex === mergedColumns.length - 1,
    })}
    style={style}
>
    {mergedColumns[columnIndex].dataIndex !== '' &&
    !mergedColumns[columnIndex].render ? (
        <div> {rawData[rowIndex][mergedColumns[columnIndex].dataIndex]} </div>
    ) : (
        <div>
            {mergedColumns[columnIndex].render(
                rawData[rowIndex][mergedColumns[columnIndex].dataIndex],
                rawData[rowIndex]
            )}
        </div>
    )}
</div>

Answer 2

The mentioned example eventually uses react-window list as the body of antd table. That diminishes the actual implementation of table rows of antd. If you want to achieve nested table functionality you will have to manually write it inside the grid. As I have rendered the render function from columns here inside the gird:

<div
          className={classNames('virtual-table-cell', {
            'virtual-table-cell-last': columnIndex === mergedColumns.length - 1,
          })}
          style={style}
        >
          {((mergedColumns as any)[columnIndex].dataIndex) !== '' && !((mergedColumns as any)[columnIndex].render)  ? (
            <div> {(rawData[rowIndex] as any)[(mergedColumns as any)[columnIndex].dataIndex]} </div>
          ):(
            <div>  
                {(mergedColumns as any)[columnIndex].render()}
            </div>
          ) }
        </div>