From 973c839814e4f5e81db210700f26da36c0a192c5 Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Fri, 16 Jan 2026 12:23:26 +0100
Subject: [PATCH] fix(ui): show active sorting indicator in Table component

The Table component wasn't showing a visual indicator when a column
was actively sorted. The sort button was only visible on hover.

This fix uses React Aria's `data-sort-direction` attribute to keep
the indicator visible when sorting is active, and rotates the arrow
icon via CSS for descending order.

Affected components: Table, Column

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 .changeset/eight-aliens-warn.md               |  7 +++++++
 .../ui/src/components/Table/Table.module.css  | 21 +++++++------------
 .../components/Table/components/Column.tsx    | 10 +++------
 3 files changed, 17 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/eight-aliens-warn.md

diff --git a/.changeset/eight-aliens-warn.md b/.changeset/eight-aliens-warn.md
new file mode 100644
index 0000000000..f602b288d0
--- /dev/null
+++ b/.changeset/eight-aliens-warn.md
@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Fixed Table sorting indicator not being visible when a column is actively sorted.
+
+Affected components: Table, Column
diff --git a/packages/ui/src/components/Table/Table.module.css b/packages/ui/src/components/Table/Table.module.css
index ea148ae893..be35898fb0 100644
--- a/packages/ui/src/components/Table/Table.module.css
+++ b/packages/ui/src/components/Table/Table.module.css
@@ -39,12 +39,6 @@
     padding: var(--bui-space-3);
     font-size: var(--bui-font-size-3);
     color: var(--bui-fg-primary);
-
-    &:hover {
-      .bui-TableHeadSortButton {
-        opacity: 1;
-      }
-    }
   }
 
   .bui-TableHeadSelection {
@@ -68,17 +62,16 @@
     transition: opacity 0.1s ease-in-out;
     color: var(--bui-fg-secondary);
 
+    .bui-TableHead:hover &,
+    [data-sort-direction='ascending'] &,
+    [data-sort-direction='descending'] & {
+      opacity: 1;
+    }
+
     & svg {
       transition: transform 0.1s ease-in-out;
     }
-
-    &[data-sort-order='asc'] svg {
-      opacity: 1;
-      transform: rotate(0);
-    }
-
-    &[data-sort-order='desc'] svg {
-      opacity: 1;
+    [data-sort-direction='descending'] & svg {
       transform: rotate(180deg);
     }
   }
diff --git a/packages/ui/src/components/Table/components/Column.tsx b/packages/ui/src/components/Table/components/Column.tsx
index 9076ec8557..473f95a40e 100644
--- a/packages/ui/src/components/Table/components/Column.tsx
+++ b/packages/ui/src/components/Table/components/Column.tsx
@@ -20,7 +20,7 @@ import { TableDefinition } from '../definition';
 import styles from '../Table.module.css';
 import clsx from 'clsx';
 import { ColumnProps } from '../types';
-import { RiArrowUpLine, RiArrowDownLine } from '@remixicon/react';
+import { RiArrowUpLine } from '@remixicon/react';
 
 /** @public */
 export const Column = (props: ColumnProps) => {
@@ -32,7 +32,7 @@ export const Column = (props: ColumnProps) => {
       className={clsx(classNames.head, styles[classNames.head], className)}
       {...rest}
     >
-      {({ allowsSorting, sortDirection }) => (
+      {({ allowsSorting }) => (
         <div
           className={clsx(
             classNames.headContent,
@@ -48,11 +48,7 @@ export const Column = (props: ColumnProps) => {
                 styles[classNames.headSortButton],
               )}
             >
-              {sortDirection === 'descending' ? (
-                <RiArrowDownLine size={16} />
-              ) : (
-                <RiArrowUpLine size={16} />
-              )}
+              <RiArrowUpLine size={16} />
             </span>
           )}
         </div>