diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css index 19ca479a8d8..1d5fe626628 100644 --- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css +++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css @@ -32,6 +32,7 @@ } .text { + cursor: pointer; color: inherit; font-family: inherit; width: 100%; diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx index df16d2e1f1c..839609cca8f 100644 --- a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx +++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx @@ -94,11 +94,12 @@ export const ColumnHeader = (props: ColumnHeaderProps) => { const [popoverOpen, setPopoverOpen] = useState(false); const columnHeaderRef = useRef(null); + const childIsString = typeof children === 'string'; const tooltip = (() => { if (headerTooltip) { return headerTooltip; } - if (typeof children === 'string') { + if (childIsString) { return children; } return null; @@ -163,7 +164,7 @@ export const ColumnHeader = (props: ColumnHeaderProps) => { className={clsx(classNames.thContainer, showVerticalEndBorder && classNames.verticalEndBorder)} style={{ position: 'absolute', - top: 0, + insetBlockStart: 0, width: `${virtualColumn.size}px`, ...directionStyles }} @@ -197,19 +198,27 @@ export const ColumnHeader = (props: ColumnHeaderProps) => { aria-sort={ariaSort} title={title} > -
- - {children} - +
+ {childIsString ? ( + + {children} + + ) : ( + children + )}