From 02887dc52eeda86a376df68599e7f7c0f672dd94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= <joshua.goldberg@sentry.io>
Date: Fri, 24 Jul 2026 10:18:29 -0400
Subject: [PATCH 1/9] fix(tables): Add aria-sort to sortable table headers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SimpleTable's sortable column headers only rendered a visual sort indicator (an aria-hidden arrow), so screen readers had no way to announce sort state. Set aria-sort=ascending|descending on the columnheader when a column is sorted.

Also dedupe the Alignments type, which was defined in both gridEditable/sortLink and utils/discover/fields. Keep the canonical definition in utils/discover/fields, export it, and import it directly everywhere; sortLink no longer re-exports it. Behavior-preserving — the shared type is now stricter, dropping a stray | undefined that no caller relied on.

Refs DE-1399

Fixes DE-1393
---
 static/app/components/tables/gridEditable/sortLink.tsx      | 2 +-
 static/app/components/tables/simpleTable/index.tsx          | 1 +
 static/app/utils/discover/fields.tsx                        | 2 +-
 .../alerts/rules/metric/details/relatedTransactions.tsx     | 2 +-
 static/app/views/explore/components/table.tsx               | 2 +-
 .../explore/multiQueryMode/queryVisualizations/table.tsx    | 2 +-
 .../common/components/tableCells/renderHeadCell.tsx         | 3 +--
 static/app/views/organizationStats/usageStatsProjects.tsx   | 6 ++----
 8 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/static/app/components/tables/gridEditable/sortLink.tsx b/static/app/components/tables/gridEditable/sortLink.tsx
index 51c601afa12c..4732040145d3 100644
--- a/static/app/components/tables/gridEditable/sortLink.tsx
+++ b/static/app/components/tables/gridEditable/sortLink.tsx
@@ -5,9 +5,9 @@ import type {LocationDescriptorObject} from 'history';
 import {Link} from '@sentry/scraps/link';
 
 import {IconArrow} from 'sentry/icons';
+import type {Alignments} from 'sentry/utils/discover/fields';
 import {useNavigate} from 'sentry/utils/useNavigate';
 
-export type Alignments = 'left' | 'right' | undefined;
 export type Directions = 'desc' | 'asc' | undefined;
 
 type Props = {
diff --git a/static/app/components/tables/simpleTable/index.tsx b/static/app/components/tables/simpleTable/index.tsx
index 2c8eef2d9d0f..c028e17f8c4d 100644
--- a/static/app/components/tables/simpleTable/index.tsx
+++ b/static/app/components/tables/simpleTable/index.tsx
@@ -53,6 +53,7 @@ function HeaderCell({
   return (
     <ColumnHeaderCell
       {...props}
+      aria-sort={isSorted ? (sort === 'asc' ? 'ascending' : 'descending') : undefined}
       isSorted={isSorted}
       onClick={handleSortClick}
       role="columnheader"
diff --git a/static/app/utils/discover/fields.tsx b/static/app/utils/discover/fields.tsx
index 4c3d6c780f3b..0ea3366f5b7b 100644
--- a/static/app/utils/discover/fields.tsx
+++ b/static/app/utils/discover/fields.tsx
@@ -118,7 +118,7 @@ export type QueryFieldValue =
 // Column is just an alias of a Query value
 export type Column = QueryFieldValue;
 
-type Alignments = 'left' | 'right';
+export type Alignments = 'left' | 'right';
 
 export type CountUnit = 'count';
 
diff --git a/static/app/views/alerts/rules/metric/details/relatedTransactions.tsx b/static/app/views/alerts/rules/metric/details/relatedTransactions.tsx
index e766d5548508..b47084201805 100644
--- a/static/app/views/alerts/rules/metric/details/relatedTransactions.tsx
+++ b/static/app/views/alerts/rules/metric/details/relatedTransactions.tsx
@@ -6,13 +6,13 @@ import type {Location} from 'history';
 import {Link} from '@sentry/scraps/link';
 
 import {GridEditable} from 'sentry/components/tables/gridEditable';
-import type {Alignments} from 'sentry/components/tables/gridEditable/sortLink';
 import {useStateBasedColumnResize} from 'sentry/components/tables/gridEditable/useStateBasedColumnResize';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import type {TableData, TableDataRow} from 'sentry/utils/discover/discoverQuery';
 import {DiscoverQuery} from 'sentry/utils/discover/discoverQuery';
 import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
+import type {Alignments} from 'sentry/utils/discover/fields';
 import {fieldAlignment} from 'sentry/utils/discover/fields';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import type {MetricRule} from 'sentry/views/alerts/rules/metric/types';
diff --git a/static/app/views/explore/components/table.tsx b/static/app/views/explore/components/table.tsx
index 1918da513f4b..7e5b94adbba0 100644
--- a/static/app/views/explore/components/table.tsx
+++ b/static/app/views/explore/components/table.tsx
@@ -4,7 +4,6 @@ import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {COL_WIDTH_MINIMUM} from 'sentry/components/tables/gridEditable';
-import type {Alignments} from 'sentry/components/tables/gridEditable/sortLink';
 import {
   Grid as _Table,
   Body as _TableWrapper,
@@ -16,6 +15,7 @@ import {
   GridRow,
 } from 'sentry/components/tables/gridEditable/styles';
 import {defined} from 'sentry/utils/defined';
+import type {Alignments} from 'sentry/utils/discover/fields';
 import {Actions} from 'sentry/views/discover/table/cellAction';
 
 interface TableProps extends React.ComponentProps<typeof _TableWrapper> {
diff --git a/static/app/views/explore/multiQueryMode/queryVisualizations/table.tsx b/static/app/views/explore/multiQueryMode/queryVisualizations/table.tsx
index 8686ba2c4345..b1c1f12f8139 100644
--- a/static/app/views/explore/multiQueryMode/queryVisualizations/table.tsx
+++ b/static/app/views/explore/multiQueryMode/queryVisualizations/table.tsx
@@ -9,13 +9,13 @@ import {Tooltip} from '@sentry/scraps/tooltip';
 
 import {EmptyStateWarning} from 'sentry/components/emptyStateWarning';
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
-import type {Alignments} from 'sentry/components/tables/gridEditable/sortLink';
 import {GridBodyCell, GridHeadCell} from 'sentry/components/tables/gridEditable/styles';
 import {IconArrow} from 'sentry/icons/iconArrow';
 import {IconStack} from 'sentry/icons/iconStack';
 import {IconWarning} from 'sentry/icons/iconWarning';
 import {t} from 'sentry/locale';
 import {defined} from 'sentry/utils/defined';
+import type {Alignments} from 'sentry/utils/discover/fields';
 import {
   fieldAlignment,
   parseFunction,
diff --git a/static/app/views/insights/common/components/tableCells/renderHeadCell.tsx b/static/app/views/insights/common/components/tableCells/renderHeadCell.tsx
index c3f4ddc7c298..01abd1b595f3 100644
--- a/static/app/views/insights/common/components/tableCells/renderHeadCell.tsx
+++ b/static/app/views/insights/common/components/tableCells/renderHeadCell.tsx
@@ -4,9 +4,8 @@ import type {Location} from 'history';
 import {Tooltip} from '@sentry/scraps/tooltip';
 
 import type {GridColumnHeader} from 'sentry/components/tables/gridEditable';
-import type {Alignments} from 'sentry/components/tables/gridEditable/sortLink';
 import {SortLink} from 'sentry/components/tables/gridEditable/sortLink';
-import type {Sort} from 'sentry/utils/discover/fields';
+import type {Alignments, Sort} from 'sentry/utils/discover/fields';
 import {
   aggregateFunctionOutputType,
   fieldAlignment,
diff --git a/static/app/views/organizationStats/usageStatsProjects.tsx b/static/app/views/organizationStats/usageStatsProjects.tsx
index 7ae6121de044..2a648900d2d8 100644
--- a/static/app/views/organizationStats/usageStatsProjects.tsx
+++ b/static/app/views/organizationStats/usageStatsProjects.tsx
@@ -10,10 +10,7 @@ import type {DateTimeObject} from 'sentry/components/charts/utils';
 import {getSeriesApiInterval} from 'sentry/components/charts/utils';
 import {ALL_ACCESS_PROJECTS} from 'sentry/components/pageFilters/constants';
 import {SearchBar} from 'sentry/components/searchBar';
-import type {
-  Alignments,
-  Directions,
-} from 'sentry/components/tables/gridEditable/sortLink';
+import type {Directions} from 'sentry/components/tables/gridEditable/sortLink';
 import {SortLink} from 'sentry/components/tables/gridEditable/sortLink';
 import {DATA_CATEGORY_INFO, DEFAULT_STATS_PERIOD} from 'sentry/constants';
 import {t} from 'sentry/locale';
@@ -21,6 +18,7 @@ import type {DataCategoryInfo} from 'sentry/types/core';
 import {DataCategoryExact, Outcome} from 'sentry/types/core';
 import type {Project} from 'sentry/types/project';
 import {getApiUrl} from 'sentry/utils/api/getApiUrl';
+import type {Alignments} from 'sentry/utils/discover/fields';
 import {hasDynamicSamplingCustomFeature} from 'sentry/utils/dynamicSampling/features';
 import {useApiQuery} from 'sentry/utils/queryClient';
 import {useOrganization} from 'sentry/utils/useOrganization';

From 8abae8619dae9c092133af0ed312007ac9b0c588 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= <joshua.goldberg@sentry.io>
Date: Fri, 24 Jul 2026 11:05:59 -0400
Subject: [PATCH 2/9] Move to gridEditable/types

---
 static/app/components/tables/gridEditable/sortLink.tsx        | 2 +-
 static/app/components/tables/gridEditable/types.ts            | 2 ++
 static/app/utils/discover/fields.tsx                          | 3 +--
 .../views/alerts/rules/metric/details/relatedTransactions.tsx | 3 +--
 static/app/views/explore/components/table.tsx                 | 2 +-
 .../explore/multiQueryMode/queryVisualizations/table.tsx      | 2 +-
 .../insights/common/components/tableCells/renderHeadCell.tsx  | 4 ++--
 static/app/views/organizationStats/usageStatsProjects.tsx     | 2 +-
 8 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/static/app/components/tables/gridEditable/sortLink.tsx b/static/app/components/tables/gridEditable/sortLink.tsx
index 4732040145d3..be0d995f915a 100644
--- a/static/app/components/tables/gridEditable/sortLink.tsx
+++ b/static/app/components/tables/gridEditable/sortLink.tsx
@@ -4,8 +4,8 @@ import type {LocationDescriptorObject} from 'history';
 
 import {Link} from '@sentry/scraps/link';
 
+import type {Alignments} from 'sentry/components/tables/gridEditable';
 import {IconArrow} from 'sentry/icons';
-import type {Alignments} from 'sentry/utils/discover/fields';
 import {useNavigate} from 'sentry/utils/useNavigate';
 
 export type Directions = 'desc' | 'asc' | undefined;
diff --git a/static/app/components/tables/gridEditable/types.ts b/static/app/components/tables/gridEditable/types.ts
index a143776807e3..2fe3aaa6df48 100644
--- a/static/app/components/tables/gridEditable/types.ts
+++ b/static/app/components/tables/gridEditable/types.ts
@@ -6,6 +6,8 @@
 
 type ObjectKey = string | number;
 
+export type Alignments = 'left' | 'right';
+
 export type GridColumn<K = ObjectKey> = {
   key: K;
   width?: number;
diff --git a/static/app/utils/discover/fields.tsx b/static/app/utils/discover/fields.tsx
index 0ea3366f5b7b..43aea463ba65 100644
--- a/static/app/utils/discover/fields.tsx
+++ b/static/app/utils/discover/fields.tsx
@@ -3,6 +3,7 @@ import isEqual from 'lodash/isEqual';
 import type {SelectValue} from '@sentry/scraps/select';
 
 import type {FilterKeySection} from 'sentry/components/searchQueryBuilder/types';
+import type {Alignments} from 'sentry/components/tables/gridEditable';
 import {RELEASE_ADOPTION_STAGES} from 'sentry/constants';
 import type {Organization} from 'sentry/types/organization';
 import {assert} from 'sentry/types/utils';
@@ -118,8 +119,6 @@ export type QueryFieldValue =
 // Column is just an alias of a Query value
 export type Column = QueryFieldValue;
 
-export type Alignments = 'left' | 'right';
-
 export type CountUnit = 'count';
 
 export type PercentageUnit = 'percentage';
diff --git a/static/app/views/alerts/rules/metric/details/relatedTransactions.tsx b/static/app/views/alerts/rules/metric/details/relatedTransactions.tsx
index b47084201805..6df1ca4d2160 100644
--- a/static/app/views/alerts/rules/metric/details/relatedTransactions.tsx
+++ b/static/app/views/alerts/rules/metric/details/relatedTransactions.tsx
@@ -5,14 +5,13 @@ import type {Location} from 'history';
 
 import {Link} from '@sentry/scraps/link';
 
-import {GridEditable} from 'sentry/components/tables/gridEditable';
+import {GridEditable, type Alignments} from 'sentry/components/tables/gridEditable';
 import {useStateBasedColumnResize} from 'sentry/components/tables/gridEditable/useStateBasedColumnResize';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import type {TableData, TableDataRow} from 'sentry/utils/discover/discoverQuery';
 import {DiscoverQuery} from 'sentry/utils/discover/discoverQuery';
 import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
-import type {Alignments} from 'sentry/utils/discover/fields';
 import {fieldAlignment} from 'sentry/utils/discover/fields';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import type {MetricRule} from 'sentry/views/alerts/rules/metric/types';
diff --git a/static/app/views/explore/components/table.tsx b/static/app/views/explore/components/table.tsx
index 7e5b94adbba0..0fa70ac0f86d 100644
--- a/static/app/views/explore/components/table.tsx
+++ b/static/app/views/explore/components/table.tsx
@@ -4,6 +4,7 @@ import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {COL_WIDTH_MINIMUM} from 'sentry/components/tables/gridEditable';
+import type {Alignments} from 'sentry/components/tables/gridEditable';
 import {
   Grid as _Table,
   Body as _TableWrapper,
@@ -15,7 +16,6 @@ import {
   GridRow,
 } from 'sentry/components/tables/gridEditable/styles';
 import {defined} from 'sentry/utils/defined';
-import type {Alignments} from 'sentry/utils/discover/fields';
 import {Actions} from 'sentry/views/discover/table/cellAction';
 
 interface TableProps extends React.ComponentProps<typeof _TableWrapper> {
diff --git a/static/app/views/explore/multiQueryMode/queryVisualizations/table.tsx b/static/app/views/explore/multiQueryMode/queryVisualizations/table.tsx
index b1c1f12f8139..4ce0414acde2 100644
--- a/static/app/views/explore/multiQueryMode/queryVisualizations/table.tsx
+++ b/static/app/views/explore/multiQueryMode/queryVisualizations/table.tsx
@@ -9,13 +9,13 @@ import {Tooltip} from '@sentry/scraps/tooltip';
 
 import {EmptyStateWarning} from 'sentry/components/emptyStateWarning';
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
+import type {Alignments} from 'sentry/components/tables/gridEditable';
 import {GridBodyCell, GridHeadCell} from 'sentry/components/tables/gridEditable/styles';
 import {IconArrow} from 'sentry/icons/iconArrow';
 import {IconStack} from 'sentry/icons/iconStack';
 import {IconWarning} from 'sentry/icons/iconWarning';
 import {t} from 'sentry/locale';
 import {defined} from 'sentry/utils/defined';
-import type {Alignments} from 'sentry/utils/discover/fields';
 import {
   fieldAlignment,
   parseFunction,
diff --git a/static/app/views/insights/common/components/tableCells/renderHeadCell.tsx b/static/app/views/insights/common/components/tableCells/renderHeadCell.tsx
index 01abd1b595f3..b6aef63b1765 100644
--- a/static/app/views/insights/common/components/tableCells/renderHeadCell.tsx
+++ b/static/app/views/insights/common/components/tableCells/renderHeadCell.tsx
@@ -3,9 +3,9 @@ import type {Location} from 'history';
 
 import {Tooltip} from '@sentry/scraps/tooltip';
 
-import type {GridColumnHeader} from 'sentry/components/tables/gridEditable';
+import type {Alignments, GridColumnHeader} from 'sentry/components/tables/gridEditable';
 import {SortLink} from 'sentry/components/tables/gridEditable/sortLink';
-import type {Alignments, Sort} from 'sentry/utils/discover/fields';
+import type {Sort} from 'sentry/utils/discover/fields';
 import {
   aggregateFunctionOutputType,
   fieldAlignment,
diff --git a/static/app/views/organizationStats/usageStatsProjects.tsx b/static/app/views/organizationStats/usageStatsProjects.tsx
index 2a648900d2d8..658bf1955091 100644
--- a/static/app/views/organizationStats/usageStatsProjects.tsx
+++ b/static/app/views/organizationStats/usageStatsProjects.tsx
@@ -10,6 +10,7 @@ import type {DateTimeObject} from 'sentry/components/charts/utils';
 import {getSeriesApiInterval} from 'sentry/components/charts/utils';
 import {ALL_ACCESS_PROJECTS} from 'sentry/components/pageFilters/constants';
 import {SearchBar} from 'sentry/components/searchBar';
+import type {Alignments} from 'sentry/components/tables/gridEditable';
 import type {Directions} from 'sentry/components/tables/gridEditable/sortLink';
 import {SortLink} from 'sentry/components/tables/gridEditable/sortLink';
 import {DATA_CATEGORY_INFO, DEFAULT_STATS_PERIOD} from 'sentry/constants';
@@ -18,7 +19,6 @@ import type {DataCategoryInfo} from 'sentry/types/core';
 import {DataCategoryExact, Outcome} from 'sentry/types/core';
 import type {Project} from 'sentry/types/project';
 import {getApiUrl} from 'sentry/utils/api/getApiUrl';
-import type {Alignments} from 'sentry/utils/discover/fields';
 import {hasDynamicSamplingCustomFeature} from 'sentry/utils/dynamicSampling/features';
 import {useApiQuery} from 'sentry/utils/queryClient';
 import {useOrganization} from 'sentry/utils/useOrganization';

From f41a886336225fe1b429dccbab6cfa7d63d795d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= <joshua.goldberg@sentry.io>
Date: Fri, 24 Jul 2026 17:17:06 -0400
Subject: [PATCH 3/9] ref(tables): Share one sortable header cell across table
 shells

SimpleTable.HeaderCell, the explore table kit, and the replay grids each drew
their own sortable header: a label, an optional tooltip, and an arrow whose
direction was recomputed from a different sort shape every time. Consolidate
them into one SortableHeaderCell in components/tables. Each shell keeps its own
padding, border, background, and typography; the shared cell owns the
interactive element, the label, truncation, and the sort indicator.

Sortable headers now behave the same everywhere: a <button> when the column can
be sorted, an aria-hidden arrow for the active direction beside its label, and a
label that clips with an ellipsis and reveals its full text on hover. Previously
only the explore kit truncated, only SimpleTable hid the arrow from screen
readers, the explore kit sorted from a click-handled <div> that keyboard users
could not reach, and the replay grids pushed the arrow to the far edge of the
column, away from the label it describes.

Also thread aria-sort through the gridEditable lineage from columnSortBy, which
GridEditable accepted but never used, so the discover, performance, insights,
and profiling tables announce their sort state.

The replay network grid's Status column was 76px, too narrow for its label
alongside the info tooltip, so widen it to fit rather than routing a special
case through the shared cell.

Deletes the duplicate Directions union, TableHeadCellContent and its isFrozen
prop, SimpleTable's isSorted prop and SortIndicator, and dead ref props on the
replay header cells.

Fixes DE-1399
---
 .../replays/virtualizedGrid/headerCell.tsx    | 31 ++-----
 .../tables/gridEditable/index.spec.tsx        | 60 ++++++++++++
 .../components/tables/gridEditable/index.tsx  |  8 +-
 .../tables/gridEditable/sortLink.tsx          |  5 +-
 .../tables/simpleTable/index.spec.tsx         | 54 ++++++++++-
 .../components/tables/simpleTable/index.tsx   | 66 +++++--------
 .../tables/sortableHeaderCell.spec.tsx        | 56 +++++++++++
 .../components/tables/sortableHeaderCell.tsx  | 92 +++++++++++++++++++
 static/app/views/explore/components/table.tsx |  6 --
 .../explore/logs/tables/logsInfiniteTable.tsx | 35 +++----
 .../detail/errorList/errorHeaderCell.tsx      |  4 +-
 .../explore/replays/detail/network/index.tsx  |  4 +-
 .../detail/network/networkHeaderCell.tsx      |  4 +-
 .../views/explore/tables/aggregatesTable.tsx  | 39 +++-----
 .../app/views/explore/tables/spansTable.tsx   | 35 +++----
 .../organizationStats/usageStatsProjects.tsx  |  4 +-
 16 files changed, 345 insertions(+), 158 deletions(-)
 create mode 100644 static/app/components/tables/gridEditable/index.spec.tsx
 create mode 100644 static/app/components/tables/sortableHeaderCell.spec.tsx
 create mode 100644 static/app/components/tables/sortableHeaderCell.tsx

diff --git a/static/app/components/replays/virtualizedGrid/headerCell.tsx b/static/app/components/replays/virtualizedGrid/headerCell.tsx
index 7291ecfa208a..000f293bc53d 100644
--- a/static/app/components/replays/virtualizedGrid/headerCell.tsx
+++ b/static/app/components/replays/virtualizedGrid/headerCell.tsx
@@ -3,7 +3,8 @@ import styled from '@emotion/styled';
 
 import {Tooltip} from '@sentry/scraps/tooltip';
 
-import {IconArrow, IconInfo} from 'sentry/icons';
+import {SortableHeaderCell} from 'sentry/components/tables/sortableHeaderCell';
+import {IconInfo} from 'sentry/icons';
 
 type BaseRecord = Record<string, unknown>;
 export interface SortConfig<RecordType extends BaseRecord> {
@@ -19,7 +20,6 @@ type Props<SortableRecord extends BaseRecord> = {
   sortConfig: SortConfig<SortableRecord>;
   style: CSSProperties;
   tooltipTitle: undefined | ReactNode;
-  ref?: React.Ref<HTMLButtonElement>;
 };
 
 const StyledIconInfo = styled(IconInfo)`
@@ -37,28 +37,26 @@ export function HeaderCell<T extends BaseRecord>({
   sortConfig,
   style,
   tooltipTitle,
-  ref,
 }: Props<T>) {
+  const isSorted = sortConfig.by === field;
+
   return (
-    <HeaderButton style={style} onClick={() => handleSort(field)} ref={ref}>
+    <HeaderButton
+      direction={isSorted ? (sortConfig.asc ? 'asc' : 'desc') : undefined}
+      onSort={() => handleSort(field)}
+      style={style}
+    >
       {label}
       {tooltipTitle ? (
         <Tooltip isHoverable title={<CatchClicks>{tooltipTitle}</CatchClicks>}>
           <StyledIconInfo size="xs" />
         </Tooltip>
       ) : null}
-      <IconArrow
-        variant="muted"
-        size="xs"
-        direction={sortConfig.by === field && !sortConfig.asc ? 'down' : 'up'}
-        style={{visibility: sortConfig.by === field ? 'visible' : 'hidden'}}
-      />
     </HeaderButton>
   );
 }
 
-const HeaderButton = styled('button')`
-  border: 0;
+const HeaderButton = styled(SortableHeaderCell)`
   border-bottom: 1px solid ${p => p.theme.tokens.border.primary};
   background: ${p => p.theme.tokens.background.secondary};
   color: ${p => p.theme.tokens.content.secondary};
@@ -66,18 +64,9 @@ const HeaderButton = styled('button')`
   font-size: ${p => p.theme.font.size.sm};
   font-weight: ${p => p.theme.font.weight.sans.medium};
   line-height: 16px;
-  text-align: unset;
   text-transform: uppercase;
-  white-space: nowrap;
 
   width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
   padding: ${p => p.theme.space.xs} ${p => p.theme.space.md} ${p => p.theme.space.xs}
     ${p => p.theme.space.lg};
-
-  svg {
-    margin-left: ${p => p.theme.space['2xs']};
-  }
 `;
diff --git a/static/app/components/tables/gridEditable/index.spec.tsx b/static/app/components/tables/gridEditable/index.spec.tsx
new file mode 100644
index 000000000000..c0ee6b94a95c
--- /dev/null
+++ b/static/app/components/tables/gridEditable/index.spec.tsx
@@ -0,0 +1,60 @@
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import type {GridColumnOrder} from 'sentry/components/tables/gridEditable';
+import {GridEditable} from 'sentry/components/tables/gridEditable';
+
+type Row = {count: number; name: string};
+
+const DATA: Row[] = [{name: 'first', count: 1}];
+
+const COLUMN_ORDER: Array<GridColumnOrder<keyof Row>> = [
+  {key: 'name', name: 'Name'},
+  {key: 'count', name: 'Count'},
+];
+
+describe('GridEditable', () => {
+  it('announces descending when a column is sorted descending', () => {
+    render(
+      <GridEditable
+        columnOrder={COLUMN_ORDER}
+        columnSortBy={[{key: 'count', order: 'desc'}]}
+        data={DATA}
+        grid={{}}
+      />
+    );
+
+    expect(screen.getByRole('columnheader', {name: 'Count'})).toHaveAttribute(
+      'aria-sort',
+      'descending'
+    );
+    expect(screen.getByRole('columnheader', {name: 'Name'})).not.toHaveAttribute(
+      'aria-sort'
+    );
+  });
+
+  it('announces ascending when a column is sorted ascending', () => {
+    render(
+      <GridEditable
+        columnOrder={COLUMN_ORDER}
+        columnSortBy={[{key: 'name', order: 'asc'}]}
+        data={DATA}
+        grid={{}}
+      />
+    );
+
+    expect(screen.getByRole('columnheader', {name: 'Name'})).toHaveAttribute(
+      'aria-sort',
+      'ascending'
+    );
+  });
+
+  it('announces no sort when the table is unsorted', () => {
+    render(
+      <GridEditable columnOrder={COLUMN_ORDER} columnSortBy={[]} data={DATA} grid={{}} />
+    );
+
+    expect(screen.getByRole('columnheader', {name: 'Count'})).not.toHaveAttribute(
+      'aria-sort'
+    );
+  });
+});
diff --git a/static/app/components/tables/gridEditable/index.tsx b/static/app/components/tables/gridEditable/index.tsx
index 2ee86ffce756..e804f457acf5 100644
--- a/static/app/components/tables/gridEditable/index.tsx
+++ b/static/app/components/tables/gridEditable/index.tsx
@@ -6,6 +6,7 @@ import InteractionStateLayer from '@sentry/scraps/interactionStateLayer';
 import {GridEditableEmptyData} from 'sentry/components/tables/gridEditable/GridEditableEmptyData';
 import {GridEditableError} from 'sentry/components/tables/gridEditable/GridEditableError';
 import {GridEditableLoading} from 'sentry/components/tables/gridEditable/GridEditableLoading';
+import {getAriaSort} from 'sentry/components/tables/sortableHeaderCell';
 import {onRenderCallback, Profiler} from 'sentry/utils/performanceForSentry';
 
 import {
@@ -91,8 +92,8 @@ type GridEditableProps<
    * based on this 3 main props.
    *
    * - `columnOrder` determines the columns to show, from left to right
-   * - `columnSortBy` is not used at the moment, however it might be better to
-   *   move sorting into Grid for performance
+   * - `columnSortBy` tells each header cell which sort state to announce; the
+   *   sort itself is still performed by the parent component
    */
   title?: ReactNode;
 };
@@ -299,6 +300,9 @@ export function GridEditable<
           // 1 levels under GridHeadCell
           props.columnOrder.map((column, i) => (
             <GridHeadCell
+              aria-sort={getAriaSort(
+                props.columnSortBy.find(sort => sort.key === column.key)?.order
+              )}
               data-test-id="grid-head-cell"
               key={`${i}.${String(column.key)}`}
               isFirst={i === 0}
diff --git a/static/app/components/tables/gridEditable/sortLink.tsx b/static/app/components/tables/gridEditable/sortLink.tsx
index be0d995f915a..cc6039b181c4 100644
--- a/static/app/components/tables/gridEditable/sortLink.tsx
+++ b/static/app/components/tables/gridEditable/sortLink.tsx
@@ -5,15 +5,14 @@ import type {LocationDescriptorObject} from 'history';
 import {Link} from '@sentry/scraps/link';
 
 import type {Alignments} from 'sentry/components/tables/gridEditable';
+import type {SortDirection} from 'sentry/components/tables/sortableHeaderCell';
 import {IconArrow} from 'sentry/icons';
 import {useNavigate} from 'sentry/utils/useNavigate';
 
-export type Directions = 'desc' | 'asc' | undefined;
-
 type Props = {
   align: Alignments;
   canSort: boolean;
-  direction: Directions;
+  direction: SortDirection | undefined;
   title: React.ReactNode;
   generateSortLink?: () => LocationDescriptorObject | undefined;
   onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
diff --git a/static/app/components/tables/simpleTable/index.spec.tsx b/static/app/components/tables/simpleTable/index.spec.tsx
index b304b0cd1b39..1aedd6ce24f3 100644
--- a/static/app/components/tables/simpleTable/index.spec.tsx
+++ b/static/app/components/tables/simpleTable/index.spec.tsx
@@ -1,4 +1,4 @@
-import {render, screen, within} from 'sentry-test/reactTestingLibrary';
+import {render, screen, userEvent, within} from 'sentry-test/reactTestingLibrary';
 
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 
@@ -38,4 +38,56 @@ describe('SimpleTable component', () => {
     expect(within(row2).getByRole('cell', {name: '4'})).toBeInTheDocument();
     expect(within(row2).getByRole('cell', {name: '5'})).toBeInTheDocument();
   });
+
+  it('announces the sort direction when a column is sorted', () => {
+    render(
+      <SimpleTable>
+        <SimpleTable.Header>
+          <SimpleTable.HeaderCell sort="asc" handleSortClick={jest.fn()}>
+            A
+          </SimpleTable.HeaderCell>
+          <SimpleTable.HeaderCell handleSortClick={jest.fn()}>B</SimpleTable.HeaderCell>
+        </SimpleTable.Header>
+      </SimpleTable>
+    );
+
+    expect(screen.getByRole('columnheader', {name: 'A'})).toHaveAttribute(
+      'aria-sort',
+      'ascending'
+    );
+    expect(screen.getByRole('columnheader', {name: 'B'})).not.toHaveAttribute(
+      'aria-sort'
+    );
+  });
+
+  it('keeps the interaction state layer a direct child of the header cell when sortable', () => {
+    render(
+      <SimpleTable>
+        <SimpleTable.Header>
+          <SimpleTable.HeaderCell handleSortClick={jest.fn()}>A</SimpleTable.HeaderCell>
+        </SimpleTable.Header>
+      </SimpleTable>
+    );
+
+    const header = screen.getByRole('columnheader', {name: 'A'});
+
+    expect(within(header).getByRole('presentation').parentElement).toBe(header);
+  });
+
+  it('sorts when a sortable header is clicked', async () => {
+    const handleSortClick = jest.fn();
+    render(
+      <SimpleTable>
+        <SimpleTable.Header>
+          <SimpleTable.HeaderCell handleSortClick={handleSortClick}>
+            A
+          </SimpleTable.HeaderCell>
+        </SimpleTable.Header>
+      </SimpleTable>
+    );
+
+    await userEvent.click(screen.getByRole('columnheader', {name: 'A'}));
+
+    expect(handleSortClick).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/static/app/components/tables/simpleTable/index.tsx b/static/app/components/tables/simpleTable/index.tsx
index c028e17f8c4d..9b02ec23c8bb 100644
--- a/static/app/components/tables/simpleTable/index.tsx
+++ b/static/app/components/tables/simpleTable/index.tsx
@@ -1,4 +1,5 @@
 import type {ComponentProps, HTMLAttributes, RefObject} from 'react';
+import {Fragment} from 'react';
 import {css} from '@emotion/react';
 import type {Theme} from '@emotion/react';
 import styled from '@emotion/styled';
@@ -7,7 +8,11 @@ import InteractionStateLayer from '@sentry/scraps/interactionStateLayer';
 import {Flex} from '@sentry/scraps/layout';
 
 import {Panel} from 'sentry/components/panels/panel';
-import {IconArrow} from 'sentry/icons';
+import {
+  getAriaSort,
+  SortableHeaderCell,
+  type SortDirection,
+} from 'sentry/components/tables/sortableHeaderCell';
 import {defined} from 'sentry/utils/defined';
 
 interface TableProps extends HTMLAttributes<HTMLDivElement> {
@@ -45,31 +50,23 @@ function HeaderCell({
   children?: React.ReactNode;
   divider?: boolean;
   handleSortClick?: () => void;
-  sort?: 'asc' | 'desc';
+  sort?: SortDirection;
 }) {
-  const isSorted = sort !== undefined;
-  const canSort = handleSortClick !== undefined;
-
   return (
     <ColumnHeaderCell
       {...props}
-      aria-sort={isSorted ? (sort === 'asc' ? 'ascending' : 'descending') : undefined}
-      isSorted={isSorted}
-      onClick={handleSortClick}
+      aria-sort={getAriaSort(sort)}
+      direction={sort}
+      onSort={handleSortClick}
+      overlays={
+        <Fragment>
+          {divider && <HeaderDivider />}
+          {handleSortClick && <InteractionStateLayer />}
+        </Fragment>
+      }
       role="columnheader"
-      as={canSort ? 'button' : 'div'}
     >
-      {divider && <HeaderDivider />}
-      {canSort && <InteractionStateLayer />}
-      <Flex align="center">{children}</Flex>
-      {isSorted && (
-        <SortIndicator
-          aria-hidden
-          size="xs"
-          direction={sort === 'asc' ? 'up' : 'down'}
-          isSorted={isSorted}
-        />
-      )}
+      {children}
     </ColumnHeaderCell>
   );
 }
@@ -148,22 +145,15 @@ const HeaderDivider = styled('div')`
   height: 14px;
 `;
 
-const ColumnHeaderCell = styled('div')<{isSorted?: boolean}>`
-  background: none;
+const ColumnHeaderCell = styled(SortableHeaderCell)`
   outline: none;
-  border: none;
   padding: 0 ${p => p.theme.space.xl};
-  text-transform: inherit;
   font-weight: ${p => p.theme.font.weight.sans.medium};
-  text-align: left;
   font-size: ${p => p.theme.font.size.md};
   color: ${p => p.theme.tokens.content.secondary};
 
   position: relative;
-  display: flex;
-  align-items: center;
   justify-content: space-between;
-  gap: ${p => p.theme.space.md};
   height: 100%;
 
   &:focus-visible {
@@ -176,11 +166,9 @@ const ColumnHeaderCell = styled('div')<{isSorted?: boolean}>`
     }
   }
 
-  ${p =>
-    p.isSorted &&
-    css`
-      color: ${p.theme.tokens.content.primary};
-    `}
+  &[aria-sort] {
+    color: ${p => p.theme.tokens.content.primary};
+  }
 `;
 
 const rowLinkStyle = (p: {theme: Theme}) => css`
@@ -198,18 +186,6 @@ const rowLinkStyle = (p: {theme: Theme}) => css`
   }
 `;
 
-const SortIndicator = styled(IconArrow, {
-  shouldForwardProp: prop => prop !== 'isSorted',
-})<{isSorted?: boolean}>`
-  visibility: hidden;
-
-  ${p =>
-    p.isSorted &&
-    css`
-      visibility: visible;
-    `}
-`;
-
 const StyledEmptyMessage = styled('div')`
   grid-column: 1 / -1;
   min-height: 200px;
diff --git a/static/app/components/tables/sortableHeaderCell.spec.tsx b/static/app/components/tables/sortableHeaderCell.spec.tsx
new file mode 100644
index 000000000000..2bcf6fcaf049
--- /dev/null
+++ b/static/app/components/tables/sortableHeaderCell.spec.tsx
@@ -0,0 +1,56 @@
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+
+import {
+  getAriaSort,
+  SortableHeaderCell,
+} from 'sentry/components/tables/sortableHeaderCell';
+
+describe('SortableHeaderCell', () => {
+  it('calls onSort when clicked', async () => {
+    const onSort = jest.fn();
+    render(<SortableHeaderCell onSort={onSort}>Duration</SortableHeaderCell>);
+
+    await userEvent.click(screen.getByRole('button', {name: 'Duration'}));
+
+    expect(onSort).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders a non-interactive cell when not given onSort', () => {
+    render(<SortableHeaderCell>Duration</SortableHeaderCell>);
+
+    expect(screen.getByText('Duration')).toBeInTheDocument();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('renders no indicator when the column is not sorted', () => {
+    render(<SortableHeaderCell onSort={jest.fn()}>Duration</SortableHeaderCell>);
+
+    expect(screen.queryByRole('img', {hidden: true})).not.toBeInTheDocument();
+  });
+
+  it('points the indicator down when sorted descending', () => {
+    render(
+      <SortableHeaderCell direction="desc" onSort={jest.fn()}>
+        Duration
+      </SortableHeaderCell>
+    );
+
+    expect(screen.getByRole('img', {hidden: true})).toHaveStyle({
+      transform: 'scale(1, -1)',
+    });
+  });
+});
+
+describe('getAriaSort', () => {
+  it('returns ascending when sorted ascending', () => {
+    expect(getAriaSort('asc')).toBe('ascending');
+  });
+
+  it('returns descending when sorted descending', () => {
+    expect(getAriaSort('desc')).toBe('descending');
+  });
+
+  it('returns undefined when unsorted', () => {
+    expect(getAriaSort(undefined)).toBeUndefined();
+  });
+});
diff --git a/static/app/components/tables/sortableHeaderCell.tsx b/static/app/components/tables/sortableHeaderCell.tsx
new file mode 100644
index 000000000000..9e25c4f3197c
--- /dev/null
+++ b/static/app/components/tables/sortableHeaderCell.tsx
@@ -0,0 +1,92 @@
+import type {HTMLAttributes, ReactNode} from 'react';
+import styled from '@emotion/styled';
+
+import {Tooltip} from '@sentry/scraps/tooltip';
+
+import {IconArrow} from 'sentry/icons';
+
+export type SortDirection = 'asc' | 'desc';
+
+/**
+ * `aria-sort` has to sit on the element carrying the `columnheader` role, which
+ * is each table shell's own head cell rather than this component.
+ */
+export function getAriaSort(
+  direction: SortDirection | undefined
+): 'ascending' | 'descending' | undefined {
+  switch (direction) {
+    case 'asc':
+      return 'ascending';
+    case 'desc':
+      return 'descending';
+    default:
+      return undefined;
+  }
+}
+
+interface SortableHeaderCellProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  /**
+   * Omit when this column is not the active sort.
+   */
+  direction?: SortDirection;
+  /**
+   * Omit to render a non-interactive cell.
+   */
+  onSort?: () => void;
+  /**
+   * Rendered before the label. Absolutely positioned decoration belongs here
+   * rather than in `children`, which is clipped for truncation.
+   */
+  overlays?: ReactNode;
+}
+
+export function SortableHeaderCell({
+  children,
+  direction,
+  onSort,
+  overlays,
+  ...props
+}: SortableHeaderCellProps) {
+  return (
+    <HeaderCellContent
+      {...props}
+      as={onSort ? 'button' : 'div'}
+      onClick={onSort}
+      type={onSort ? 'button' : undefined}
+    >
+      {overlays}
+      <Tooltip showOnlyOnOverflow skipWrapper title={children}>
+        <Label>{children}</Label>
+      </Tooltip>
+      {direction && (
+        <IconArrow
+          aria-hidden
+          direction={direction === 'desc' ? 'down' : 'up'}
+          size="xs"
+        />
+      )}
+    </HeaderCellContent>
+  );
+}
+
+const Label = styled('div')`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const HeaderCellContent = styled('div')<{type?: 'button'}>`
+  background: none;
+  border: 0;
+  font: inherit;
+  padding: 0;
+  text-align: inherit;
+  text-transform: inherit;
+
+  display: flex;
+  align-items: center;
+  gap: ${p => p.theme.space.xs};
+  cursor: ${p => (p.onClick ? 'pointer' : 'default')};
+  overflow: hidden;
+`;
diff --git a/static/app/views/explore/components/table.tsx b/static/app/views/explore/components/table.tsx
index 0fa70ac0f86d..bf5a3d28c3cb 100644
--- a/static/app/views/explore/components/table.tsx
+++ b/static/app/views/explore/components/table.tsx
@@ -175,9 +175,3 @@ export const TableHeadCell = styled(GridHeadCell)<{align?: Alignments}>`
       justify-content: ${p.align};
     `}
 `;
-export const TableHeadCellContent = styled('div')<{isFrozen?: boolean | undefined}>`
-  display: flex;
-  align-items: center;
-  gap: ${p => p.theme.space.xs};
-  cursor: ${p => (p.isFrozen ? 'default' : 'pointer')};
-`;
diff --git a/static/app/views/explore/logs/tables/logsInfiniteTable.tsx b/static/app/views/explore/logs/tables/logsInfiniteTable.tsx
index 24c7a7d3f238..b6f18aee89ef 100644
--- a/static/app/views/explore/logs/tables/logsInfiniteTable.tsx
+++ b/static/app/views/explore/logs/tables/logsInfiniteTable.tsx
@@ -16,13 +16,16 @@ import {useVirtualizer} from '@tanstack/react-virtual';
 
 import {Button} from '@sentry/scraps/button';
 import {Flex, Stack} from '@sentry/scraps/layout';
-import {Tooltip} from '@sentry/scraps/tooltip';
 
 import {FileSize} from 'sentry/components/fileSize';
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
 import {JumpButtons} from 'sentry/components/replays/jumpButtons';
 import {useJumpButtons} from 'sentry/components/replays/useJumpButtons';
 import {GridResizer} from 'sentry/components/tables/gridEditable/styles';
+import {
+  getAriaSort,
+  SortableHeaderCell,
+} from 'sentry/components/tables/sortableHeaderCell';
 import {IconArrow, IconWarning} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import type {Event} from 'sentry/types/event';
@@ -40,7 +43,6 @@ import {useLocation} from 'sentry/utils/useLocation';
 import {
   TableBodyCell,
   TableHead,
-  TableHeadCellContent,
   TableRow,
   TableStatus,
   useTableStyles,
@@ -756,9 +758,7 @@ function LogsTableHeader({
   return (
     <TableHead>
       <LogTableRow>
-        <FirstTableHeadCell isFirst align="left">
-          <TableHeadCellContent isFrozen />
-        </FirstTableHeadCell>
+        <FirstTableHeadCell isFirst align="left" />
         {fields.map((field, index) => {
           const direction = sortBys.find(s => s.field === field)?.kind;
 
@@ -783,12 +783,14 @@ function LogsTableHeader({
           return (
             <LogTableHeadCell
               align={index === 0 ? 'left' : align}
+              aria-sort={getAriaSort(direction)}
               key={index}
               isFirst={index === 0}
               reservePinGutter={pinningEnabled && index === fields.length - 1}
             >
-              <TableHeadCellContent
-                onClick={
+              <SortableHeaderCell
+                direction={direction}
+                onSort={
                   isFrozen
                     ? undefined
                     : () => {
@@ -804,24 +806,9 @@ function LogsTableHeader({
                         }
                       }
                 }
-                isFrozen={isFrozen}
               >
-                <Tooltip showOnlyOnOverflow title={headerLabel}>
-                  {headerLabel}
-                </Tooltip>
-                {defined(direction) && (
-                  <IconArrow
-                    size="xs"
-                    direction={
-                      direction === 'desc'
-                        ? 'down'
-                        : direction === 'asc'
-                          ? 'up'
-                          : undefined
-                    }
-                  />
-                )}
-              </TableHeadCellContent>
+                {headerLabel}
+              </SortableHeaderCell>
               {index !== fields.length - 1 && (
                 <GridResizer
                   dataRows={!isError && !isPending && data ? data.length : 0}
diff --git a/static/app/views/explore/replays/detail/errorList/errorHeaderCell.tsx b/static/app/views/explore/replays/detail/errorList/errorHeaderCell.tsx
index d55eb12f1a67..9cd17bab07cc 100644
--- a/static/app/views/explore/replays/detail/errorList/errorHeaderCell.tsx
+++ b/static/app/views/explore/replays/detail/errorList/errorHeaderCell.tsx
@@ -12,7 +12,6 @@ type Props = {
   index: number;
   sortConfig: SortConfig;
   style: CSSProperties;
-  ref?: React.Ref<HTMLButtonElement>;
 };
 
 const COLUMNS: Array<{
@@ -29,11 +28,10 @@ const COLUMNS: Array<{
 
 export const COLUMN_COUNT = COLUMNS.length;
 
-export function ErrorHeaderCell({handleSort, index, sortConfig, style, ref}: Props) {
+export function ErrorHeaderCell({handleSort, index, sortConfig, style}: Props) {
   const {field, label, tooltipTitle} = COLUMNS[index]!;
   return (
     <HeaderCell
-      ref={ref}
       handleSort={handleSort}
       field={field}
       label={label}
diff --git a/static/app/views/explore/replays/detail/network/index.tsx b/static/app/views/explore/replays/detail/network/index.tsx
index 3cc5ec3eaf4d..68240f474d1a 100644
--- a/static/app/views/explore/replays/detail/network/index.tsx
+++ b/static/app/views/explore/replays/detail/network/index.tsx
@@ -46,7 +46,9 @@ const DEFAULT_COLUMN_WIDTH = 88;
 const DYNAMIC_COLUMN_INDEX = 2;
 const MIN_DYNAMIC_COLUMN_WIDTH = 180;
 const OVERSCAN = 20;
-const STATIC_COLUMN_WIDTHS = [76, 76, 0, 88, 88, 98, 116];
+// Status is wider than its neighbours to fit its label alongside the info
+// tooltip and the sort arrow.
+const STATIC_COLUMN_WIDTHS = [76, 104, 0, 88, 88, 98, 116];
 
 export function NetworkList() {
   const organization = useOrganization();
diff --git a/static/app/views/explore/replays/detail/network/networkHeaderCell.tsx b/static/app/views/explore/replays/detail/network/networkHeaderCell.tsx
index ff0056a0879e..c690099b25b8 100644
--- a/static/app/views/explore/replays/detail/network/networkHeaderCell.tsx
+++ b/static/app/views/explore/replays/detail/network/networkHeaderCell.tsx
@@ -13,7 +13,6 @@ type Props = {
   index: number;
   sortConfig: SortConfig;
   style: CSSProperties;
-  ref?: React.Ref<HTMLButtonElement>;
 };
 
 const COLUMNS: Array<{
@@ -57,11 +56,10 @@ const COLUMNS: Array<{
 
 export const COLUMN_COUNT = COLUMNS.length;
 
-export function NetworkHeaderCell({handleSort, index, sortConfig, style, ref}: Props) {
+export function NetworkHeaderCell({handleSort, index, sortConfig, style}: Props) {
   const {field, label, tooltipTitle} = COLUMNS[index]!;
   return (
     <HeaderCell
-      ref={ref}
       handleSort={handleSort}
       field={field}
       label={label}
diff --git a/static/app/views/explore/tables/aggregatesTable.tsx b/static/app/views/explore/tables/aggregatesTable.tsx
index 836f73120177..0cc810bbce69 100644
--- a/static/app/views/explore/tables/aggregatesTable.tsx
+++ b/static/app/views/explore/tables/aggregatesTable.tsx
@@ -3,7 +3,6 @@ import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {Pagination, type CursorHandler} from '@sentry/scraps/pagination';
-import {Tooltip} from '@sentry/scraps/tooltip';
 
 import type {MenuItemProps} from 'sentry/components/dropdownMenu';
 import {EmptyStateWarning} from 'sentry/components/emptyStateWarning';
@@ -11,13 +10,15 @@ import {LoadingIndicator} from 'sentry/components/loadingIndicator';
 import {normalizeDateTimeParams} from 'sentry/components/pageFilters/parse';
 import {usePageFilters} from 'sentry/components/pageFilters/usePageFilters';
 import {GridResizer} from 'sentry/components/tables/gridEditable/styles';
-import {IconArrow} from 'sentry/icons/iconArrow';
+import {
+  getAriaSort,
+  SortableHeaderCell,
+} from 'sentry/components/tables/sortableHeaderCell';
 import {IconStack} from 'sentry/icons/iconStack';
 import {IconWarning} from 'sentry/icons/iconWarning';
 import {t} from 'sentry/locale';
 import type {TagCollection} from 'sentry/types/group';
 import {parseCursor} from 'sentry/utils/cursor';
-import {defined} from 'sentry/utils/defined';
 import type {TableDataRow} from 'sentry/utils/discover/discoverQuery';
 import {fieldAlignment} from 'sentry/utils/discover/fields';
 import {prettifyTagKey, type FieldValueType} from 'sentry/utils/fields';
@@ -33,7 +34,6 @@ import {
   TableBodyCell,
   TableHead,
   TableHeadCell,
-  TableHeadCellContent,
   TableRow,
   TableStatus,
   useTableStyles,
@@ -155,9 +155,7 @@ export function AggregatesTable({
       <Table ref={tableRef} style={initialTableStyles}>
         <TableHead>
           <TableRow>
-            <TableHeadCell isFirst={false}>
-              <TableHeadCellContent />
-            </TableHeadCell>
+            <TableHeadCell isFirst={false} />
             {visibleAggregateFields.map((aggregateField, i) => {
               // Hide column names before alignment is determined
               if (result.isPending) {
@@ -180,24 +178,15 @@ export function AggregatesTable({
               }
 
               return (
-                <TableHeadCell align={align} key={i} isFirst={i === 0}>
-                  <TableHeadCellContent onClick={updateSort}>
-                    <Tooltip showOnlyOnOverflow title={label}>
-                      {label}
-                    </Tooltip>
-                    {defined(direction) && (
-                      <IconArrow
-                        size="xs"
-                        direction={
-                          direction === 'desc'
-                            ? 'down'
-                            : direction === 'asc'
-                              ? 'up'
-                              : undefined
-                        }
-                      />
-                    )}
-                  </TableHeadCellContent>
+                <TableHeadCell
+                  align={align}
+                  aria-sort={getAriaSort(direction)}
+                  key={i}
+                  isFirst={i === 0}
+                >
+                  <SortableHeaderCell direction={direction} onSort={updateSort}>
+                    {label}
+                  </SortableHeaderCell>
                   {i !== visibleAggregateFields.length - 1 && (
                     <GridResizer
                       dataRows={
diff --git a/static/app/views/explore/tables/spansTable.tsx b/static/app/views/explore/tables/spansTable.tsx
index 26d1eda0b473..e273353aa9cc 100644
--- a/static/app/views/explore/tables/spansTable.tsx
+++ b/static/app/views/explore/tables/spansTable.tsx
@@ -1,16 +1,17 @@
 import {Fragment, useMemo, useRef} from 'react';
 
 import {Pagination} from '@sentry/scraps/pagination';
-import {Tooltip} from '@sentry/scraps/tooltip';
 
 import {EmptyStateWarning} from 'sentry/components/emptyStateWarning';
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
 import {GridResizer} from 'sentry/components/tables/gridEditable/styles';
-import {IconArrow} from 'sentry/icons/iconArrow';
+import {
+  getAriaSort,
+  SortableHeaderCell,
+} from 'sentry/components/tables/sortableHeaderCell';
 import {IconWarning} from 'sentry/icons/iconWarning';
 import {t} from 'sentry/locale';
 import type {TagCollection} from 'sentry/types/group';
-import {defined} from 'sentry/utils/defined';
 import type {MetaType} from 'sentry/utils/discover/eventView';
 import {fieldAlignment} from 'sentry/utils/discover/fields';
 import {FieldValueType, getFieldDefinition, prettifyTagKey} from 'sentry/utils/fields';
@@ -20,7 +21,6 @@ import {
   TableBodyCell,
   TableHead,
   TableHeadCell,
-  TableHeadCellContent,
   TableRow,
   TableStatus,
   useTableStyles,
@@ -112,24 +112,15 @@ export function SpansTable({
               const label = tag?.name ?? prettifyTagKey(field);
 
               return (
-                <TableHeadCell align={align} key={i} isFirst={i === 0}>
-                  <TableHeadCellContent onClick={updateSort}>
-                    <Tooltip showOnlyOnOverflow title={label}>
-                      {label}
-                    </Tooltip>
-                    {defined(direction) && (
-                      <IconArrow
-                        size="xs"
-                        direction={
-                          direction === 'desc'
-                            ? 'down'
-                            : direction === 'asc'
-                              ? 'up'
-                              : undefined
-                        }
-                      />
-                    )}
-                  </TableHeadCellContent>
+                <TableHeadCell
+                  align={align}
+                  aria-sort={getAriaSort(direction)}
+                  key={i}
+                  isFirst={i === 0}
+                >
+                  <SortableHeaderCell direction={direction} onSort={updateSort}>
+                    {label}
+                  </SortableHeaderCell>
                   {i !== visibleFields.length - 1 && (
                     <GridResizer
                       dataRows={
diff --git a/static/app/views/organizationStats/usageStatsProjects.tsx b/static/app/views/organizationStats/usageStatsProjects.tsx
index 658bf1955091..c6c6a2526a12 100644
--- a/static/app/views/organizationStats/usageStatsProjects.tsx
+++ b/static/app/views/organizationStats/usageStatsProjects.tsx
@@ -11,8 +11,8 @@ import {getSeriesApiInterval} from 'sentry/components/charts/utils';
 import {ALL_ACCESS_PROJECTS} from 'sentry/components/pageFilters/constants';
 import {SearchBar} from 'sentry/components/searchBar';
 import type {Alignments} from 'sentry/components/tables/gridEditable';
-import type {Directions} from 'sentry/components/tables/gridEditable/sortLink';
 import {SortLink} from 'sentry/components/tables/gridEditable/sortLink';
+import type {SortDirection} from 'sentry/components/tables/sortableHeaderCell';
 import {DATA_CATEGORY_INFO, DEFAULT_STATS_PERIOD} from 'sentry/constants';
 import {t} from 'sentry/locale';
 import type {DataCategoryInfo} from 'sentry/types/core';
@@ -371,7 +371,7 @@ export function UsageStatsProjects({
     ({showStoredOutcome}: {showStoredOutcome: boolean}) => {
       const {key, direction} = tableSort;
 
-      const getArrowDirection = (linkKey: SortBy): Directions => {
+      const getArrowDirection = (linkKey: SortBy): SortDirection | undefined => {
         if (linkKey !== key) {
           return undefined;
         }

From 965bd66ae3f1f57df5a4a4431ec471deeb6c1965 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= <joshua.goldberg@sentry.io>
Date: Mon, 27 Jul 2026 10:48:02 -0400
Subject: [PATCH 4/9] Assorted small touchups

---
 .../app/components/tables/sortableHeaderCell.tsx   | 14 --------------
 .../views/explore/replays/detail/network/index.tsx |  2 --
 2 files changed, 16 deletions(-)

diff --git a/static/app/components/tables/sortableHeaderCell.tsx b/static/app/components/tables/sortableHeaderCell.tsx
index 9e25c4f3197c..c83802b6ff77 100644
--- a/static/app/components/tables/sortableHeaderCell.tsx
+++ b/static/app/components/tables/sortableHeaderCell.tsx
@@ -7,10 +7,6 @@ import {IconArrow} from 'sentry/icons';
 
 export type SortDirection = 'asc' | 'desc';
 
-/**
- * `aria-sort` has to sit on the element carrying the `columnheader` role, which
- * is each table shell's own head cell rather than this component.
- */
 export function getAriaSort(
   direction: SortDirection | undefined
 ): 'ascending' | 'descending' | undefined {
@@ -26,18 +22,8 @@ export function getAriaSort(
 
 interface SortableHeaderCellProps extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode;
-  /**
-   * Omit when this column is not the active sort.
-   */
   direction?: SortDirection;
-  /**
-   * Omit to render a non-interactive cell.
-   */
   onSort?: () => void;
-  /**
-   * Rendered before the label. Absolutely positioned decoration belongs here
-   * rather than in `children`, which is clipped for truncation.
-   */
   overlays?: ReactNode;
 }
 
diff --git a/static/app/views/explore/replays/detail/network/index.tsx b/static/app/views/explore/replays/detail/network/index.tsx
index 68240f474d1a..093a61d23edf 100644
--- a/static/app/views/explore/replays/detail/network/index.tsx
+++ b/static/app/views/explore/replays/detail/network/index.tsx
@@ -46,8 +46,6 @@ const DEFAULT_COLUMN_WIDTH = 88;
 const DYNAMIC_COLUMN_INDEX = 2;
 const MIN_DYNAMIC_COLUMN_WIDTH = 180;
 const OVERSCAN = 20;
-// Status is wider than its neighbours to fit its label alongside the info
-// tooltip and the sort arrow.
 const STATIC_COLUMN_WIDTHS = [76, 104, 0, 88, 88, 98, 116];
 
 export function NetworkList() {

From 299c71723306b91debc3e167745e499c1a35bb6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= <joshua.goldberg@sentry.io>
Date: Mon, 27 Jul 2026 10:50:22 -0400
Subject: [PATCH 5/9] Assorted small touchups

---
 static/app/components/tables/sortableHeaderCell.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/static/app/components/tables/sortableHeaderCell.tsx b/static/app/components/tables/sortableHeaderCell.tsx
index c83802b6ff77..49335745dc62 100644
--- a/static/app/components/tables/sortableHeaderCell.tsx
+++ b/static/app/components/tables/sortableHeaderCell.tsx
@@ -63,16 +63,15 @@ const Label = styled('div')`
 `;
 
 const HeaderCellContent = styled('div')<{type?: 'button'}>`
+  align-items: center;
   background: none;
   border: 0;
+  cursor: ${p => (p.onClick ? 'pointer' : 'default')};
+  display: flex;
   font: inherit;
+  gap: ${p => p.theme.space.xs};
+  overflow: hidden;
   padding: 0;
   text-align: inherit;
   text-transform: inherit;
-
-  display: flex;
-  align-items: center;
-  gap: ${p => p.theme.space.xs};
-  cursor: ${p => (p.onClick ? 'pointer' : 'default')};
-  overflow: hidden;
 `;

From 2bd938f9fb62dbcdfbd3e1bdbcead05e214c5773 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= <joshua.goldberg@sentry.io>
Date: Mon, 27 Jul 2026 10:52:16 -0400
Subject: [PATCH 6/9] One more little removal

---
 .../views/explore/metrics/metricInfoTabs/metricInfoTabStyles.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/static/app/views/explore/metrics/metricInfoTabs/metricInfoTabStyles.tsx b/static/app/views/explore/metrics/metricInfoTabs/metricInfoTabStyles.tsx
index 694ac4940366..190382222589 100644
--- a/static/app/views/explore/metrics/metricInfoTabs/metricInfoTabStyles.tsx
+++ b/static/app/views/explore/metrics/metricInfoTabs/metricInfoTabStyles.tsx
@@ -81,7 +81,6 @@ export const StyledSimpleTableHeaderCell = styled(SimpleTable.HeaderCell)<{
   noPadding?: boolean;
 }>`
   font-size: ${p => p.theme.font.size.sm};
-  white-space: nowrap;
   padding: ${p =>
     p.noPadding
       ? 0

From 16342502190919dd51befbaa206a0bd15a7c819c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= <joshua.goldberg@sentry.io>
Date: Mon, 27 Jul 2026 10:55:01 -0400
Subject: [PATCH 7/9] Ok one more little removal

---
 .../app/components/replays/virtualizedGrid/headerCell.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/static/app/components/replays/virtualizedGrid/headerCell.tsx b/static/app/components/replays/virtualizedGrid/headerCell.tsx
index 000f293bc53d..af744b55ed3f 100644
--- a/static/app/components/replays/virtualizedGrid/headerCell.tsx
+++ b/static/app/components/replays/virtualizedGrid/headerCell.tsx
@@ -23,7 +23,9 @@ type Props<SortableRecord extends BaseRecord> = {
 };
 
 const StyledIconInfo = styled(IconInfo)`
-  display: block;
+  margin-left: ${p => p.theme.space.xs};
+  margin-top: 1px;
+  vertical-align: text-top;
 `;
 
 function CatchClicks({children}: {children: ReactNode}) {
@@ -38,11 +40,9 @@ export function HeaderCell<T extends BaseRecord>({
   style,
   tooltipTitle,
 }: Props<T>) {
-  const isSorted = sortConfig.by === field;
-
   return (
     <HeaderButton
-      direction={isSorted ? (sortConfig.asc ? 'asc' : 'desc') : undefined}
+      direction={sortConfig.by === field ? (sortConfig.asc ? 'asc' : 'desc') : undefined}
       onSort={() => handleSort(field)}
       style={style}
     >

From f1d0629a11b419610f1602cafff86dfb2b96aa2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= <github@joshuakgoldberg.com>
Date: Mon, 27 Jul 2026 14:39:16 -0400
Subject: [PATCH 8/9] Apply suggestions from code review

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
---
 static/app/components/tables/gridEditable/sortLink.tsx | 2 +-
 static/app/components/tables/gridEditable/types.ts     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/app/components/tables/gridEditable/sortLink.tsx b/static/app/components/tables/gridEditable/sortLink.tsx
index be0d995f915a..2b092ee76e4a 100644
--- a/static/app/components/tables/gridEditable/sortLink.tsx
+++ b/static/app/components/tables/gridEditable/sortLink.tsx
@@ -8,7 +8,7 @@ import type {Alignments} from 'sentry/components/tables/gridEditable';
 import {IconArrow} from 'sentry/icons';
 import {useNavigate} from 'sentry/utils/useNavigate';
 
-export type Directions = 'desc' | 'asc' | undefined;
+export type ColumnSort = 'desc' | 'asc' | undefined;
 
 type Props = {
   align: Alignments;
diff --git a/static/app/components/tables/gridEditable/types.ts b/static/app/components/tables/gridEditable/types.ts
index 2fe3aaa6df48..ecf1814e0db1 100644
--- a/static/app/components/tables/gridEditable/types.ts
+++ b/static/app/components/tables/gridEditable/types.ts
@@ -6,7 +6,7 @@
 
 type ObjectKey = string | number;
 
-export type Alignments = 'left' | 'right';
+export type ColumnAlign = 'left' | 'right';
 
 export type GridColumn<K = ObjectKey> = {
   key: K;

From bcb1e796adce29cad2c62999177deb4ead2b342b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= <joshua.goldberg@sentry.io>
Date: Mon, 27 Jul 2026 14:40:30 -0400
Subject: [PATCH 9/9] continue renaming

---
 .../app/components/tables/gridEditable/sortLink.tsx  | 12 ++++++------
 static/app/utils/discover/fields.tsx                 |  6 +++---
 .../rules/metric/details/relatedTransactions.tsx     |  6 +++---
 static/app/views/explore/components/table.tsx        |  4 ++--
 .../multiQueryMode/queryVisualizations/table.tsx     |  4 ++--
 .../common/components/tableCells/renderHeadCell.tsx  |  4 ++--
 .../views/organizationStats/usageStatsProjects.tsx   |  8 ++++----
 7 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/static/app/components/tables/gridEditable/sortLink.tsx b/static/app/components/tables/gridEditable/sortLink.tsx
index 2b092ee76e4a..878f999425b7 100644
--- a/static/app/components/tables/gridEditable/sortLink.tsx
+++ b/static/app/components/tables/gridEditable/sortLink.tsx
@@ -4,16 +4,16 @@ import type {LocationDescriptorObject} from 'history';
 
 import {Link} from '@sentry/scraps/link';
 
-import type {Alignments} from 'sentry/components/tables/gridEditable';
+import type {ColumnAlign} from 'sentry/components/tables/gridEditable';
 import {IconArrow} from 'sentry/icons';
 import {useNavigate} from 'sentry/utils/useNavigate';
 
 export type ColumnSort = 'desc' | 'asc' | undefined;
 
 type Props = {
-  align: Alignments;
+  align: ColumnAlign;
   canSort: boolean;
-  direction: Directions;
+  direction: ColumnSort;
   title: React.ReactNode;
   generateSortLink?: () => LocationDescriptorObject | undefined;
   onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
@@ -63,7 +63,7 @@ export function SortLink({
 }
 
 type LinkProps = React.ComponentPropsWithoutRef<typeof Link>;
-type StyledLinkProps = LinkProps & {align: Alignments};
+type StyledLinkProps = LinkProps & {align: ColumnAlign};
 
 const StyledLink = styled((props: StyledLinkProps) => {
   // but prior to this style of destructure-omitting it, it was being omitted
@@ -92,11 +92,11 @@ const StyledLink = styled((props: StyledLinkProps) => {
       : ''}
 `;
 
-const StyledNonLink = styled('div')<{align: Alignments}>`
+const StyledNonLink = styled('div')<{align: ColumnAlign}>`
   display: block;
   width: 100%;
   white-space: nowrap;
-  ${(p: {align: Alignments}) =>
+  ${(p: {align: ColumnAlign}) =>
     p.align
       ? css`
           text-align: ${p.align};
diff --git a/static/app/utils/discover/fields.tsx b/static/app/utils/discover/fields.tsx
index 43aea463ba65..bee954140fe9 100644
--- a/static/app/utils/discover/fields.tsx
+++ b/static/app/utils/discover/fields.tsx
@@ -3,7 +3,7 @@ import isEqual from 'lodash/isEqual';
 import type {SelectValue} from '@sentry/scraps/select';
 
 import type {FilterKeySection} from 'sentry/components/searchQueryBuilder/types';
-import type {Alignments} from 'sentry/components/tables/gridEditable';
+import type {ColumnAlign} from 'sentry/components/tables/gridEditable';
 import {RELEASE_ADOPTION_STAGES} from 'sentry/constants';
 import type {Organization} from 'sentry/types/organization';
 import {assert} from 'sentry/types/utils';
@@ -1459,12 +1459,12 @@ export function fieldAlignment(
   columnName: string,
   columnType?: ColumnValueType,
   metadata?: Record<string, ColumnValueType>
-): Alignments {
+): ColumnAlign {
   if (columnName === SpanFields.IS_STARRED_TRANSACTION) {
     return 'right';
   }
 
-  let align: Alignments = 'left';
+  let align: ColumnAlign = 'left';
 
   if (columnType) {
     align = alignedTypes.includes(columnType) ? 'right' : 'left';
diff --git a/static/app/views/alerts/rules/metric/details/relatedTransactions.tsx b/static/app/views/alerts/rules/metric/details/relatedTransactions.tsx
index 6df1ca4d2160..2aefe372e027 100644
--- a/static/app/views/alerts/rules/metric/details/relatedTransactions.tsx
+++ b/static/app/views/alerts/rules/metric/details/relatedTransactions.tsx
@@ -5,7 +5,7 @@ import type {Location} from 'history';
 
 import {Link} from '@sentry/scraps/link';
 
-import {GridEditable, type Alignments} from 'sentry/components/tables/gridEditable';
+import {GridEditable, type ColumnAlign} from 'sentry/components/tables/gridEditable';
 import {useStateBasedColumnResize} from 'sentry/components/tables/gridEditable/useStateBasedColumnResize';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
@@ -142,11 +142,11 @@ export function RelatedTransactions({
   );
 }
 
-const HeaderCell = styled('div')<{align: Alignments}>`
+const HeaderCell = styled('div')<{align: ColumnAlign}>`
   display: block;
   width: 100%;
   white-space: nowrap;
-  ${(p: {align: Alignments}) =>
+  ${(p: {align: ColumnAlign}) =>
     p.align
       ? css`
           text-align: ${p.align};
diff --git a/static/app/views/explore/components/table.tsx b/static/app/views/explore/components/table.tsx
index 0fa70ac0f86d..923fd94d183d 100644
--- a/static/app/views/explore/components/table.tsx
+++ b/static/app/views/explore/components/table.tsx
@@ -4,7 +4,7 @@ import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {COL_WIDTH_MINIMUM} from 'sentry/components/tables/gridEditable';
-import type {Alignments} from 'sentry/components/tables/gridEditable';
+import type {ColumnAlign} from 'sentry/components/tables/gridEditable';
 import {
   Grid as _Table,
   Body as _TableWrapper,
@@ -168,7 +168,7 @@ export const TableRow = GridRow;
 export const TableBodyCell = GridBodyCell;
 
 export const TableHead = GridHead;
-export const TableHeadCell = styled(GridHeadCell)<{align?: Alignments}>`
+export const TableHeadCell = styled(GridHeadCell)<{align?: ColumnAlign}>`
   ${p =>
     p.align &&
     css`
diff --git a/static/app/views/explore/multiQueryMode/queryVisualizations/table.tsx b/static/app/views/explore/multiQueryMode/queryVisualizations/table.tsx
index 4ce0414acde2..20c70804b198 100644
--- a/static/app/views/explore/multiQueryMode/queryVisualizations/table.tsx
+++ b/static/app/views/explore/multiQueryMode/queryVisualizations/table.tsx
@@ -9,7 +9,7 @@ import {Tooltip} from '@sentry/scraps/tooltip';
 
 import {EmptyStateWarning} from 'sentry/components/emptyStateWarning';
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
-import type {Alignments} from 'sentry/components/tables/gridEditable';
+import type {ColumnAlign} from 'sentry/components/tables/gridEditable';
 import {GridBodyCell, GridHeadCell} from 'sentry/components/tables/gridEditable/styles';
 import {IconArrow} from 'sentry/icons/iconArrow';
 import {IconStack} from 'sentry/icons/iconStack';
@@ -341,7 +341,7 @@ const TableBodyCell = styled(GridBodyCell)`
   min-height: 12px;
 `;
 
-const TableHeadCell = styled(GridHeadCell)<{align?: Alignments}>`
+const TableHeadCell = styled(GridHeadCell)<{align?: ColumnAlign}>`
   ${p =>
     p.align &&
     css`
diff --git a/static/app/views/insights/common/components/tableCells/renderHeadCell.tsx b/static/app/views/insights/common/components/tableCells/renderHeadCell.tsx
index b6aef63b1765..6c7a1049ff18 100644
--- a/static/app/views/insights/common/components/tableCells/renderHeadCell.tsx
+++ b/static/app/views/insights/common/components/tableCells/renderHeadCell.tsx
@@ -3,7 +3,7 @@ import type {Location} from 'history';
 
 import {Tooltip} from '@sentry/scraps/tooltip';
 
-import type {Alignments, GridColumnHeader} from 'sentry/components/tables/gridEditable';
+import type {ColumnAlign, GridColumnHeader} from 'sentry/components/tables/gridEditable';
 import {SortLink} from 'sentry/components/tables/gridEditable/sortLink';
 import type {Sort} from 'sentry/utils/discover/fields';
 import {
@@ -148,7 +148,7 @@ export const renderHeadCell = ({column, location, sort, sortParameterName}: Opti
   return sortLink;
 };
 
-const getAlignment = (key: string): Alignments => {
+const getAlignment = (key: string): ColumnAlign => {
   const result = parseFunction(key);
 
   if (result) {
diff --git a/static/app/views/organizationStats/usageStatsProjects.tsx b/static/app/views/organizationStats/usageStatsProjects.tsx
index 658bf1955091..d1e9de74b33e 100644
--- a/static/app/views/organizationStats/usageStatsProjects.tsx
+++ b/static/app/views/organizationStats/usageStatsProjects.tsx
@@ -10,8 +10,8 @@ import type {DateTimeObject} from 'sentry/components/charts/utils';
 import {getSeriesApiInterval} from 'sentry/components/charts/utils';
 import {ALL_ACCESS_PROJECTS} from 'sentry/components/pageFilters/constants';
 import {SearchBar} from 'sentry/components/searchBar';
-import type {Alignments} from 'sentry/components/tables/gridEditable';
-import type {Directions} from 'sentry/components/tables/gridEditable/sortLink';
+import type {ColumnAlign} from 'sentry/components/tables/gridEditable';
+import type {ColumnSort} from 'sentry/components/tables/gridEditable/sortLink';
 import {SortLink} from 'sentry/components/tables/gridEditable/sortLink';
 import {DATA_CATEGORY_INFO, DEFAULT_STATS_PERIOD} from 'sentry/constants';
 import {t} from 'sentry/locale';
@@ -371,7 +371,7 @@ export function UsageStatsProjects({
     ({showStoredOutcome}: {showStoredOutcome: boolean}) => {
       const {key, direction} = tableSort;
 
-      const getArrowDirection = (linkKey: SortBy): Directions => {
+      const getArrowDirection = (linkKey: SortBy): ColumnSort => {
         if (linkKey !== key) {
           return undefined;
         }
@@ -431,7 +431,7 @@ export function UsageStatsProjects({
               <SortLink
                 canSort
                 title={h.title}
-                align={h.align as Alignments}
+                align={h.align as ColumnAlign}
                 direction={h.direction}
                 generateSortLink={h.onClick}
               />