### Issue: Nested Rows Not Rendering When Dynamically Setting Data
Problem Description:
I am trying to render a Handsontable instance with nested rows . Here’s the issue I’m encountering:
- When I set the
dataproperty dynamically usinghotInstance.loadData(nestedData)or by first setting the data and then calling.updateSettings({ nestedRows: true }), the rows don’t render as expected. The output only shows the parent row without any nested child rows (see attached screenshot). - However, when I hardcode the data directly into the
dataproperty of the<HotTable />component, everything renders perfectly, including the __children rows.
My Setup:
I’m using the following properties:
nestedRows: true-
rowHeaders,colHeaders, andcontextMenuenabled.
Code Snippet:
const nestedData = [
{
category: 'Best Rock Performance',
artist: null,
title: null,
label: null,
__children: [
{ title: "Don't Wanna Fight", artist: 'Alabama Shakes', label: 'ATO Records' },
{ title: 'What Kind Of Man', artist: 'Florence & The Machine', label: 'Republic' },
{ title: 'Something From Nothing', artist: 'Foo Fighters', label: 'RCA Records' },
{ title: "Ex's & Oh's", artist: 'Elle King', label: 'RCA Records' },
{ title: 'Moaning Lisa Smile', artist: 'Wolf Alice', label: 'RCA Records/Dirty Hit' },
],
},
];
useEffect(() => {
if (hotTableRef.current) {
const hotInstance = hotTableRef.current.hotInstance;
hotInstance.loadData(nestedData); // Data gets loaded but nested rows do not render
}
}, []);
Questions:
- Why does dynamically setting data with
loadData()not render the nested rows, even though the same data works when hardcoded into thedataproperty? - Is there an additional step required to make nested rows work dynamically? Should I explicitly call
updateSettingswithnestedRows: trueafter loading the data?
Any guidance on dynamically setting data for nested rows would be much appreciated. Thank you!
