AnalyticalTable: in TreeTable mode the subRows don't have properties and methods

[Feodorius]

Describe the bug Hi! I am using AnalyticalTable with TreeTable and MultiSelect modes. I've noticed that when the subRows are collapsed, their properties and methods are missing.

Isolated Example https://codesandbox.io/s/lucid-raman-mmhqgr?file=/src/App.js

To Reproduce Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/lucid-raman-mmhqgr?file=/src/App.js

2. In the list of categories select Hardware category (the subRows should be collapsed)

3. The list of sortedRows will appear in the console. (It is applicable for all types of 'rows', not only sortedRows)

4. The first item will show the Hardware category object, where we can see all the properties we can use:

5. But when we open subRows property with the array of children, we cannot find a lot of properties and methods:

When the subrows are expanded, the row objects have all the needed properties.

Expected behavior All rows and subRows have the same properties and methods.

UI5 Web Components for React Information @ui5/webcomponents version: 1.3.1 @ui5/webcomponents-react version: 0.23.1 Operating System: Windows Browser: Chrome

Additional context Add any other context about the problem here.

[Lukas742]

Hi @Feodorius

subRows are not "prepared" initially for performance reasons. If you need all properties of the rows right away, you can prepare them yourself by calling the react-table instance function prepareRow(row). See codesandbox. If you only need to change a row's state (e.g. expanded, selected, etc.) you could also use the respective instance function for that. (e.g. toggleRowExpanded("1.0.0"), toggleRowSelected(rowId: string), etc.)

[Feodorius]

Hi @Lukas742, thanks for the explanation.

But in your code example with the usage of prepareRow(row) functionality I again see the lack of some properties. So, yes, now I can see toggleRowExpanded/Selected methods, but cannot find isSelected property. This situation can be reproduced only if I select the collapsed parent category. Even with prepareRow. Maybe I miss something in the logics? Could you please help me find the workaround or give me a hint how to get all the subrows properties?

Thanks and best regards, Feodorius

[Lukas742]

You are right, I overlooked that only the methods are added when preparing a row.

This functionality is unfortunately the default behavior of the underlying react-table (see here). Could you elaborate a bit on what you are trying to achieve? Maybe there's another solution which doesn't involve the isSelected property of sub-rows.

[Feodorius]

Hi @Lukas742, I have the TreeTable with MultiSelect Mode. The content of the table is the list of Categories, with subcategories and sub-subcategories, etc.(sometimes it will have 10 levels of depth). My purpose is to implement a functionality to get the list of selected items for the futher needs. So the logics is:

• If I select the Parent (1 lvl of depth), I will get an array with the Parent's data object. For me this will mean that all the children are also selected.
• If I remove selection from 1 child (lvl 2), I will get all the rest selected children instead of Parent. And again, if I select this child back, I will get the only Parent data.
• This logics should be applicable for all the depth levels.

I've created the recursive function that goes through all the depth levels and checks the isSelected status of all the children and finally returns me an array of selected Categories. Unfortunately, for now it works only with expanded rows :( If you have any ideas how to avoid the usage of isSelected prop, please let me know.

Thanks and best regards, Feodorius

[Lukas742]

Hi @Feodorius

if I understood correctly the main problem here is, that you cannot get all selected rows, right? In that case you can use the internal table state to achieve this. I created another codeSandbox that should explain this more: https://codesandbox.io/s/sharp-butterfly-45x9cg?file=/src/App.js

[Feodorius]

Hi @Lukas742, I've checked your solution, and used some parts of it. Works fine, thanks a lot!