CODEWITHSUNDEEP
admin-on-restreact-admin
user2078023
user2078023

Reputation: 1266

How to hide columns in Datagrid based on filters values

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.

Upvotes: 3

Views: 2436

Answers (2)

Abhishek
Abhishek

Reputation: 69

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>
   }
}

Upvotes: 0

Gildas Garcia
Gildas Garcia

Reputation: 7066

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.

Upvotes: 1

Related Questions