CODEWITHSUNDEEP
ag-gridag-grid-react
Spandan
Spandan

Reputation: 259

ag grid react - column selection modal - hide and disable 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 -

Upvotes: 0

Views: 31

Answers (1)

Raghavendra N
Raghavendra N

Reputation: 5496

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,
}
  1. 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:

Ag Grid Choose Columns panel customization

Upvotes: 0

Related Questions