diff --git a/static/app/views/explore/tables/aggregatesTable.tsx b/static/app/views/explore/tables/aggregatesTable.tsx
index 2ed4dd46b5ad4b..51ed1a61b63c75 100644
--- a/static/app/views/explore/tables/aggregatesTable.tsx
+++ b/static/app/views/explore/tables/aggregatesTable.tsx
@@ -5,9 +5,11 @@ import EmptyStateWarning from 'sentry/components/emptyStateWarning';
import LoadingIndicator from 'sentry/components/loadingIndicator';
import Pagination from 'sentry/components/pagination';
import {CHART_PALETTE} from 'sentry/constants/chartPalette';
-import {IconWarning} from 'sentry/icons';
+import {IconArrow} from 'sentry/icons/iconArrow';
+import {IconWarning} from 'sentry/icons/iconWarning';
import {t} from 'sentry/locale';
import type {NewQuery} from 'sentry/types/organization';
+import {defined} from 'sentry/utils';
import EventView from 'sentry/utils/discover/eventView';
import type {Sort} from 'sentry/utils/discover/fields';
import {
@@ -57,7 +59,7 @@ export function AggregatesTable({}: AggregatesTableProps) {
Boolean
);
}, [groupBys, visualizes]);
- const [sorts] = useSorts({fields});
+ const [sorts, setSorts] = useSorts({fields});
const [query] = useUserQuery();
const eventView = useMemo(() => {
@@ -121,10 +123,34 @@ export function AggregatesTable({}: AggregatesTableProps) {
label = formatParsedFunction(func);
}
+ const direction = sorts.find(s => s.field === field)?.kind;
+
+ function updateSort() {
+ const kind = direction === 'desc' ? 'asc' : 'desc';
+ setSorts([{field, kind}]);
+ }
+
return (
-
+
{label}
-
+ {defined(direction) && (
+
+ )}
+
);
})}
@@ -184,3 +210,7 @@ const TopResultsIndicator = styled('div')<{index: number}>`
return CHART_PALETTE[TOP_EVENTS_LIMIT - 1][p.index];
}};
`;
+
+const StyledTableHeadCell = styled(TableHeadCell)`
+ cursor: pointer;
+`;
diff --git a/static/app/views/explore/tables/spansTable.tsx b/static/app/views/explore/tables/spansTable.tsx
index ef5902923d72cc..87360a4a3555e4 100644
--- a/static/app/views/explore/tables/spansTable.tsx
+++ b/static/app/views/explore/tables/spansTable.tsx
@@ -1,11 +1,14 @@
import {Fragment, useMemo} from 'react';
+import styled from '@emotion/styled';
import EmptyStateWarning from 'sentry/components/emptyStateWarning';
import LoadingIndicator from 'sentry/components/loadingIndicator';
import Pagination from 'sentry/components/pagination';
-import {IconWarning} from 'sentry/icons';
+import {IconArrow} from 'sentry/icons/iconArrow';
+import {IconWarning} from 'sentry/icons/iconWarning';
import {t} from 'sentry/locale';
import type {NewQuery} from 'sentry/types/organization';
+import {defined} from 'sentry/utils';
import EventView from 'sentry/utils/discover/eventView';
import {fieldAlignment} from 'sentry/utils/discover/fields';
import usePageFilters from 'sentry/utils/usePageFilters';
@@ -35,7 +38,7 @@ export function SpansTable({}: SpansTableProps) {
const [dataset] = useDataset();
const [fields] = useSampleFields();
- const [sorts] = useSorts({fields});
+ const [sorts, setSorts] = useSorts({fields});
const [query] = useUserQuery();
const eventView = useMemo(() => {
@@ -98,10 +101,35 @@ export function SpansTable({}: SpansTableProps) {
const fieldType = meta.fields?.[field];
const align = fieldAlignment(field, fieldType);
const tag = stringTags[field] ?? numberTags[field] ?? null;
+
+ const direction = sorts.find(s => s.field === field)?.kind;
+
+ function updateSort() {
+ const kind = direction === 'desc' ? 'asc' : 'desc';
+ setSorts([{field, kind}]);
+ }
+
return (
-
+
{tag?.name ?? field}
-
+ {defined(direction) && (
+
+ )}
+
);
})}
@@ -145,3 +173,7 @@ export function SpansTable({}: SpansTableProps) {
);
}
+
+const StyledTableHeadCell = styled(TableHeadCell)`
+ cursor: pointer;
+`;