From f2ffdd39cae445a0c374091484b23e64211e30a9 Mon Sep 17 00:00:00 2001
From: Leon Sorokin <leeoniya@gmail.com>
Date: Thu, 3 Jul 2025 21:46:03 -0500
Subject: [PATCH] TableNG: Reduce how often we re-measure row height (#107604)

---
 .../src/components/Table/TableNG/TableNG.tsx        |  8 ++++----
 .../src/components/Table/TableNG/hooks.ts           | 13 ++++++++++---
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx
index 3867e04a943..5a0a2fdc036 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx
+++ b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx
@@ -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;
diff --git a/packages/grafana-ui/src/components/Table/TableNG/hooks.ts b/packages/grafana-ui/src/components/Table/TableNG/hooks.ts
index 3e0672b0b0e..1540d1e0383 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/hooks.ts
+++ b/packages/grafana-ui/src/components/Table/TableNG/hooks.ts
@@ -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;