How to group columns dynamically?

Hello every one! I'm trying to group a set of movies by genre and then display in each row the main actors of the movie. But in my use case I need the group names and the column names to be dynamic, so if my backend just send me set of movies that just are: horror and action I should only see two groups called horror and action, then the movies of that genre and finally in the rows should appear the actors of that movie. This is what I got so far: https://codesandbox.io/s/focused-ives-gem5nr?file=/src/main.tsx It does the job, but I don't think this is the right way, it feels "hacky", for example, there is always a white row at the end, even for the biggest column, I have to verify manually for each cell to see if the actor belongs to a movie or not. Hope you can help me to do this right. Thanks in advance for your kind support. 😊

imjulianeral

CodeSandbox

focused-ives-gem5nr - CodeSandbox

focused-ives-gem5nr by imjulianeral using @tanstack/react-table, radash, react, react-dom