[SF] Table - When the column header labels are very long, show them as truncated text instead of increasing the table header height to accommodate them

[Vir-Mittal]

Feature Request Description

Sandbox - https://codesandbox.io/s/table-with-long-column-header-labels-vdrofi?file=/src/App.js

For the Table component, when very long labels are used for the column headers and the screen width is large, the column headers are displayed as expected, taking up as much space as possible -

However, when the screen width is small, the table header height increases in order to accommodate the long labels -

Instead of increasing the column header height, would it be possible to show the long labels as truncated text instead, something like this -

This would be similar to how other components such as the Card Header show truncated text when the text is too long

Proposed Solution

Instead of increasing the column header height, would it be possible to show the long labels as truncated text instead, something like this -

Priority

• [ ] Low
• [x] Medium
• [ ] High
• [ ] Very High

A clear and concise description of the impact/urgency of the required feature.

Stakeholder Info (if applicable)

• Organization: {SuccessFactors}

[terezamch]

Hello @SAP/ui5-webcomponents-topic-rl,

The reporter requests truncation behaviour of the column text of the table. Could you please process the feature request?

Best regards, Tereza

[nikolay-kolarov]

Hello,

You can use a label in the column to control the wrapping. For example:

<Label wrappingType="Normal">
    {col.label}
</Label>

Keep in mind that the tooltip is not accessible on mobile devices, so you will get into an accessibility issue due to the truncation.

Best Regards, Nikolay

[Vir-Mittal]

Hello @nikolay-kolarov,

Sorry I'm not sure if I missed something but when I tried to use a label in the column with wrappingType="None", instead of truncating the text, the table gets a horizontal scrollbar -

https://codesandbox.io/s/table-with-long-column-header-labels-vdrofi?file=/src/App.js

I also tried restricting the width of the table/columns but it did not help either.

Is there another way around this to achieve the truncation behaviour?

Thank you

[nikolay-kolarov]

Hi @Vir-Mittal ,

You have not imported the css. And you can use the exposed part "column" to style the column (e.g. #tbl ui5-table-column::part(column) { ....). Please check the API for more info https://sap.github.io/ui5-webcomponents/master/playground/components/Table/

Best Regards, Nikolay

[Vir-Mittal]

Hi @nikolay-kolarov,

Thank you for your help. We tried implementing the truncation as you suggested and on first glance it seemed to be working alright. However, we found that we need to customize the max-width of the column to say 100 px and when the screen size/table size changes, this causes issues because for small screen widths, it just ends up adding a scroll bar which is not ideal. So, a fixed max-width would not work in this case.

You can see this behaviour in this sandbox - https://codesandbox.io/s/table-with-long-column-header-labels-vdrofi?file=/src/styles.module.css

Works fine with some screen sizes -

Does not works when screen width is small, ends up adding a scroll bar -

Is there a way for you to add the truncation as part of the component so that we can avoid using these customizations?

Best, Vir

[Vir-Mittal]

@nikolay-kolarov @terezamch Hi, just following up, is there any update on this?