From 7ab5130d52ab5e9590473ef165af36f62d7207d4 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Tue, 18 Nov 2025 11:12:45 +0100 Subject: [PATCH 1/6] fix(AnalyticalTable): text ellipsis for strings & class for elements for custom Cell --- .../AnalyticalTable.module.css | 11 ++- .../AnalyticalTable.stories.tsx | 39 +++++++++ .../components/AnalyticalTable/Recipes.mdx | 80 ++++++++++++++++++- .../TableBody/VirtualTableBody.tsx | 3 +- .../AnalyticalTable/defaults/Column/Cell.tsx | 2 +- .../components/AnalyticalTable/types/index.ts | 7 +- 6 files changed, 132 insertions(+), 10 deletions(-) diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css index 16be5a4abf7..cea4be59f83 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css @@ -155,6 +155,7 @@ } .tr { + height: var(--_ui5wcr_AnalyticalTable_RowHeight); position: absolute; inset-block-start: 0; inset-inline-start: 0; @@ -226,12 +227,12 @@ display: block; } -.tableText { +/* PUBLIC: When removed or changed, first check if custom inline Cell content is still truncated (Recipes) */ +.textEllipsis { display: inline-block; font-size: var(--sapFontSize); max-width: 100%; box-sizing: border-box; - font-weight: normal; overflow: hidden; word-wrap: normal; white-space: nowrap; @@ -266,6 +267,12 @@ &[aria-selected='true']:not([data-empty-row-cell]):focus::after { inset-block-end: 2px; } + + /* Make ellipsis work for text-only content */ + &:not(:has(*)) { + display: block; + line-height: var(--_ui5wcr_AnalyticalTable_RowHeight); + } } .showVerticalEndBorder .tableCell { diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx index c134c4f082d..12c4fa41936 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx @@ -663,3 +663,42 @@ export const KitchenSink: Story = { return context.viewMode === 'story' ? : ; }, }; + +// ===================== Not displayed in sidebar & tags popover ===================== + +export const EllipsisExamples: Story = { + tags: ['excludeFromSidebar'], + args: { + data: dataLarge.slice(0, 5), + columns: [ + { + Header: 'Plain String (Automatic Ellipsis)', + accessor: 'name', + width: 60, + Cell: ({ value }) => value, + }, + { + Header: 'With textEllipsis Class', + accessor: 'friend.name', + width: 60, + Cell: ({ value, webComponentsReactProperties }) => ( +
+ {value} +
+ ), + }, + { + Header: 'With Text Component', + id: 'description', + width: 60, + Cell: () => ( + + This is a very long text that demonstrates how the Text component handles ellipsis + + ), + }, + ], + visibleRows: 5, + style: { width: 'min(100%, 300px)' }, + }, +}; diff --git a/packages/main/src/components/AnalyticalTable/Recipes.mdx b/packages/main/src/components/AnalyticalTable/Recipes.mdx index d04356f9011..1a3c772ac3c 100644 --- a/packages/main/src/components/AnalyticalTable/Recipes.mdx +++ b/packages/main/src/components/AnalyticalTable/Recipes.mdx @@ -1,7 +1,8 @@ import { TableOfContent } from '@sb/components'; -import { Meta } from '@storybook/addon-docs/blocks'; +import { Meta, Canvas } from '@storybook/addon-docs/blocks'; import { Footer } from '@sb/components'; -import { MessageStrip } from '../../webComponents/index'; +import { MessageStrip } from '../../webComponents/MessageStrip/index'; +import * as ComponentStories from './AnalyticalTable.stories'; @@ -367,4 +368,79 @@ To initially select or expand a row; reorder, filter, group, hide or sort a colu /> ``` +## How to show ellipsis for custom Cells? + +When using custom `Cell` renderers, text truncation with ellipsis works automatically if you return a plain string. However, when rendering custom content, you need to handle ellipsis styling yourself. + +### Automatic Ellipsis (Plain Strings) + +If your custom `Cell` renderer returns a plain string, ellipsis is ensured automatically: + +```jsx +const columns = [ + { + Header: 'Name', + accessor: 'name', + Cell: ({ value }) => value // Plain string - ellipsis works automatically + }, +]; +``` + +### Manual Ellipsis (Custom Elements) + +When rendering custom elements, you need to apply ellipsis styling: + +#### Inline Content + +Use the `webComponentsReactProperties.classes.textEllipsis` class for inline content that should truncate with ellipsis: + +```jsx +const columns = [ + { + Header: 'Name', + accessor: 'name', + Cell: ({ value, webComponentsReactProperties }) => ( + + {value} + + ), + }, +]; +``` + +#### For Web Components with Built-in Text Handling + +Some Web Components like `Text` and `Label` handle text truncation internally and don't require the `textEllipsis` class: + +```jsx +import { Text } from '@ui5/webcomponents-react'; + +const columns = [ + { + Header: 'Description', + accessor: 'description', + Cell: ({ value }) => ( + {value} // Text component handles ellipsis internally + ), + }, +]; +``` + +#### For Other Custom Components + +For multi-line content or custom components that don't handle ellipsis, truncation must be ensured by defining the styles yourself. + +### Example + +
+ Show Example + +
+ +
+
+