Replies: 1 comment 1 reply
-
1. Best ApproachesUsing initialStateconst INITIAL_STATE = {
expanded: data.map(item => item.id)
};
const tree = useTree(
data,
{
state: INITIAL_STATE
},
); Using getStateconst tree = useTree(
data,
{
getState: (state) => ({
...state,
expanded: data.map(item => item.id)
})
},
); 2. Why This HappensThe "flash" occurs because:
3. Better SolutionsCleaner useEffect (if needed)const tree = useTree(data);
useEffect(() => {
// Use requestAnimationFrame to prevent flash
requestAnimationFrame(() => {
tree.fns.onAddAll(data.map(item => item.id));
});
}, [data]); // Depend on data Pre-processing Data// Helper to expand all nodes
const expandAllNodes = (items) => {
return items.map(item => ({
...item,
expanded: true,
children: item.children ? expandAllNodes(item.children) : []
}));
};
// Process data before passing to table
const expandedData = expandAllNodes(data);
const tree = useTree(expandedData); 4. Best Practices
5. Combined Approach (if needed)const INITIAL_STATE = {
expanded: data.map(item => item.id)
};
const tree = useTree(
data,
{
state: INITIAL_STATE,
getState: (state) => ({
...state,
expanded: data.map(item => item.id)
})
},
); Key Points:
The initialState or getState approaches are recommended because they:
Choose based on your specific needs and data structure. |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Does anyone know how to set the default mode on a tree to expand all the rows?
I do this now using an
useEffect()
callingtree.fns.onAddAll(data.map((item) => item.id))
which is called when the page loads, but it's kinda funky and you can see it flipping from the default collapse mode.Beta Was this translation helpful? Give feedback.
All reactions