How to hide column in AG-Grid?

Question

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

Ishwor Timilsina · Accepted Answer · 2018-12-03T20:22:48.073

58

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

edited Dec 03 '18 at 20:22

answered Feb 20 '18 at 17:33

Ishwor Timilsina

1,344
12
11

1

is there a interface for columnDefs? I haven't found one yet – Winnemucca Mar 18 '20 at 21:02
@Winnemucca What do you mean by interface? – Ishwor Timilsina Mar 19 '20 at 18:27
@Winnemucca https://www.ag-grid.com/javascript-grid-column-properties/ scroll down to the "columns only" section to see all available definitions – Tagman Oct 05 '20 at 08:40
3

Can I prevent a column from appearing in the column menu ? – eddy Oct 15 '20 at 15:25
@eddy suppressToolPanel: true prevents a column from being an available option to group or pivot in the Columns side toolbar. – Sam Araiza Apr 06 '21 at 22:23
1

@Winnemucca there is an interface in the `ag-grid-community` package, `interface ColDef extends AbstractColDef`. – Rich Aug 11 '21 at 17:40

score 45 · Answer 2 · answered May 24 '19 at 13:49

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

Can I prevent a column from appearing in the column menu ? – eddy Oct 15 '20 at 15:24 — eddy, Oct 15 '20 at 15:24

score 14 · Answer 3 · answered Jan 28 '19 at 09:59

14

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

answered Jan 28 '19 at 09:59

Vojtech Ruzicka

16,384
15
63
66

Can I prevent a column from appearing in the column menu ? – eddy Oct 15 '20 at 15:24

score 7 · Answer 4 · answered Aug 13 '21 at 07:02

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.

score 3 · Answer 5 · edited Nov 21 '17 at 12:05

3

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

edited Nov 21 '17 at 12:05

adiga

34,372
9
61
83

answered Nov 21 '17 at 12:03

Pathi

31
2

5

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – adiga Nov 21 '17 at 12:05
1

Can I prevent a column from appearing in the column menu ? – eddy Oct 15 '20 at 15:24

score 2 · Answer 6 · answered Nov 24 '20 at 18:01

2

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

In the package.json:

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

answered Nov 24 '20 at 18:01

Adrian

201
2
8

score 1 · Answer 7 · answered Jun 24 '16 at 18:19

1

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

answered Jun 24 '16 at 18:19

ScottG

534
4
9

thank you for giving answer..But.. hide: "true" this is working for hide the column from AG grid but this column appears in Toolpanel...My question is if hide the column then it should not display value as well as it should not appear inTool Panel... – nkota Jul 01 '16 at 11:57

score 1 · Answer 8 · answered Feb 28 '22 at 09:34

1

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

Ex:

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

answered Feb 28 '22 at 09:34

Indranil

2,229
2
27
40

score 0 · Answer 9 · answered Jun 30 '20 at 19:03

0

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

answered Jun 30 '20 at 19:03

Ramesh

11

3

What does this answer contribute beyond what other answers already state? – A. R. Jun 30 '20 at 20:28

score 0 · Answer 10 · answered Nov 30 '22 at 03:01

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

How to hide column in AG-Grid?

10 Answers10

Linked