Render other components inside data-grid cells

[guiherzog]

Feature request

I want to render a vscode-link component inside the cell of a data-grid? Is that possible? It currently show [object HTMLElement] for me.

Expected behavior

It renders the vscode-link tag.

Current behavior

It stringifies the element.

[hawkticehurst]

Hmmm 🧐 I want to say this should be possible, but this behavior would be stemming from FAST since they are responsible for the underlying implementation of the data grid base component.

Regardless, happy to do some snooping around the FAST code base and bubble up this question to the FAST folks if needed!

[hawkticehurst]

Oh actually just so I have the full context, what does the code you have look like?

[guiherzog]

Hi, sorry for the delay, I was OOO for a while.

So, if I try to create it through a static HTM, it works fine. I can render links, buttons, checkboxes inside of it. As seen on this example:

Source Code:

<vscode-data-grid aria-label="Source Paths">
  <vscode-data-grid-row row-type="header">
    <vscode-data-grid-cell cell-type="columnheader" grid-column="1">Actions</vscode-data-grid-cell>
    <vscode-data-grid-cell cell-type="columnheader" grid-column="2">Source</vscode-data-grid-cell>
  </vscode-data-grid-row>
  <vscode-data-grid-row>
    <vscode-data-grid-cell grid-column="1"><vscode-checkbox>Select</vscode-checkbox></vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="2"><vscode-link href="">View</vscode-link></vscode-data-grid-cell>
  </vscode-data-grid-row>
  <vscode-data-grid-row>
    <vscode-data-grid-cell grid-column="1"><vscode-checkbox>Select</vscode-checkbox></vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="2"><vscode-link href="">View</vscode-link></vscode-data-grid-cell>
  </vscode-data-grid-row>
  <vscode-data-grid-row>
    <vscode-data-grid-cell grid-column="1"><vscode-checkbox>Select</vscode-checkbox></vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="2"><vscode-link href="">View</vscode-link></vscode-data-grid-cell>
  </vscode-data-grid-row>
</vscode-data-grid>

But if I try to dynamically create them and insert to the dataGrid.rowsData, it doesn't work, which is not surprising, but I am not sure how this should be done.
If I have this:

const checkbox = document.createElement('vscode-checkbox');
checkbox.textContent = 'Test';

const checkbox2 = new Checkbox();
checkbox2.textContent = 'Test 2';

document.body.append(checkbox, checkbox2);

document.getElementById('my-grid').rowsData = [
  { item1: 'value 1-2', item2: checkbox2 },
  { item1: 'value 1-3', item2: checkbox },
];

I get this:

See this live example

I may be creating those elements in the wrong way, so I'd appreciate any advice if that's the case.