diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css index 19ca479a8d8..b50371f05f8 100644 --- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css +++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css @@ -49,3 +49,8 @@ display: flex; justify-content: center; } + +.icon { + height: 0.8125rem; + width: 0.8125rem; +} diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx index 55cc01c4ad5..4643877d48a 100644 --- a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx +++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx @@ -1,4 +1,5 @@ import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual'; +import IconDesign from '@ui5/webcomponents/dist/types/IconDesign.js'; import iconFilter from '@ui5/webcomponents-icons/dist/filter.js'; import iconGroup from '@ui5/webcomponents-icons/dist/group-2.js'; import iconSortAscending from '@ui5/webcomponents-icons/dist/sort-ascending.js'; @@ -112,15 +113,17 @@ export const ColumnHeader = (props: ColumnHeaderProps) => { style.textAlign = column.hAlign.toLowerCase() as any; } - if (column.isSorted) margin++; - if (column.isGrouped) margin++; - if (isFiltered) margin++; + if (column.isSorted) margin += 0.8125; + if (column.isGrouped) margin += 0.8125; + if (isFiltered) margin += 0.8125; if (margin === 0) { return style; } - if (margin > 0) margin += 0.5; + if (margin > 0) { + margin += 0.75; + } style.marginInlineEnd = `${margin}rem`; @@ -218,11 +221,20 @@ export const ColumnHeader = (props: ColumnHeaderProps) => { className={classNames.iconContainer} data-component-name={`AnalyticalTableHeaderIconsContainer-${columnId}`} > - {isFiltered && <Icon name={iconFilter} aria-hidden />} + {isFiltered && ( + <Icon design={IconDesign.NonInteractive} name={iconFilter} aria-hidden className={classNames.icon} /> + )} {column.isSorted && ( - <Icon name={column.isSortedDesc ? iconSortDescending : iconSortAscending} aria-hidden /> + <Icon + design={IconDesign.NonInteractive} + name={column.isSortedDesc ? iconSortDescending : iconSortAscending} + aria-hidden + className={classNames.icon} + /> + )} + {column.isGrouped && ( + <Icon design={IconDesign.NonInteractive} name={iconGroup} aria-hidden className={classNames.icon} /> )} - {column.isGrouped && <Icon name={iconGroup} aria-hidden />} </div> </div> {hasPopover && popoverOpen && (