AnalyticalTable: Nested column headers render incorrectly / first header row hidden

[JGuardiola95]

Describe the bug

Hi team!

I am trying to use nested column definitions in AnalyticalTable to create grouped column headers, which is a supported feature in react-table v7. (You can also see a working example here)

However, while the grouped header row is created in the DOM, it is not visible in the UI.
It appears to be overlapped by the second header row.

Inspecting the DOM shows that both header rows are rendered, but the first row is not visible.

Is grouped column header rendering supported in AnalyticalTable?

Thanks for your work!

Isolated Example

https://stackblitz.com/edit/github-pxscgzqq?file=src%2FApp.tsx

Reproduction steps

1. Create an AnalyticalTable with nested column definitions:
2. Render the table with any simple dataset.
3. Observe the header in the browser:
4. Optionally set headerRowHeight={70} to see more clearly how the second header row exist:

Expected Behaviour

Nested column definitions should render grouped headers correctly, similar to how react-table v7 grouped headers work

Name                   Info
-----------------------------------------
First Name | Last Name | Age | Visits

Screenshots or Videos

No response

UI5 Web Components for React Version

2.17.0

UI5 Web Components Version

2.17.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration

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

[Lukas742]

Hi @JGuardiola95

nested column headers are not supported for the AnalyticalTable, as there are no design, UX or a11y specifications defined. With the linked PR we'll add an error log to make this clearer.