Dynamically add rows to data table resulting in loading the rows forever

[Thomas_Haitsma]

Hi all,

I’ve developed an custom app that does batch actions very specifically tailored to our own needs. I’m trying to give the user a visual update for each request. Previously I used a regular data table for this and just appended a row for each response to a request.

I was now doing some updates and wanted to move all UI elements from bootstrap to crayons. I can make it so that rows are added to the table for each request, but the table somehow stays in the loading state where you see the skeleton for each row that is added, see attached picture.

has anyone dynamically added rows to a table like this and gotten it to work? Would love some tips & trics

[Raviraj (Raviraj Subramanian)]

Hi @Thomas_Haitsma,

Could you share a minimal code that I can use to replicate the scenario to test?

[Thomas_Haitsma]

Hi @Raviraj sorry for the late answer.

Here is first how I create the table:

const updateTable = document.createElement('fw-data-table')
  updateTable.setAttribute('id', 'status-update-table')
  updateTable.columns = [
    {
      key: 'request_id',
      text: 'Request Number',
      widthProperties: {
        width: '300px',
      },
    },
    {
      key: 'request_url',
      text: 'Request URL',
      widthProperties: {
        width: '300px',
      },
    },
    {
      key: 'status',
      text: 'Status',
      widthProperties: {
        width: '300px',
      },
    },
    {
      key: 'failed_reason',
      text: 'Failed reason',
      widthProperties: {
        width: '300px',
      },
    },
    {
      key: 'retry',
      text: 'Retry',
      widthProperties: {
        width: '300px',
      },
    },
  ]
  updateStatusDiv.appendChild(updateTable)

And then later I try to add rows to the table like this:

const updateTable = document.getElementById('status-update-table')
updateTable.rows.push({
      request_id: index,
      request_url: path,
      status: response.status,
      failed_reason: 'nb',
      retry: 'false',
    })

When I then log the rows, it shows it is there, but in the UI it does not actually show.

console.log(updateTable.rows)

thanks in advance!