mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Fix header/footer not sticky (#55285)
This commit is contained in:
parent
9cdd1cde7f
commit
18f33871d1
@ -1644,7 +1644,12 @@ exports[`better eslint`] = {
|
||||
[0, 0, 0, "Do not use any type assertions.", "3"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "4"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "5"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "6"]
|
||||
[0, 0, 0, "Do not use any type assertions.", "6"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "7"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "8"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "9"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "10"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "11"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Table/TableCell.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"],
|
||||
|
@ -132,6 +132,8 @@ export const Table: FC<Props> = memo((props: Props) => {
|
||||
} = props;
|
||||
|
||||
const listRef = useRef<FixedSizeList>(null);
|
||||
const tableDivRef = useRef<HTMLDivElement>(null);
|
||||
const fixedSizeListScrollbarRef = useRef<HTMLDivElement>(null);
|
||||
const tableStyles = useStyles2(getTableStyles);
|
||||
const headerHeight = noHeader ? 0 : tableStyles.cellHeight;
|
||||
|
||||
@ -221,6 +223,29 @@ export const Table: FC<Props> = memo((props: Props) => {
|
||||
setPageSize(pageSize);
|
||||
}, [pageSize, setPageSize]);
|
||||
|
||||
useEffect(() => {
|
||||
// To have the custom vertical scrollbar always visible (https://github.com/grafana/grafana/issues/52136),
|
||||
// we need to bring the element from the FixedSizeList scope to the outer Table container scope,
|
||||
// because the FixedSizeList scope has overflow. By moving scrollbar to container scope we will have
|
||||
// it always visible since the entire width is in view.
|
||||
|
||||
// Select the scrollbar element from the FixedSizeList scope
|
||||
const listVerticalScrollbarHTML = (fixedSizeListScrollbarRef.current as HTMLDivElement)?.querySelector(
|
||||
'.track-vertical'
|
||||
);
|
||||
|
||||
// Select Table custom scrollbars
|
||||
const tableScrollbarView = (tableDivRef.current as HTMLDivElement)?.firstChild;
|
||||
|
||||
//If they exists, move the scrollbar element to the Table container scope
|
||||
if (tableScrollbarView && listVerticalScrollbarHTML) {
|
||||
listVerticalScrollbarHTML?.remove();
|
||||
(tableScrollbarView as HTMLDivElement).querySelector(':scope > .track-vertical')?.remove();
|
||||
|
||||
(tableScrollbarView as HTMLDivElement).append(listVerticalScrollbarHTML as Node);
|
||||
}
|
||||
});
|
||||
|
||||
const RenderRow = React.useCallback(
|
||||
({ index: rowIndex, style }) => {
|
||||
let row = rows[rowIndex];
|
||||
@ -291,21 +316,25 @@ export const Table: FC<Props> = memo((props: Props) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div {...getTableProps()} className={tableStyles.table} aria-label={ariaLabel} role="table">
|
||||
<CustomScrollbar onScroll={handleScroll}>
|
||||
<div {...getTableProps()} className={tableStyles.table} aria-label={ariaLabel} role="table" ref={tableDivRef}>
|
||||
<CustomScrollbar hideVerticalTrack={true}>
|
||||
<div className={tableStyles.tableContentWrapper(totalColumnsWidth)}>
|
||||
{!noHeader && <HeaderRow headerGroups={headerGroups} showTypeIcons={showTypeIcons} />}
|
||||
{itemCount > 0 ? (
|
||||
<FixedSizeList
|
||||
height={listHeight}
|
||||
itemCount={itemCount}
|
||||
itemSize={tableStyles.rowHeight}
|
||||
width={'100%'}
|
||||
ref={listRef}
|
||||
style={{ overflow: undefined }}
|
||||
>
|
||||
{RenderRow}
|
||||
</FixedSizeList>
|
||||
<div ref={fixedSizeListScrollbarRef}>
|
||||
<CustomScrollbar onScroll={handleScroll} hideHorizontalTrack={true}>
|
||||
<FixedSizeList
|
||||
height={listHeight}
|
||||
itemCount={itemCount}
|
||||
itemSize={tableStyles.rowHeight}
|
||||
width={'100%'}
|
||||
ref={listRef}
|
||||
style={{ overflow: undefined }}
|
||||
>
|
||||
{RenderRow}
|
||||
</FixedSizeList>
|
||||
</CustomScrollbar>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ height: height - headerHeight }} className={tableStyles.noData}>
|
||||
No data
|
||||
|
Loading…
Reference in New Issue
Block a user