Basic question on Atlaskit DynamicTable

Forge Forge UI Kit and Custom UI
, ,
1

I would like to use DynamicTable from Atlaskit in my Forge Custom UI app, but have challenges to get it running. I tried to create a basic example with static content, but still nothing is rendered and I don’t find related error messages.

Here is my code. My actual test data looks like this.

const testdata = [
    {id:1, testtext: "Eins"},
    {id:2, testtext: "Zwei"}
];

In order to translate that into rows for DynamicTable I understood, I need to create something like this. Is that correct?

const testrows = [
    {
        key: '1',
        cells: [
            {
                key: 'id-1',
                content: '1',
            },
            {
                key: 'testtext-1',
                content: 'Eins',
            }
        ]
    },
    {
        key: '2',
        cells: [
            {
                key: 'id-2',
                content: '2',
            },
            {
                key: 'testtext-2',
                content: 'Zwei',
            }
        ]
    }
];

My header definition looks like this. Is this in correct structure?

const head = {
    cells: [
        {
            key: "id",
            content: "ID",
        },
        {
            key: "testtext",
            content: "Test Text",
        }
    ]
};

Then I am using this in App.js together with DynamicTable, but nothing is rendered.

import DynamicTable from '@atlaskit/dynamic-table';

function App() {
    const head = ...
    const testrows = ...

    return (
        <div>
            <DynamicTable 
                  head={head}
                  rows={testrows}
            />
        </div>
    );
}

export default App;

Any idea why nothing is rendered?

I guess I am doing a mistake in the definition of head or testrows?

2

Your code works: prod-https-mqs3nj - CodeSandbox

Must be something else causing the issue. React or Atlaskit version perhaps.

3

Thank you very much for checking. So it is not an issue with datarows and head Javascript objects.

I reviewed package.json in the root folder and in static/hello-world folder and found that dependency for @atlaskit/dynamic-table was added to package.json in root folder rather than static subfolder of the custom UI app. I moved it and then ran “npm install” in the static/hello-world folder.

Now it works and data is shown in DynamicTable. So your hint with Atlaskit version helped to find the issue. Thank you very much!

4

Not that I know of. I’d start by just uninstalling and reinstalling dynamic table. Run the build and fix any errors it throws. If that doesn’t work, downgrade your React version. There’s a few threads I’ve seen where Atlaskit doesn’t play nice with it.