Hide columns in Datagrid based on filters values OR on action buttons

[afilp]

Is your feature request related to a problem? Please describe.
We need to dynamically show/hide the columns of a List Datagrid based on the filters values OR custom action buttons

Describe the solution you'd like
Not sure how this could be better, just a suggestion:

        <TextField label="lifespan" source="lifespan" hide={/*SOMETHING HERE, A FUNCTION, ETC. THAT READS SOME HIDE INFO PER FIELD FROM THE REDUX STATE AND DETERMINES IF SHOWN OR NOT}/>
        <TextField label="bills" source="bills" />

It was suggested by @djhi to add it as an enhancement request here.

This is the related SO question:

https://stackoverflow.com/questions/50861029/how-to-hide-columns-in-datagrid-based-on-filters-values

[fzaninotto]

Can you describe the use case? I don't understand the relationship between filters and visible columns.

[afilp]

@fzaninotto You are right, i should not have mentioned filters. I just need some toggle buttons (or a drop-down menu, or any other UI structure) with which I can restrict the List columns to a view with only some of the columns.

See the use case here, I do the same in another dashboard (not using react-admin there):

Depending on the value there, I either show "All" columns or a subset of them.

I believe you can be inspired better than me on how this could work with the react-admin architecture, I am not sure what to suggest implementation-wise.

Thanks!

[fzaninotto]

Right, so the filters aren't designed for that use case.

I suggest you create a custom sown_columns reducer for that purpose, create a select box in the action bar that dispatches action to modify that part of the state, and connect a custom Datagrid component to the store, filter the columns, then render using the react-admin datagrid.

So it's doable in React, and we won't support it via filters in the core. I'm closing this issue as "wontfix". Thanks for the suggestion, though!

[afilp]

@fzaninotto It worked, the only "issue" is that it does not render when conditionally rendering the Datagrid fields. This is due to the pure rendering approach:

const PureDatagridBody = shouldUpdate(
    (props, nextProps) =>
        props.version !== nextProps.version ||
        nextProps.isLoading === false ||
        !areArraysEqual(props.ids, nextProps.ids) ||
        props.data !== nextProps.data
)(DatagridBody);

I just have a new isShown prop coming from the redux state and this fails to trigger the re-render.

If you have the time to comment, this is the only obstacle we have to overcome to re-render the filtered columns without changing the react-admin core. Maybe it is something simple on our end? Thanks.

UPDATE: Eventually, adding a key to List (that changes with isShown value) did the refresh. But it seems quite slow because it fetches data again, etc. (while we only need to show/hide columns).

[AkselsLedins]

@afilp Maybe this would work for you ?

https://github.com/fizix-io/ra-customizable-datagrid

[kopax]

@afilp you could try to replace List with ListController > ListView and set the key to ListView, this should solve the re-fetch issue you have.