How to render React Node in Table cells in Table component of @grafana/ui?

[ruzfardev]

Hi All,

I am developing Application plugin in Grafana version 9.3.2. I am using @grafana/ui library components in my application.

Now data is being rendered in table as it is originally. I want to modify cell value before it is being rendered in DOM. And also add icon into the cell.

Shortly,
Is it possible to render React Node or HTML element in table cell?
How to modify table cel value before it is being rendered in DOM?

Thanks

[kvannorstrand]

I ran into this problem last year and couldn’t figure out a clean solution. I found that while creating the table’s DataFrame I could just make the field type trace then set the value to my render function.

const renderActionButton = (id: string): JSX.Element => {
    return <MyActionButton myId={id} />;
};

data.addField({
    name: TableColumnName.ACTIONS,
    /*
     * Needs to have a type to get to DefaultCell in utils.getCellComponent. I don't like
     * that this is using a trace type because I don't know what that does/implies about
     * the cell.
     */
    type: FieldType.trace,
    values: [],
});

// idField here is just a way to track each row in the table for my specific use case but hopefully this gets the idea across
idField.values.toArray().forEach((id, index) => {
    _.find(data.fields, ['name', TableColumnName.ACTIONS])?.values.set(index, renderActionButton(id));
});

Sorry this is a quick response as I didn’t have a lot of time but hopefully it gets the idea across.