How to hide column in AG-Grid?

问题

How to hide the column in AG-Grid and also it should not be displayed in Tool Panel...

var columnDefs = [{ headerName: "Stone_ID", field: "Stone_ID", width: 100, hide: "true" }]

回答1:

You can set the column property of suppressToolPanel to true to achieve that.

var columnDefs = [
    {
       headerName: "Stone_ID",
       field: "Stone_ID",
       width: 100,
       hide: true,
       suppressToolPanel: true
    }
]

回答2:

If you are looking for dynamically show/hide columns follow below:

You can use either setColumnVisible or setColumnsVisible.

NOTE: those functions expect a colKey(s) which is related to the field you set in columnDefs.

columnDefs = [
    {
       headerName: "Name", 
       field: "name", // => that!
       width: 150
    },
    {
       headerName: "Last Name", 
       field: "last_name", // => that!
       width: 150
    },
    // ...
];

When using setColumnVisible you can show/hide a single column

gridOptions.columnApi.setColumnVisible('name', false) //In that case we hide it

When using setColumnsVisible you can show/hide multiple columns

gridOptions.columnApi.setColumnsVisible(['name', 'last_name'], true) //In that case we show them

回答3:

To do this programatically you can use:

Hide columns:

this.agGrid.columnApi.setColumnsVisible(["COL_ID_1", "COL_ID_2"], false);

Show columns:

this.agGrid.columnApi.setColumnsVisible(["COL_ID_1", "COL_ID_2"], true);

To do this for a whole column group you can use:

  const group = this.columnApi.getColumnGroup("MY_GROUP");
  group.children.forEach(child => this.columnApi.setColumnsVisible(child, false));

回答4:

var columnDefs = [{ headerName: "Stone_ID", field: "Stone_ID", width: 100, hide: true }]

回答5:

hide: should get the value true, not the string "true" (like width: gets 100, not "100")

回答6:

hide column on load { headerName: 'ROE', field: 'roe', width: 100, hide: true },

based on selection you can show/hide it using example this.gridColumnApi.setColumnVisible('roe',true);

回答7:

{
  ...,
  hide: true,
  suppressColumnsToolPanel: true
}

In the package.json:

"dependencies": {
    "@ag-grid-community/angular": "^24.1.0",
    "@ag-grid-enterprise/all-modules": "^24.1.0",
    ...
} 

来源：https://stackoverflow.com/questions/37967341/how-to-hide-column-in-ag-grid