From f151efd3cc7984287f0cc1ee4c56dfea28b882e3 Mon Sep 17 00:00:00 2001
From: Paul Marbach <fastfrwrd@gmail.com>
Date: Wed, 28 May 2025 12:07:51 -0400
Subject: [PATCH] fix #103209: fix access for tables with nullable data
 (#106094)

---
 .../src/components/Table/utils.test.ts        | 19 +++++++++++++++++++
 .../grafana-ui/src/components/Table/utils.ts  |  7 +++----
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/utils.test.ts b/packages/grafana-ui/src/components/Table/utils.test.ts
index ca12996a1ca..222873e9a94 100644
--- a/packages/grafana-ui/src/components/Table/utils.test.ts
+++ b/packages/grafana-ui/src/components/Table/utils.test.ts
@@ -596,5 +596,24 @@ describe('Table utils', () => {
       const longestField = guessLongestField(config, data);
       expect(longestField).toBe(undefined);
     });
+
+    it('should not throw an error if first entry in input data is missing a given field', () => {
+      const data = getWrappableData(10);
+      const config: FieldConfigSource = {
+        defaults: {
+          custom: {
+            cellOptions: {
+              wrapText: true,
+            },
+          },
+        },
+        overrides: [],
+      };
+
+      data.fields[1].values[0] = undefined; // Simulate missing value in the first row
+
+      const longestField = guessLongestField(config, data);
+      expect(longestField?.name).toBe('Lorem 10');
+    });
   });
 });
diff --git a/packages/grafana-ui/src/components/Table/utils.ts b/packages/grafana-ui/src/components/Table/utils.ts
index ae1db673ddf..6c3a158d046 100644
--- a/packages/grafana-ui/src/components/Table/utils.ts
+++ b/packages/grafana-ui/src/components/Table/utils.ts
@@ -729,12 +729,11 @@ export function guessLongestField(fieldConfig: FieldConfigSource, data: DataFram
       const numValues = stringFields[0].values.length;
       let longestLength = 0;
 
-      // If we have less than 30 values we assume
-      // that the first record is representative
-      // of the overall data
+      // If we have less than 30 values we assume that the first
+      // non-null record is representative of the overall data
       if (numValues <= 30) {
         for (const field of stringFields) {
-          const fieldLength = field.values[0].length;
+          const fieldLength = field.values.find((v) => v != null)?.length ?? 0;
           if (fieldLength > longestLength) {
             longestLength = fieldLength;
             longestField = field;