Question

我们可以根据过滤器值动态显示/隐藏List Datagrid的列吗？

我看不出我们怎么做到这一点。感谢您的帮助。

Answer 1

使用默认的ra-ui-materialui List组件无法做到这一点。你必须以它为出发点来实现自己的。

随意在描述用例的https://github.com/marmelab/react-admin存储库上打开功能请求问题。

Answer 2

您可以参考此链接来自定义数据网格列：https://github.com/fizix-io/ra-customizable-datagrid

或者，您可以将列表组件设为有状态组件，并像切换按钮一样在列表组件中实现自己的操作。

例如：

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

如何根据过滤器值隐藏Datagrid中的列

2 个答案: