AnalyticalTable first row selected

[francinyreichert]

Hello,

I am using a FlexibleColumnLayout component with the two columns layout and an AnalyticalTable on the first column. I'm trying to make the first row to be selected everytime I enter the application, and if the user select another row this row should be selected:

I tried to do the following:

const [selectedRowId, setSelectedRowId] = useState<{ [key: string]: boolean }>({ "0": true });
return (
<AnalyticalTable
         selectedRowIds={selectedRowId} 
         onRowClick={(e?: CustomEvent<{ row?: unknown }>): void => {
            const row = e?.detail.row as Record<string, unknown>;
            setSelectedRowId({ [row.id as string]: true });
          }
        }
/>
);

But this didn't work, the first row was not selected. It only worked when I used selectedRowIds={ "0": true }, but I can't have this value fixed, I need it to be variable because the user should be able to select other rows.

Do you have any suggestions on how can I do this?

[Lukas742]

Hi @francinyreichert

the issue you're describing can have multiple root causes, so to be able to help you please provide a reproducible example preferably by leveraging this codeSandbox template.

[francinyreichert]

Hi @Lukas742, I created this code sandbox with an example, but it looks like it is working as expected there... I'll have to check my code to try to find the issue.

[francinyreichert]

@Lukas742 I tried to reproduce it on codesandbox, but I couldn't. Do you think this issue could be related to multiple re-renders?

[Lukas742]

Normally the internal table state should be stable. Did you memoize your data array?

[francinyreichert]

Apparently this issue is being caused because our table data is being loaded after the table renders...

[Lukas742]

The AnalyticalTable resets its internal state when the data changes. You can find out how to prevent that in the "How to stop the table state from automatically resetting when the data changes?" Recipe.

[francinyreichert]

tested here and it worked! thank you, @Lukas742 :)