How to hide columns in Datagrid based on filters values - admin-on-rest

Question

Can we dynamically show/hide the columns of a List Datagrid based on the filters values?
I do not see how we can do this. Thanks for any help on this.

Answer 1

This is not possible with the default ra-ui-materialui List component. You'll have to implement your own, using it as a starting point.
Feel free to open a feature request issue on the https://github.com/marmelab/react-admin repository describing the use case.

Answer 2

You can refer to this link for customizing your datagrid columns : https://github.com/fizix-io/ra-customizable-datagrid
OR,
you can make your list component as a stateful component, and implement your own Actions in the List component like a toggle button.
For Example:
class MoreDetails extends Component {
constructor() {
super();
this.state = {
showDetails: false
};
}
toggleDetails = () => {
const toggle = this.state.showDetails;
this.setState((prevState, props) => {
return {
showDetails: !toggle,
}
});
}
render() {
const { classes, ...props } = this.props;
const MyActions = ({ basePath, data, resource }) => (
<CardActions style={cardActionStyle}>
<Button
color="primary"
onClick={this.toggleDetails}
>Toggle Details</Button>
</CardActions>
);
return <List
actions={<MyActions />}
{...props} >
<Datagrid>
<TextField source="c1" label="Column1" />
<TextField source="c2" label="Column2" />
{this.state.showDetails ?
<TextField source="c3" label="Column3" /> : null }
<TextField source="c4" label="Column4" />
{this.state.showDetails ?
<TextField source="c5" label="Column5" /> : null }
</Datagrid>
</List>
}
}