IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix header/footer not sticky (#55285)

Browse Source
This commit is contained in:
Victor Marin 2022-09-16 13:14:34 +03:00 committed by GitHub
parent 9cdd1cde7f
commit 18f33871d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.betterer.results
View File

@ -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.", "3"],
[0, 0, 0, "Do not use any type assertions.", "4"], [0, 0, 0, "Do not use any type assertions.", "4"],
[0, 0, 0, "Unexpected any. Specify a different type.", "5"], [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": [ "packages/grafana-ui/src/components/Table/TableCell.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "0"],

53
packages/grafana-ui/src/components/Table/Table.tsx
View File

@ -132,6 +132,8 @@ export const Table: FC<Props> = memo((props: Props) => {
} = props; } = props;
const listRef = useRef<FixedSizeList>(null); const listRef = useRef<FixedSizeList>(null);
const tableDivRef = useRef<HTMLDivElement>(null);
const fixedSizeListScrollbarRef = useRef<HTMLDivElement>(null);
const tableStyles = useStyles2(getTableStyles); const tableStyles = useStyles2(getTableStyles);
const headerHeight = noHeader ? 0 : tableStyles.cellHeight; const headerHeight = noHeader ? 0 : tableStyles.cellHeight;
@ -221,6 +223,29 @@ export const Table: FC<Props> = memo((props: Props) => {
setPageSize(pageSize); setPageSize(pageSize);
}, [pageSize, setPageSize]); }, [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( const RenderRow = React.useCallback(
({ index: rowIndex, style }) => { ({ index: rowIndex, style }) => {
let row = rows[rowIndex]; let row = rows[rowIndex];
@ -291,21 +316,25 @@ export const Table: FC<Props> = memo((props: Props) => {
}; };
return ( return (
<div {...getTableProps()} className={tableStyles.table} aria-label={ariaLabel} role="table"> <div {...getTableProps()} className={tableStyles.table} aria-label={ariaLabel} role="table" ref={tableDivRef}>
<CustomScrollbar onScroll={handleScroll}> <CustomScrollbar hideVerticalTrack={true}>
<div className={tableStyles.tableContentWrapper(totalColumnsWidth)}> <div className={tableStyles.tableContentWrapper(totalColumnsWidth)}>
{!noHeader && <HeaderRow headerGroups={headerGroups} showTypeIcons={showTypeIcons} />} {!noHeader && <HeaderRow headerGroups={headerGroups} showTypeIcons={showTypeIcons} />}
{itemCount > 0 ? ( {itemCount > 0 ? (
<FixedSizeList <div ref={fixedSizeListScrollbarRef}>
height={listHeight} <CustomScrollbar onScroll={handleScroll} hideHorizontalTrack={true}>
itemCount={itemCount} <FixedSizeList
itemSize={tableStyles.rowHeight} height={listHeight}
width={'100%'} itemCount={itemCount}
ref={listRef} itemSize={tableStyles.rowHeight}
style={{ overflow: undefined }} width={'100%'}
> ref={listRef}
{RenderRow} style={{ overflow: undefined }}
</FixedSizeList> >
{RenderRow}
</FixedSizeList>
</CustomScrollbar>
</div>
) : ( ) : (
<div style={{ height: height - headerHeight }} className={tableStyles.noData}> <div style={{ height: height - headerHeight }} className={tableStyles.noData}>
No data No data