VSCodeDataGrid with rowsData doesn't apparently work in React?

[tomqwpl]

Describe the bug

Attempting to use VSCodeDataGrid from a react component, specifying the data using rowsData doesn't apparently work.

To reproduce

export default function Example() {
    const rowsData = [
        { ColumnKey1: "Cell Data", ColumnKey2: "Cell Data", ColumnKey3: "Cell Data", ColumnKey4: "Cell Data" },
        { ColumnKey1: "Cell Data", ColumnKey2: "Cell Data", ColumnKey3: "Cell Data", ColumnKey4: "Cell Data" },
        { ColumnKey1: "Cell Data", ColumnKey2: "Cell Data", ColumnKey3: "Cell Data", ColumnKey4: "Cell Data" },
    ];

    const columnDefinitions = [
        { columnDataKey: "ColumnKey1", title: "A Custom Header Title" },
        { columnDataKey: "ColumnKey2", title: "Another Custom Title" },
        { columnDataKey: "ColumnKey3", title: "Title Is Custom" },
        { columnDataKey: "ColumnKey4", title: "Custom Title" },
    ];
    return (
        <VSCodeDataGrid rowsData={rowsData} columnDefinitions={columnDefinitions}></VSCodeDataGrid>
    );
}

Expected behavior

This is the example taken from the documentation, and I'm expecting rows and cells to render

Current behavior

Nothing.

Screenshots

Looking at the browser debug tools, I can see this:

The "undefined" tags appear to be where the rows are supposed to be

Desktop (please complete the following information):

• OS Version: Windows 10; Chrome
• Toolkit Version: 1.2.1

Additional context

[hawkticehurst]

Thanks for the report @tomqwpl

I'll go ahead and put this on the backlog to check out! As a heads up, we're really tightly resourced on the toolkit at this time, so just wanted to set expectations that it might take a while for us to tackle this.

As an alternative that might be helpful in the meantime, I've seen a lot of folks who are using the React components take advantage of React's templating syntax to map over data and generate data grid components.

Here's a super basic example that hopefully gets the idea across:

import {
  VSCodeDataGrid,
  VSCodeDataGridRow,
  VSCodeDataGridCell
} from "@vscode/webview-ui-toolkit/react";

const rowData = [
  { "cell1": "Cell Data", "cell2": "Cell Data", "cell3": "Cell Data", "cell4": "Cell Data" },
  { "cell1": "Cell Data", "cell2": "Cell Data", "cell3": "Cell Data", "cell4": "Cell Data" },
  { "cell1": "Cell Data", "cell2": "Cell Data", "cell3": "Cell Data", "cell4": "Cell Data" },
];

return (
  <VSCodeDataGrid>
    <VSCodeDataGridRow row-type="header">
      <VSCodeDataGridCell cell-type="columnheader" grid-column="1">A Custom Header Title</VSCodeDataGridCell>
      <VSCodeDataGridCell cell-type="columnheader" grid-column="2">Another Custom Title</VSCodeDataGridCell>
      <VSCodeDataGridCell cell-type="columnheader" grid-column="3">Title Is Custom</VSCodeDataGridCell>
      <VSCodeDataGridCell cell-type="columnheader" grid-column="4">Custom Title</VSCodeDataGridCell>
    </VSCodeDataGridRow>
    {rowData.map((row) => (
      <VSCodeDataGridRow>
        <VSCodeDataGridCell grid-column="1">{row.cell1}</VSCodeDataGridCell>
        <VSCodeDataGridCell grid-column="2">{row.cell2}</VSCodeDataGridCell>
        <VSCodeDataGridCell grid-column="3">{row.cell3}</VSCodeDataGridCell>
        <VSCodeDataGridCell grid-column="4">{row.cell4}</VSCodeDataGridCell>
      </VSCodeDataGridRow>
    ))}
  </VSCodeDataGrid>
)

Hope that helps and let me know if you have any questions!

[tomqwpl]

OK Thanks.
In fact that's what I've done because it feels the more React-ey way of doing things anyway. The DataGrid documentation recommends doing things by setting the row data, so I was trying it that way.

[hawkticehurst]

Oh perfect, and yes agreed on it feeling more React-y.

I think I'll also go ahead and treat this as an issue with our docs and make an update that better clarifies rowsData doesn't work with the React components at this time since, as I said, I don't think we'll be adding support for it any time soon