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.

[hawkticehurst]

Hi @guiherzog,

As I just mentioned in your other issue, I'm very sorry to say that the toolkit is being deprecated and all active development will be coming to a close.

Here's the announcement link where you can learn more details and leave any questions or comments you may have.

Beyond that, thank you again for filing this issue and apologies for never getting around to addressing it. I wish you all the best in your future VS Code extension endeavors!

[Aurel300]

@guiherzog (Late reply, I know, but) you can insert other elements into cells, but you cannot use rowsData. Create the cells and the nested elements using the DOM instead, as in this example.