Dynamic tabs in DatagridConfigurable break field synchronization with SelectColumnsButton

[nepster-web]

The main issue is that when we use dynamic fields in DatagridConfigurable together with SelectColumnsButton, the result works very strangely.

I will try to demonstrate the situation visually and also prepare a sandbox environment for reproduction.

Let’s imagine that we have a complex Datagrid with tabs. For example, we’ll have two tabs: one for sms data and another for email data.

Each entity (SMS and Email) can have its own fields, for example:
sms: date, full price, total, cost
email: date, total, size

When we switch between the tabs, there are no issues.

Now, let’s focus on the SelectColumnsButton. The dropdown list of fields in the SelectColumnsButton does not respond to tab switching, even though the fields in the Datagrid change.

The SelectColumnsButton simply uses the fields from the default tab, ignoring any tab switches.

Furthermore, if we try to disable totalPrice (which doesn’t exist for Email), the total field disappears from the Datagrid. This is likely due to index misalignment—SelectColumnsButton seems to rely on the sequence of fields and disables the first one in the list.

I also tried performing a refresh, but that doesn’t work either.

What you were expecting:

I think the fields in the SelectColumnsButton should update together with the DatagridConfigurable. Additionally, it’s probably better to use source instead of relying on the index.

https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.tsx#L64

Steps to reproduce:

You can use the sandbox from the Related code section, go to the tests section (the last icon), ensure the SMS tab is open, and check the fields in COLUMNS. Then switch to the Email tab to confirm that the table changes, but COLUMNS remains the same.

Related code:

I was able to reproduce this behavior in the last test tab:

https://bolt.new/~/github-apt5o9-wbtm9a

Other information:

Currently, I managed to work around the issue by creating custom components, CustomSelectColumnsButton and CustomDatagridConfigurable, and overriding the preferenceKey:

preferences.${finalPreferenceKey}.availableColumns

to

preferences.${finalPreferenceKey}.availableColumns_${mode}

while adding the corresponding logic.

I don’t think this is an ideal solution, but I couldn’t find a better way.

Environment

• React-admin version: 5.3.3
• Last version that did not exhibit the issue (if applicable): ---
• React version: 18.3.1
• Browser: doesn't matter
• Stack trace (in case of a JS error): doesn't matter

[slax57]

Thank you for your report.

First of all, we have an ongoing PR aiming at improving datagrid configurable columns management with dynamic columns: #10339.
However this feature turns out to be more complex than anticipated, so we can provide no ETA for now.

That being said, the issue you are facing is the result of using your own tabs system with Datagrid. This is not a use-case we support out of the box. Hence, this issue can't be considered a bug.
So I'm closing this issue, and inviting you to follow, or even contribute, to PR #10339 to see if it can help solve your issue.

Lastly, I'd like to mention the ability to pass a preferenceKey prop to <DatagridConfigurable>, which allows 2 Datagrids to have 2 separate configurable states. This could maybe help if you make your tabs actually render 2 different Datagrids, each with its own preferenceKey.
You can see an example in our Storybook.
Hope this helps!