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;