I have a nested data structure that looks like the following snippet:
[
{
id: "item1",
children: [
{
id: "item1child1",
children: []
},
{
id: "item1child2",
children: []
}
]
},
{
id: "item2",
children: [
{
id: "item2child1",
children: []
},
{
id: "item2child2",
children: [
{
id: "item2child2child1",
children: [],
}
]
}
]
}
]
This is similar to a file structure, where a item in the array could have its own sub-array of children items, which also could have its own sub-array, and so on.
Using Fluent UI's DetailsList, I want to be able to display this in a hierarchical structure, where sub-items are spaced further and further right. I was thinking of using a recursive approach as such (pseudocode):
RowComponent = ({item}) =>
<Row item={item} />
if (item.children.length > 0):
for each (child in item.children):
<RowComponent item={child} />
I have successfully implemented this basic view by using a custom onRenderRow function in the DetailsList. You can view my implementation in this CodePen here. I am keeping track of the depth of call stack and using style={{marginLeft: 40*level}} to format the sub-items in the list.
However, I also want to add a multi-select functionality for each item in the list. I have been playing around with the ISelection interface that gets passed through the selection prop of the DetailsList, but the problem is that upon selecting a single row in the list, it still selects the entire tree of items.
When I click on the radio button for "item1child1", the items "item1" and "item1child2" also get selected. I would only like to select the one that I clicked on. I would also like to support selecting multiple rows. How can I do this using the DetailsList?
