Using Grafana Table Component

So I am trying to make use of the grafana/ui table component and am having trouble generating a table. I followed this guide for creating the grafana dataframe. One other post someone made suggested that the solution was in this buildData() function, but I am not sure how I would go about using that either or why it is needed.

I am trying to make use of the Table component within a larger panel plugin that I am building. Below is my attempt at generating a table using dummy data. Currently it builds a table with the correct headers and number of row/columns, but the cells are not populated with any of the data.

import { Table } from '@grafana/ui';

  makeComponentWithData(width: number, height: number) {
    let testStrings: string[] = ['wdwdq', 'wwwrr'];
    let testNums: number[] = [6, 6];

    const data = toDataFrame({
      name: 'dataFrame',
      fields: [
        { name: 'strings', type: FieldType.string, values: testStrings },
        { name: 'nums', type: FieldType.number, values: testNums },

    if (data === undefined || data.length === 0) {
      return <p style={{ textAlign: 'center' }}> No Data </p>;
    } else {
      return <Table data={data} width={width * 0.9} height={height * 0.9} resizable={true} />;

You could have a look through the code here to see how data is being used. grafana/Table.tsx at main · grafana/grafana · GitHub .
Or maybe it could be quicker to copy one of the dataframe examples from their tests and see if that helps: grafana/Table.test.tsx at main · grafana/grafana · GitHub