Support HTML in row expressions

[buremba]

Feature Request

Description of Problem:

It would be great to render rows with custom HTML as a part of the expressions. Since we use web components, it's probably not easy to embed React/Vue/Angular components, but even simple HTML rendering would make the data grid much more flexible. If there is any workaround, it would be great to know!

Potential Solutions:

HTML in the expression:

{
            "plugin": "datagrid",
            "columns": [
                "Row ID",
                "Order ID",
                "Ship Mode"
            ],
            "expressions": { "ahmet": "<span class='custom-class'> \"Ship Mode\" </span>" }
        }

Or a safer approach could be using web components, potentially providing a renderer for the columns so the Persfective can pass relevant arguments to the component to render HTML inside as follows:

{
            "plugin": "datagrid",
            "columns": [
                "Row ID",
                "Order ID",
                "Ship Mode"
            ],
            "renderers": { "Ship Mode": "custom-web-component" }
        }

[texodus]

I am not opposed to adding this feature but there are some design quirks to work around. The data grid component Perspective uses for rendering assumes constant & consistent row height, and it would be a non-trivial amount of work to allow it to support dynamic height rows. It also uses the component's own box model to handle column auto-width, so you'll need to be careful with the display property of elements or they may cause the auto-width feature to see your columns as 0 width.

For more complex content (React components, images, etc), you can use regular-table's addStyleListener() method to customize the presentation of the Datagrid entirely, e.g. the defunct NFT example