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