Not able to stylize individual cells in a vscode-data-grid

Describe the bug

I’m attempting to stylize individual cells in a vscode-data-grid, however the text is being HTML escaped. Is it possible to set a cell to stylized HTML? Or to go back and set the CSS of a cell once the cell has been created?

To reproduce

I’m creating a grid ala:

                  <vscode-data-grid
                    class='my-data-grid'
                    grid-template-columns='240px 320px 200px 200px'
                  >
                  </vscode-data-grid>

…and then setting the data like so:

                  const myDataGrid = document.querySelector('.my-data-grid');
                  myDataGrid.columnDefinitions = [
                    { columnDataKey: 'columnKey0', title: 'A' },
                    { columnDataKey: 'columnKey1', title: 'B' },
                    { columnDataKey: 'columnKey2', title: 'C' },
                    { columnDataKey: 'columnKey3', title: 'D' }
                  ];

                  const myRowsData = [];
                  myData.forEach(data => {
                    const connectedStatus = (data.connectedStatus === 'Connected')
                      ? '<span style="green">Connected</span>'
                      : '<span style="red">Not Connected</span>';
                    nonScratchOrgsRowsData.push({
                      columnKey0: data.a,
                      columnKey1: data.b,
                      columnKey2: data.c,
                      columnKey3: connectedStatus
                    });
                  });
                  myDataGrid.rowsData = myRowsData;

Expected behavior

I’d like the text in column 3 to be stylized.

Current behavior

The HTML (the spans) are not stylized and instead of Connected appearing, <span style="green">Connected</span> appears.

Additional context

I tried to keep this issue short & sweet. If you need any more info on this issue, just let me know.

Also, I didn’t see anything in the vscode-data-grid README (https://github.com/microsoft/vscode-webview-ui-toolkit/blob/main/src/data-grid/README.md) on styling, and I didn’t notice a means to edit the styling in the interactive story book either (https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-data-grid--default&args=gridTemplateColumns:foo;hasCustomTitles:true).

[jeffb-sfdc]

I think we’re good, thanks @hawkticehurst

[jeffb-sfdc]

I should also mention that I set a break point, and after

myDataGrid.rowsData = myRowsData;

…is called, I tried to manually set the color, like so:

myDataGrid.rowsData[0].columnKey3.fontcolor = "red"
myDataGrid.rowsData[1].columnKey3.fontcolor = "#FF0000"
myDataGrid.rowsData[2].columnKey3.fontcolor = "FF0000"

…but none of these set the color to red