NextJS 14 and GrafanaUI Table

Grafana Plugin Development
1

Hey.

I’m running into an issue with the GrafanaUI Plugin

component in NextJS 14 where I’m able to create my DataFrame and I can get the correct amount of rows to render depending on my values added into each field. But I’m having trouble getting the correct information to render in each Cell.

  const buildTableData = (members: any[]): DataFrame => {
    const hardCodedValue = [
      {
        id: 1,
        email: "mike.kovar@test.com",
        last_name: "kovar",
        first_name: "mike",
      },
      {
        id: 2,
        email: "tony.kovar@test.com",
        last_name: "Kovar",
        first_name: "Tony",
      },
    ];
    const tableFields = [
      {
        config: {
          displayName: "First Name",
        },
        name: "first_name",
        type: FieldType.string,
        values: ["Tony", "Mike"],
      },
      {
        config: {
          displayName: "Last Name",
        },
        name: "last_name",
        type: FieldType.string,
        values: hardCodedValue,
        display: displayValue,
      },
      {
        config: {
          displayName: "id",
        },
        name: "id",
        type: FieldType.string,
        values: hardCodedValue,
        display: displayValue,
      },
      {
        config: {
          displayName: "Email",
        },
        name: "email",
        type: FieldType.string,
        values: hardCodedValue,
        display: displayValue,
      },
    ];

    return toDataFrame({
      name: "Members",
      fields: tableFields,
      length: 9,
    });
  };

In that snippet First Name displays empty cells, which I’d expect. And the other columns that are using this function

const displayValue = async (value: any) => {
    "use server";
    return <span>{value.first_name}</span>;
  };

Are all returning undefined. I’m assuming that this is expected behavior but I have not been able to find any explanation as to how I can create a display function such that my values display properly. Has anyone had any luck with this?

2

SOLVED

I was able to figure this out after stepping back and using the Grafana types through development to lead me. I ended up having to create a Utility function in it’s own file for displayValue that was a client Component like this:

"use client";

import { DisplayValue } from "@grafana/data";

export function displayValue(value: any): DisplayValue {
  return { text: value, numeric: 1, prefix: "", suffix: "" };
}

I have some hard coded values here obviously but this is the shape that you’re going to need to return from your display function.

1 Like