'Enabling "row" expansion for a Grid

I am trying to essentially make row expansion work in an already full-fledged Grid component. Basically when we click a cell in row index 0, it should inject a new div under that "row" with more information about that specific "row".

("row" = collection of cells)

From reading the docs I understand that cellRangeRenderer is called when we are rendering a bunch of cells together. I tried implementing my own range renderer where I would have a div parent wrap the cells in a row and possibly add more UI elements into that div based off of a prop, but it seems to render the content as more of an overlay.

Does anyone have any insight into how I can inject a new "row" under the currently clicked "row"?

If you need more info, I would be happy to give it. Just didn't know how much info would be too much info. Let me know if anyone has an idea of how to go about this!!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source