'Default Row' property does not work in table component

[bychung]

• Goal: Want to use Default row property in Table component

• Steps: See below screenshot

• Details:

• Screenshots:
  

• App json export: (here's how to get a json export)

[bychung]

1. Not only by 'Key', but also 'Index' does not work as well
2. Want to select default row on first loading automatically.

[ZeroCodez]

Hey @bychung

I understand your issue. Please follow the steps as shown in the screenshots I’ve provided.

[walteriseyon]

I have been trying to use a similar method but referring to the index instead. I want it to automatically select the first row when the page is loaded. The table is loaded from a query that runs when the user navigates to the page. Could the issue be that the table refers to the index before the data returns and it does not work? I've noticed that it works when i am editing the page but when i run the app it doesn't seem to work.

This is how i reference the row.

Any help would be appreciated.

[Paulo]

Hi @walteriseyon, just add a 'Success' event handler to the query set as the data source for the table.

For example, 'query11' is the data source of this table:

I just added a success event handler to select the first row (index 0):

[walteriseyon]

@Paulo I tried that but it didn't seem to work consistently. I ended up putting the query trigger and the selectRow in some javascript and then running the javascript during page load. That seems to work all the time.

Here is the script i used.

function triggerAndSelectJurisdiction() {
  getJurisdictionbyID.trigger({
    onSuccess: () => {
      const firstRow = tbl_jurisdiction_detail.getDisplayedData({ includeHiddenColumns: false })[0];
      if (firstRow) {
        tbl_jurisdiction_detail.selectRow({ mode: 'key', key: firstRow.jurisdiction_id });
      }
    }
  });
}

return triggerAndSelectJurisdiction();
``'

[Paulo]

Thank you for sharing your workaround!

[jkns]

I just want to first row of the table to be selected once the data has loaded. I'm sure this used to work fine by setting Default row to Index and Display index to 0, but now I'm having to not only add a success event handler on the query that populates the table to select the row at index 0, but also having to add a Debounce to 200 for it to work.

Feels like a race condition where the table is trying to select the row before the data is loaded?

[Paulo]

Thanks for sharing your experience. I tested on a table with much more data and I was able to replicate the race condition with the event handler when no 'Primary key' is set and the row selection is set on the component's settings:

The 4th row (i = 3) gets selected for a millisecon, then the first row is selected:

It looks like the event handler runs before the setting on the component. However, without row selection set on the component's settings, and a 'Primary key' selected, the event handler works every time.

I'm also seeing that this does not happen when the row selection is set with the settings from the first screenshot.