diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/PillCell.test.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/PillCell.test.tsx index 0b54c3ef717..f8b20c8f312 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/Cells/PillCell.test.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/PillCell.test.tsx @@ -102,6 +102,52 @@ describe('PillCell', () => { ); }); + it('FieldType.other with array', () => { + const field = fieldWithValues([['value1', 'value2', 'value3']]); + field.type = FieldType.other; + expectHTML( + render( + + ), + ` + value1 + value2 + value3 + ` + ); + }); + + it('FieldType.other with array with some null values', () => { + const field = fieldWithValues([['value1', null, 'value2', undefined, 'value3']]); + field.type = FieldType.other; + expectHTML( + render( + + ), + ` + value1 + value2 + value3 + ` + ); + }); + + it('FieldType.other with non-array', () => { + const field = fieldWithValues([{ value1: true, value2: false, value3: 42 }]); + field.type = FieldType.other; + expectHTML( + render( + + ), + '' + ); + }); + it('non-string values', () => { expectHTML( render( diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/PillCell.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/PillCell.tsx index baf3715eb77..d304df96da3 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/Cells/PillCell.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/PillCell.tsx @@ -65,6 +65,10 @@ export function inferPills(rawValue: TableCellValue): unknown[] { return []; } + if (Array.isArray(rawValue)) { + return rawValue.filter((v) => v != null).map((v) => String(v).trim()); + } + const value = String(rawValue); if (value[0] === '[') { diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/renderers.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/renderers.tsx index 6f3eed747a8..9405d2a2cf5 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/Cells/renderers.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/renderers.tsx @@ -118,7 +118,9 @@ const CELL_REGISTRY: Record = { /> )), getStyles: getPillStyles, - testField: (field: Field) => field.type === FieldType.string, + testField: (field: Field) => + field.type === FieldType.string || + (field.type === FieldType.other && field.values.some((val) => Array.isArray(val))), }, [TableCellDisplayMode.Markdown]: { // eslint-disable-next-line react/display-name