如何隐藏 devextreme react 网格中不包含任何数据的行的列？答案

【问题标题】：How to hide columns for which rows do not hold any data in devextreme react grid?如何隐藏 devextreme react 网格中不包含任何数据的行的列？
【发布时间】：2019-08-22 17:02:57
【问题描述】：

我将https://devexpress.github.io/devextreme-reactive/react/grid/ 用于数据表，我有列可见性过滤器，以及数百行和大约 15 列。我想隐藏那些任何行都没有任何数据的列。如果不手动检查每一行与每一列 (O(n^2)) 并创建地图并使用该信息，我该如何做到这一点？有什么直接属性还是别的什么？

【问题讨论】：

标签： reactjs devextreme

【解决方案1】：

你可以使用Column Visibility。

带有TableColumnVisibility 和ColumnChooser 插件的网格组件提供了在运行时隐藏或显示表格列的功能。

但是你需要检查哪一列对所有行都没有任何值，一旦你得到所有这些列，你只需要在TableColumnVisibility 中传递道具。请查看以下示例

代码片段

render() {
    const { rows, columns } = this.state;
    //Check if all column value is blak for all row then need to push value in hiddenColumnNames.
    let hiddenColumnNames = columns.reduce((r,v)=>{
      if(!rows.find(obj=>obj[v.name] !== "")){
        r.push(v.name);
      }
      return r;
    },[]);//Hidden column will be [age,city]

    return (
      <Paper>
        <Grid rows={rows} columns={columns}>
          <Table />
          <TableHeaderRow />
          <TableColumnVisibility
          hiddenColumnNames={hiddenColumnNames}
        />
        </Grid>
      </Paper>
    );
  }

你可以在这里查看工作CodeSandbox

【讨论】：

可见性是一回事，但我问的是完全删除这些列表单视图甚至可见性菜单，我通过设置具有列名和值计数的映射来做到这一点，并过滤具有零值的那些。我正在检查我们是否有一些直接属性或其他控件用于此目的！
根据您的问题，您在问how to hide 并且有一个属性将隐藏该列。那就是满足你的要求。同样，如果您不想使用该属性，那么您可以只传递所有行值columns={columns} 的那些列。喜欢这个columns = columns.reduce((r,v)=>{ if(rows.find(obj=>obj[v.name] !== "")){ r.push(v.name); } return r; },[]);//only show this columns column will be columns