AG-Grid Header Cell Selection

Question

I am trying to create an AG-grid to assign permissions in which the Header Selection should select all the cells available in that column.

It should be something like this :

One way is to create the Header using HTML template and Cell-Renderer for the rows.

Is there a way I can achieve this using AG-Grid Properties or API?

Answer 1

There is a Header Checkbox Selection examples in Ag-grid documentation.

Header Checkbox Selection

It is possible to have a checkbox in the header for selection. To configure the column to have checkbox, set colDef.headerCheckboxSelection=true. headerCheckboxSelection can also be a function, if you want the checkbox to appear sometimes (eg if the columns is ordered first in the grid).

// the name column header always has a checkbox in the header
colDef = {
    field: 'name',
    headerCheckboxSelection: true
    ...
}

// the country column header only has checkbox if it is the first column
colDef = {
    field: 'country',
    headerCheckboxSelection: function(params) {
        var displayedColumns = params.columnApi.getAllDisplayedColumns();
        var thisIsFirstColumn = displayedColumns[0] === params.column;
        return thisIsFirstColumn;
    }
    ...
}