diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css
index 5e8bfdd17cd..f5623b79dd4 100644
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css
+++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css
@@ -62,3 +62,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 0bbceff6f71..9ae20f7931c 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';
@@ -108,16 +109,16 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
style.textAlign = column.hAlign.toLowerCase();
}
- 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.625;
+ margin += 0.75;
}
style.marginInlineEnd = `${margin}rem`;
@@ -234,11 +235,20 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
className={classNames.iconContainer}
data-component-name={`AnalyticalTableHeaderIconsContainer-${columnId}`}
>
- {isFiltered && }
+ {isFiltered && (
+
+ )}
{column.isSorted && (
-
+
+ )}
+ {column.isGrouped && (
+
)}
- {column.isGrouped && }
{hasPopover &&