Uncheck and check checkbox of some of columns in columnsMenuTab(list of columns) in ag-Grid

Question

https://www.ag-grid.com/javascript-grid-column-menu/

I am trying to create a "columnsMenuTab" on column Header which consists of checked and unchecked column list in dropdown.

(1) How to check and uncheck checkbox of "columnsMenuTab"(may be in columnDefs).

  this.state = {
     rowData: [
    { "Name": "", "Id": '', "Priority": "Medium", "Date": "24/08/2008", "Status": "Completed", "gold": 8, "silver": 0, "bronze": 0, "total": 8 }
       ],
     columnDefs: [
      { field: 'Name'},    // checked in columnsMenuTab
    { field: 'Id'},        // checked in columnsMenuTab
    { field: 'Priority'},  // unchecked in columnsMenuTab
    { field: 'Date'},      // checked in columnsMenuTab
    { field: 'Status'}    // unchecked in columnsMenuTab
    ]
    }
    
    
     render() {
        return (
          <React.Fragment>
            <div style={{ width: '100%', height: '100%' }}>
              <div className="example-wrapper">
                  <div id="myGrid" className="ag-theme-alpine" style={{ height: '500px', width: '1024px' }}>
                    <AgGridReact
                      columnDefs={this.state.columnDefs}
                      defaultColDef={this.state.defaultColDef}
                      overlayLoadingTemplate={this.state.overlayLoadingTemplate}
                      overlayNoRowsTemplate={this.state.overlayNoRowsTemplate}
                      onGridReady={this.onGridReady}
                      rowData={this.state.rowData}
                      components={this.state.components}
                      frameworkComponents={this.state.frameworkComponents}
                      enableRangeSelection={true}
                      allowContextMenuWithControlKey={true}
                      icons={this.state.icons}
                      getContextMenuItems={this.getContextMenuItems}
                      popupParent={this.state.popupParent}
                    ></AgGridReact>
                  </div>
                ) 
                }
              </div>
            </div>
          </React.Fragment>
        )
      }

Attached plunker:- https://plnkr.co/edit/XbyFsa49VjfReShq

Mahi Mahi · Accepted Answer · 2020-10-12T10:14:00

There are two ways to show hide a column/columns- (true/false)

(1)
     params.columnApi.setColumnsVisible([...objArr], false) ; // if multiple columns need to be hidden set as false or true
        
        params.columnApi.setColumnVisible("ColumnName", false) ; // if one columns need to be hidden set as false or true

(2)

colDefs:
=========

    hide: true/false

Uncheck and check checkbox of some of columns in columnsMenuTab(list of columns) in ag-Grid

1 Answers