AnalyticalTable: in hierarchical tree view, node and leaf items at the same level are not vertically aligned

[ehn-sap]

Describe the bug

Nodes (items having sub-items) and leaves (having no descendant) are differently indented.

Isolated Example

https://codesandbox.io/p/sandbox/analyticaltable-tree-view-lz23r3

Reproduction steps

1. open the linked code sandbox
2. observe the layout of items at a given level of the hierarchy
3. at any level, node labels have an indentation, but leave labels have a slightly different one
   In the provided screenshot, one can believe that item_3 is a child of item_2, but they are siblings.

Expected Behaviour

Item Labels (of node items and leaf items) at the same level in a hierarchy should be vertically aligned.

Screenshots or Videos

UI5 Web Components for React Version

latest

UI5 Web Components Version

latest

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @ehn-sap

thanks for reporting! The linked PR will fix the issue.

Since the rows should be displayed flat, I would recommend using the "Compact" content density mode and not to fall below the standard height of 34px. This ensures that all elements (such as the expand button) are displayed according to the design specifications and that there are no unintended overflows or other side-effects. I've also added a note to the rowHeight prop that outlines this better.

[ehn-sap]

Hi @ehn-sap

thanks for reporting! The linked PR will fix the issue.

Since the rows should be displayed flat, I would recommend using the "Compact" content density mode and not to fall below the standard height of 34px. This ensures that all elements (such as the expand button) are displayed according to the design specifications and that there are no unintended overflows or other side-effects. I've also added a note to the rowHeight prop that outlines this better.

Thanks a lot @Lukas742 for the quick fix and the recommandation, we're going to check that with our PE and UX.

[Lukas742]

Oops, I also wanted to add a example of setting the content density, but forgot to add the link. Here you go: https://stackblitz.com/edit/github-wmaqyf?file=src%2FMockData.ts,index.html,src%2FApp.tsx

[ui5-webcomponents-react-bot]

🎉 This issue has been resolved in version v1.26.0 🎉

The release is available on v1.26.0

Your semantic-release bot 📦🚀