CODEWITHSUNDEEP
ag-gridag-grid-column
nkota
nkota

Reputation: 683

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" }]

Upvotes: 59

Views: 160506

Answers (12)

jobayer
jobayer

Reputation: 156

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

Upvotes: 0

Prabhas Kumra
Prabhas Kumra

Reputation: 666

HTML code

  <div>
    <label *ngFor="let col of columnDefs">
      <input type="checkbox" [checked]="!col.hide" (change)="toggleColumnVisibility(col)" /> {{col.headerName}}
    </label>
  </div>

The event function looks like this

  toggleColumnVisibility(column: any) {
    column.hide = !column.hide;
    this.agGrid.columnApi.setColumnVisible(column.field, !column.hide);
  }

Upvotes: 0

KARTHIKEYAN.A
KARTHIKEYAN.A

Reputation: 20088

We can hide column dynamically in the following way using onColumnVisible listen event

const onColumnVisible = useCallback(params => {
    if (params.source === 'toolPanelUi') {
        const colId = params.column ? [ params.column.colId ] : params.columns.map(col => col.colId)
        const value = columns.map(v => {
            if (v.colId === colId.find(c => c === v.colId)) {
                params.visible ? v.hide = false : v.hide = true
            }
            return v
        })
        if (value) {
            setColumns(value)
        }
    }
}, [ gridParams, setColumns ])

<Grid onColumnVisible={onColumnVisible } />

Upvotes: 1

Indranil
Indranil

Reputation: 2713

Just add "hide: true" in your column definition.

Ex:

var columnDefs = [{ headerName: "ABC", field: "XYZ", hide: true }]

Upvotes: 1

CodeChanger
CodeChanger

Reputation: 8351

Posting late but It may helpful for others with some extra details:

If you want to hide your column on the grid you can use hide property to hide that column from the grid.

Only hide from grid colDef example:

colMainDef = [
    {
      headerName: 'Approved',
      field: 'status',
      hide: true
    }]

But the same column will still be accessible on the side menu panel if you want to hide it from the side menu you can use one more property suppressColumnsToolPanel by making this true it will hide the column from the side menu.

Hide column from the grid as well as from side panel colDef example:

colMainDef = [
    {
      headerName: 'Approved',
      field: 'status',
      suppressColumnsToolPanel: true,
      hide: true,
    }]

Hope this will helps to hide/show columns as per your requirements.

Upvotes: 11

Adrian
Adrian

Reputation: 221

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

In the package.json:

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

Upvotes: 3

Ramesh
Ramesh

Reputation: 11

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);

Upvotes: 0

Roland
Roland

Reputation: 27729

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

Upvotes: 52

Vojtech Ruzicka
Vojtech Ruzicka

Reputation: 17075

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));

Upvotes: 16

Ishwor Timilsina
Ishwor Timilsina

Reputation: 1464

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
    }
]

Upvotes: 66

Pathi
Pathi

Reputation: 31

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

Upvotes: 3

ScottG
ScottG

Reputation: 674

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

Upvotes: 2

Related Questions