简体   繁体   中英

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. 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. Here's my code that has column 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

If the code you've provided of map works, then you should be able to achieve this like below.

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM