diff --git a/static/app/components/replays/table/replayTable.tsx b/static/app/components/replays/table/replayTable.tsx index 68cb9c5360c5d8..150f7d04b7bb72 100644 --- a/static/app/components/replays/table/replayTable.tsx +++ b/static/app/components/replays/table/replayTable.tsx @@ -30,6 +30,7 @@ type Props = SortProps & { highlightedRowIndex?: number; query?: Query; ref?: RefObject; + stickyHeader?: boolean; }; export default function ReplayTable({ @@ -43,6 +44,8 @@ export default function ReplayTable({ showDropdownFilters, highlightedRowIndex = -1, sort, + // stickyHeader only works if the table is inside a scrollable container + stickyHeader = false, }: Props) { const gridTemplateColumns = columns.map(col => col.width ?? 'max-content').join(' '); const hasInteractiveColumn = columns.some(col => col.interactive); @@ -59,6 +62,7 @@ export default function ReplayTable({ replays={replays} onSortClick={onSortClick} sort={sort} + stickyHeader={stickyHeader} /> @@ -79,6 +83,7 @@ export default function ReplayTable({ onSortClick={onSortClick} replays={replays} sort={sort} + stickyHeader={stickyHeader} /> @@ -102,6 +107,7 @@ export default function ReplayTable({ onSortClick={onSortClick} replays={replays} sort={sort} + stickyHeader={stickyHeader} /> {replays.length === 0 && ( {t('No replays found')} diff --git a/static/app/components/replays/table/replayTableHeader.tsx b/static/app/components/replays/table/replayTableHeader.tsx index 225c233ce8ddb3..9a5192d37e3794 100644 --- a/static/app/components/replays/table/replayTableHeader.tsx +++ b/static/app/components/replays/table/replayTableHeader.tsx @@ -20,18 +20,29 @@ type Props = { replays: ReplayListRecord[]; onSortClick?: (key: string) => void; sort?: Sort; + stickyHeader?: boolean; }; -export default function ReplayTableHeader({columns, replays, onSortClick, sort}: Props) { +export default function ReplayTableHeader({ + columns, + replays, + onSortClick, + sort, + stickyHeader, +}: Props) { const listItemCheckboxState = useListItemCheckboxContext(); const {countSelected, isAllSelected, isAnySelected, queryKey, selectAll, selectedIds} = listItemCheckboxState; const queryOptions = parseQueryKey(queryKey).options; const queryString = queryOptions?.query?.query; + const headerStyle: React.CSSProperties = stickyHeader + ? {position: 'sticky', top: 0} + : {}; + return ( - + {columns.map(({Header, sortKey}, columnIndex) => ( ); }