The column select modal (Choose Columns) from column header menu lists all the columns in the colDef including a checkbox to select/un-select all columns.

Trying 2 things -

1. Disable the select/un-select all columns checkbox
2. Disable the select/un-select of certain columns

Any idea how to achieve this in ag-grid-react

Tried with few options from column def available properties.

Expecting -

• to disable the select/unselect all checkbox
• Disable the select/un-select of certain columns

The column select modal (Choose Columns) from column header menu lists all the columns in the colDef including a checkbox to select/un-select all columns.

Trying 2 things -

1. Disable the select/un-select all columns checkbox
2. Disable the select/un-select of certain columns

Any idea how to achieve this in ag-grid-react

Tried with few options from column def available properties.

Expecting -

• to disable the select/unselect all checkbox
• Disable the select/un-select of certain columns

• ag-grid
• ag-grid-react

• Do you mean columns tool panel? – Raghavendra N Commented Feb 13 at 17:13
• No - the choose columns panel. – Spandan Commented Feb 19 at 0:30

1 Answer 1

If you want to show the checkboxes and have them in the disabled state, I don't think it is possible (at least in a clean way using the AG Grid API). But you can show or hide the checkboxes in the Choose Columns panel.

You can use columnChooserParams and control whether the checkboxes should be shown or not.

1. Show/Hide the select/un-select all columns checkbox

To achieve this use the below config:

columnChooserParams: {
  suppressColumnSelectAll: true,
}

2. Show/Hide the select/un-select of certain columns

You can achieve this using the custom column layout. With this config you can even control the order the columns displayed in the Choose Columns panel.

Example:

columnChooserParams: {
  columnLayout: [
    {
      field: "age",
    },
    {
      field: "athlete",
    },
    {
      field: "country",
    },
    {
      field: "year",
    },
    {
      field: "sport",
    },
    {
      field: "total",
    },
  ],
},

Checkout this CodeSandbox demo. In this demo I've hidden the Select All checkbox and I've implemented the custom column layout to enable only few columns to be selected/unselected.

This is how it looks: