How to implement Async loading of child rows with manual expanding control

[nuwansam]

Hi Kevin,

I am trying to implement an async loading of child rows when the parent row is expanded. However, I couldn't find any good examples or documentation on how to do this, and I tried a bunch of variations which doesn't seem to work.

I set manualExpanding={true} and getIsRowExpanded set to utilize a component state var of expandedRows array to determine if the row is expanded (which is working). I have a cell which shows the expansion icon per row, which triggers a fetch from the server side and I update the table_data state variable when the response is received. I have verified that on the re-render of the component, the MaterialReactTable's data variable is getting the new data which contains the subRows. But the UI is not updating. I think I am missing overriding some other function needed to get this working, but couldn't find what is missing going through the current documentation.

Appreciate if you could add some details around this use case. Thanks.

[rodgetech]

I have similar requirements, did you figure this out @nuwansam?

[nuwansam]

I switched to use Table from antd (https://ant.design/components/table) - works for my requirements.

[jerlam06]

Hi. I have spent my whole day trying to implement the same thing. The documentation on server side rendering is inexistant, now I give up and will try to find a new table component that I can use for this purpose.