Unsure of how to use row expanding in V8, doesn't work with the same usecase as V7

[Gusis93]

So, here is a codesanbox fork from the expanding example, where I just have, to my understanding, the most basic implementation of expanding rows:

• https://codesandbox.io/s/patient-firefly-j7zv2o?file=/src/main.tsx

In here, I use getExpandedRowModel and thats it. What I'm trying to do is recreate what I had in V7, where I render the expanded row in line 194. This way I can use a custom component for the subRowComponent.

My problem is that, row.getCanExpand is always false and row.getToggleExpandedHandler() is not working either, the expanding buttons do nothing. So I can't toggle the rows..

IF I change row.getToggleExpandedHandler() to row.toggleExpand then I can expand the row but I can't collapse it (like it stays on row.getIsExpanded() === true forever), but then if I do () => row.toggleExpanded(!row.getIsExpanded()) then I can both expand it and collapse it but it feels weird that I have to manually do this when I believe thats what row.getToggleExpandedHandler() should do for me?

what am I doing wrong here?

[AzzouQ]

Replace onClick: row.toggleExpanded by onClick: () => row.toggleExpanded()

onClick implicitly send React.MouseEventHandler<HTMLButtonElement> as a parameter, so the way you do it is the equivalent of onClick: (event: React.MouseEventHandler<HTMLButtonElement>) => row.toggleExpanded(event) where event will always be true, which make the row openable but not closable.

[Gusis93]

That makes sense, though it doesn't explain why getToggleExpandedHandler doesn't work.

[AzzouQ]

From the source code, you can see that getToggleExpandedHandler check for getCanExpand. In your case, you don't provide getSubRows to useReactTable so getCanExpand will always be false, resulting in getToggleExpandedHandler to return before calling toggleExpanded.

In your case, where you handle subRow yourself, just use toggleExpanded.

Feel free to mark the discussion as answered if you have no further question 😁

[Gusis93]

Thats what I was thinking, so the expanding functionality is to use with subrows. Would you say that is better to transform the data to have subrows instead of my solution of manually toggling the row and having a custom component? Or really they are different use cases?

Just trying to understand how to better optimize.

Thank you for the replies!

[AzzouQ]

I would say it depend on use case.

the expanding functionality is to use with subrows

Not necessarily true. Still from source code, getCanExpand is the only method that rely on subRow, all the logic handling expanding will work regardless of subRow.

getSubRows only accept an object of the same type as the one provided to useReactTable.
So if you can transform your data to match subrows type, then do this. But in my case, I wanted to display a custom component, that doesn't share anything with the original row. So instead of handling expanding myself, I did like you and used the expanding state at my advantage my own way without subrow.

[Gusis93]

Thank you, marked as an answer

[AnishChikhaliya]

Can we create a custom expand row view in that?

[Gusis93]

You should be able to. You just have to render it manually when you create the table rows

[clarkkamorr24]

can you share or share a sample code on how to create a custom expand row?

[sucheendra-ramesh]

Approach 1

This is the table instance

const [expanded, setExpanded] = useState({});

const table = useReactTable({
data,
columns,
state: {
expanded,
},

onExpandedChange: setExpanded,
getSubRows: (row: any) => {
return row.subRows;
},
getCoreRowModel: getCoreRowModel(),
getExpandedRowModel: getExpandedRowModel(),
debugTable: true,
});

useEffect(() => { table.toggleAllRowsExpanded(true); //This will auto expand all the rows by default }, [data]);

Approach 2

Just pass in the default value of expanded as true as shown below

const [expanded, setExpanded] = useState(true);
Both the approaches worked fine for me