[SF][Table]: [Column title is not in one line when popin]

[tandan0813]

Describe the bug

We have a requirement to display 2 lines of Column title text at most and with an icon beside it. However, when we used <Text> with maxLines props, the column title will not in one line when the table pop in. And also, if we wrapped the icon and the text with <FlexBox>, the column title won't be truncated successfully.

Isolated Example

https://stackblitz.com/edit/github-mm4cq7?file=src%2FApp.tsx,package.json

Reproduction steps

Please see the isolated example.

Expected Behaviour

The column title will display in one line when the table pop in.

Screenshots or Videos

No response

UI5 Web Components for React Version

2.4.0

UI5 Web Components Version

2.4.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

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

[Lukas742]

Hi @tandan0813

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

And also, if we wrapped the icon and the text with , the column title won't be truncated successfully.

Setting overflow: hidden; should solve this issue: https://stackblitz.com/edit/github-mm4cq7-3j9jlo?file=src%2FApp.tsx,package.json

---

Hi Colleagues,
there seem to be two issues here.

1. Table behaves differently in React

When rendering Table including a header with custom content, the header is not popped in correctly when using only ui5-webcomponents, strangely it's working with React:

Table in React component

https://stackblitz.com/edit/github-mm4cq7-gthu4e?file=src%2FApp.tsx,index.html,src%2Fmain.tsx

See that the table renders the second column header both as "real" header and popped-in header. Also note that there's an error thrown:

[UI5-FWK] ui5-text not found in dependencies of ui5-table-cell

Table without React

https://stackblitz.com/edit/github-f5ng4m?file=index.html,main.js

See that the table renders the second column header only as "real" header and not as popped-in header. Additionally, there's no error thrown.

2. CSS of Popin Header container is not customizable by standard means

This is the issue described by @tandan0813. The CSS of the container (<div class="popin-header-colon" ...) of the popped in header cell is not customizable, leading to misalignments.

You can check out the React example above to see this issue: https://stackblitz.com/edit/github-mm4cq7-gthu4e?file=src%2FApp.tsx,index.html,src%2Fmain.tsx

The example isn't using our wrapper.

[ivoplashkov]

Hello colleagues,

The issues are reproducible and described in details by @Lukas742.
Could you please have a look?

Thank you and regards,
Ivaylo