diff --git a/packages/main/src/components/AnalyticalTable/docs/FeatureExamples/AnalyticalTableFeatureExamples.stories.tsx b/packages/main/src/components/AnalyticalTable/docs/FeatureExamples/AnalyticalTableFeatureExamples.stories.tsx index b43b46b796b..5168a2e5e00 100644 --- a/packages/main/src/components/AnalyticalTable/docs/FeatureExamples/AnalyticalTableFeatureExamples.stories.tsx +++ b/packages/main/src/components/AnalyticalTable/docs/FeatureExamples/AnalyticalTableFeatureExamples.stories.tsx @@ -1319,3 +1319,64 @@ export const ColumnClassName: Story = { ); }, }; + +const borderlessColumns: AnalyticalTableColumnDefinition[] = [ + { Header: 'Name', accessor: 'name' }, + { Header: 'Age', accessor: 'age' }, + { Header: 'Friend Name', accessor: 'friend.name' }, + { Header: 'Friend Age', accessor: 'friend.age' }, +]; + +export const BorderlessContainer: Story = { + tags: ['custom'], + render() { + return ( + <> + + + + ); + }, +}; + +export const NoVerticalCellBorders: Story = { + tags: ['custom'], + render() { + return ( + <> + + + + ); + }, +}; diff --git a/packages/main/src/components/AnalyticalTable/docs/FeatureExamples/FeatureExamples.mdx b/packages/main/src/components/AnalyticalTable/docs/FeatureExamples/FeatureExamples.mdx index d364d9ad302..dcf5fb0c2e8 100644 --- a/packages/main/src/components/AnalyticalTable/docs/FeatureExamples/FeatureExamples.mdx +++ b/packages/main/src/components/AnalyticalTable/docs/FeatureExamples/FeatureExamples.mdx @@ -1053,4 +1053,40 @@ const columns = [ ``` +## Custom Border Styles + +> **⚠️ Not backed by SAP Design:** there are no design specifications for a fully borderless Grid/AnalyticalTable — for example the [`sap.ui.table.Table`](https://ui5.sap.com/#/entity/sap.ui.table.Table) always renders its borders and exposes no API to remove them. Customizing them is therefore your own responsibility and can lead to visual inconsistencies with other tables in the system. The recipes below also rely on internal CSS custom properties and `data-*` hooks that may change between releases. Use with caution. + +There is no public prop for customizing the table's borders. The two opt-in recipes below apply a CSS class to the table — one removes the outer container frame, the other removes the vertical dividers between columns. Each class is applied to the table's root element. + +### Borderless Container + +Removes the outer container frame (top, inline-end and bottom borders). The class also covers the sibling vertical scrollbar; the cell and row borders are kept. + + + +```css +.at-borderless-container { + --_ui5wcr-AnalyticalTable-OuterBorderBlock: none; + --_ui5wcr-AnalyticalTable-OuterBorderInline: none; + --sapList_TableFooterBorder: transparent; +} +.at-borderless-container [data-component-name='AnalyticalTableContainer']::after { + display: none; +} +``` + +### Table Without Vertical Cell Borders + +Removes the vertical dividers between columns (header and body) while keeping the horizontal row separators. + + + +```css +.at-no-vertical-cell-borders [role='columnheader'], +.at-no-vertical-cell-borders [data-column-id-cell] { + border-inline-end: none; +} +``` +