How to select column in ag-grid

Question

I an using Ag-Grid.

I want to select column horizontal and vertical like under picture.

How to solution??

Answer 1

I think you would have to do this manually. You could watch for cell selection yourself, and then keep track of the selected column. Then you could use cellStyle in the column definition params to set the background color when the column is selected. You have to redraw the rows, since the cellStyle function only gets run when the rows are drawn. For example:

onCellFocused: function(params) {
    if (params.column) {
        selectedColumn = params.column.colDef;
        params.api.redrawRows();
    }
},
defaultColDef: {
    cellStyle: function(params) {
        if (params.colDef === selectedColumn) {
            return {'background-color': '#b7e4ff'};
        }
    }
}

Unfortunately, it looks like redrawing the rows clears the selection, so you either have to reselect the row manually, or use a row style.

Check it out here: https://stackblitz.com/edit/ag-grid-select-column?embed=1&file=index.js