fix #103209: fix access for tables with nullable data (#106094)

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');
+    });
   });
 });

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;