opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-01 03:11:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

TableNG: Reduce how often we re-measure row height (#107604)

Browse Source
This commit is contained in:
Leon Sorokin
2025-07-03 21:46:03 -05:00
committed by GitHub
parent 41014f29ed
commit f2ffdd39ca
2 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -64,7 +64,7 @@ export function TableNG(props: TableNGProps) {
const {
cellHeight,
data,
enablePagination,
enablePagination = false,
enableSharedCrosshair = false,
enableVirtualization,
footerOptions,
@ -265,6 +265,9 @@ export function TableNG(props: TableNGProps) {
cellRootRenderers: {},
};
let lastRowIdx = -1;
let _rowHeight = 0;
f.forEach((field, i) => {
const justifyContent = getTextAlign(field);
const footerStyles = getFooterStyles(justifyContent);
@ -292,9 +295,6 @@ export function TableNG(props: TableNGProps) {
const shouldOverflow = shouldTextOverflow(field);
const shouldWrap = shouldTextWrap(field);
let lastRowIdx = -1;
let _rowHeight = 0;
// this fires first
const renderCellRoot = (key: Key, props: CellRendererProps<TableRow, TableSummaryRow>): ReactNode => {
const rowIdx = props.row.__index;

13
packages/grafana-ui/src/components/Table/TableNG/hooks.ts
View File

@ -140,7 +140,7 @@ export interface PaginatedRowsOptions {
headerHeight: number;
footerHeight: number;
paginationHeight?: number;
enabled?: boolean;
enabled: boolean;
}
export interface PaginatedRowsResult {
@ -167,11 +167,17 @@ export function usePaginatedRows(
// calculate average row height if row height is variable.
const avgRowHeight = useMemo(() => {
if (!enabled) {
return 0;
}
if (typeof rowHeight === 'number') {
return rowHeight;
}
return rows.reduce((avg, row, _, { length }) => avg + rowHeight(row) / length, 0);
}, [rows, rowHeight]);
// we'll just measure 100 rows to estimate
return rows.slice(0, 100).reduce((avg, row, _, { length }) => avg + rowHeight(row) / length, 0);
}, [rows, rowHeight, enabled]);
// using dimensions of the panel, calculate pagination parameters
const { numPages, rowsPerPage, pageRangeStart, pageRangeEnd, smallPagination } = useMemo((): {
@ -325,6 +331,7 @@ export function useTypographyCtx(): TypographyCtx {
const txtWidth = ctx.measureText(txt).width;
const avgCharWidth = txtWidth / txt.length + letterSpacing;
const { count } = varPreLine(ctx);
const calcRowHeight = (text: string, cellWidth: number, defaultHeight: number) => {
if (text === '') {
return defaultHeight;