javascript - agGrid-如何隐藏动态生成的列

在React agGrid中，hide: true在动态生成的列定义中不起作用。我的代码段如下:

if(data.length > 0) {
  for (var key in data[0]) {
      var obj = {}
      obj.headerName = key;
      obj.field = key;
      if(obj.field == "action") {
          obj.hide = true;
          obj.suppressToolPanel = true;
      }
      cols.push(obj);
  }
}

root.setState({
  columnDefs: cols,
  rowData : data
}, function(){
  console.log(root.state.columnDefs)
});

我在渲染函数中的agGrid如下:

<AgGridReact
  columnDefs={this.state.columnDefs}
  rowData={this.state.rowData}
  context={this.state.context}
  modules={this.state.modules}
  sideBar={this.state.sideBar}
  defaultColDef={this.state.defaultColDef}
  frameworkComponents={this.state.frameworkComponents}
  onGridSizeChanged={this.onGridSizeChanged.bind(this)}
  onCellClicked={this.onCellClicked.bind(this)}
  onFirstDataRendered={this.onFirstDataRendered.bind(this)}
  onGridReady={this.onGridReady.bind(this)}
>
</AgGridReact>

我想念什么吗？任何帮助对我都会非常有帮助。

最佳答案

更新列状态的正确方法是使用 ColumnApi.setColumnState()
另请注意:

AgGrid版本ColumnApi.setColumnState()

AgGrid版本> = 24:使用ColumnApi.applyColumnState()

const columnState = columnApi.getColumnState() || [];

columnApi.setColumnState(
  columnState.map((c) => {
    if (Math.random() > 0.5) {
      return { ...c, hide: true };
    }
    return { ...c, hide: false };
  })
);

现场演示