Dynamic table inside forge app with button inside each row

Forge Forge UI Kit and Custom UI
, ,
1

Hello there,

I’ve been developing a Forge app for Bitbucket, and I’m aiming to insert a dynamic table within it. I want each row of this table to include a button for editing or deleting that row. However, I haven’t found a way to achieve this yet. Although I have managed to create a table populated with data, I am unable to add buttons to it.

I followed the instructions provided in this link: link, but even the link functionality, like in the examples, isn’t working in my code. I hoped that resolving the issue with the link would also address the problem with adding buttons.

The following code contains my rows, where I get the error

export const rows = presidents.map((president, index) => ({
    key: `row-${index}-${president.name}`,
    cells: [
      {
        key: createKey(president.name),
        content:  <Link href="">{president.name}</Link>,
      },
      {
        key: createKey(president.party),
        content: president.party,
      },
      {
        key: president.id,
        content: president.term,
      },
      {
        key: `button-${index}`,
        
      },
    ],
  }));

And this is the error I get

      ERROR in ./src/frontend/tsx/util.ts 14:32
Module parse failed: Unexpected token (14:32)
File was processed with these loaders:
 * ../../../../.nvm/versions/node/v20.14.0/lib/node_modules/@forge/cli/node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
|         {
|             key: createKey(president.name),
>             content: href, "":  > { president, : .name } < /Link>,
|         },
|         {
 @ ./src/frontend/tsx/rulesTable.tsx 30:15-32
 @ ./src/frontend/tsx/settings.tsx 31:21-44

and

[tsl] ERROR in ./src/frontend/tsx/util.ts(13,20)
      TS2749: 'Link' refers to a value, but is being used as a type here. Did you mean 'typeof Link'?
 @ ./src/frontend/tsx/rulesTable.tsx 30:15-32
 @ ./src/frontend/tsx/settings.tsx 31:21-44

Does anyone else had this problem before and could help?

2

Fixed it XD
I had to use a .tsx file instead a .ts file

1 Like