I need to customize my angular grid to limit the number of columns displayed on screen to a maximum of 5 at a time. Even if there are more than 5 columns available, I want to restrict the user from showing more than 5. Is it possible to achieve this by setting up a select menu that allows me to switch between viewing only 2 columns at a time? Can this be accomplished using filtering or some JavaScript/TypeScript function?
html
<div>
<ag-grid-angular style="width: 100%; height: 500px;" class="ag-theme-alpine" [rowData]= "rowData"
[columnDefs]= "columnDefs" >
</ag-grid-angular>
</div>
component
import { Component } from '@angular/core';
import { GridRes } from './gridres.model';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'ag-custom';
columnDefs = [
{headerName: "Make", field: "make"},
{headerName: "Model", field: "model"},
{headerName: "Price", field: "price"}
];
rowData = [
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxter", price: 72000}
];
}