[英]How to hide column in Ag Grid?
I am fetching data from a database and filling it by adding a manual action button column into Ag-Grid. 我从数据库中获取数据并通过在Ag-Grid中添加手动操作按钮列来填充数据。 Now, the first columns consist of those action buttons and 2nd column contains _id I want to hide that second column but in ag-grid documentation they gave information only about hiding column on static data.
现在,第一列包含那些操作按钮,第二列包含_id我想要隐藏第二列,但在ag-grid文档中,它们仅提供有关隐藏静态数据列的信息。 Here's my code that has column def.
这是我的代码,其中包含列def。
setMasterData (state, payload) {
if (!payload) {
state.tableData.rows = [];
} else {
// First column holds the buttons to delete the row item
let cols = [{
field: '',
headerName: 'Actions',
width: 200,
colId: 'params',
cellRendererFramework: 'gridEditButtons'
}];
cols = cols.concat(Object.keys(payload[0]).map(x => {
return {
field: x,
headerName: x.replace(/([A-Z])/g, ' $1').replace(/^./, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); })
};
}));
state.tableData.cols = cols;
state.tableData.rows = payload;
}
}
How to hide the next column following action column? 如何隐藏动作列之后的下一列?
...gridColumnApi.setColumnVisible('name of column', false);
一种方法是根据列的名称关闭可见性。
Have this attribute on a column definition whichever column you would like to hide. 在列定义中具有此属性,无论您要隐藏哪一列。
hide: true
UPDATE UPDATE
If the code you've provided of map
works, then you should be able to achieve this like below. 如果您提供的
map
代码有效,那么您应该能够实现如下所示。
cols = cols.concat(Object.keys(payload[0]).map(x => {
return {
field: x,
hide: x === '_Id', // this will be true when your field == '_Id'
headerName: x.replace(/([A-Z])/g, ' $1').replace(/^./, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); })
};
}));
Condition provided for hide
will be true for _Id
, hence, that column will be hidden. 对于
_Id
,为hide
提供的条件将为true,因此,该列将被隐藏。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.