I am using Ag-grid in Angular6 project. I am facing a problem of ag-grid table responsiveness. When i minimize the browser but it does't show any scrolling. Maximum column goes disappear. But when these code run in to Plunker it shows responsiveness. I can't identify the problem.
I am using these ag-grid version:
"ag-grid": "^18.1.2",
"ag-grid-angular": "^18.1.0",
"ag-grid-community": "^19.0.0",
"ag-grid-enterprise": "^19.0.0",
// my ts file
private gridApi;
private gridColumnApi;
private columnDefs;
private rowData;
public constructor() {
this.columnDefs = [
{
headerName: 'Make',
field: 'make',
minWidth: 100,
},
{
headerName: 'Model',
field: 'model',
minWidth: 100,
},
{
headerName: 'Price',
field: 'price',
minWidth: 100,
},
{
headerName: 'Price',
field: 'a',
minWidth: 100,
},
{
headerName: 'Price',
field: 'b',
minWidth: 100,
}
];
this.rowData = [
{
make: 'Toyota',
model: 'Celica',
price: 35000,
a: 'aa',
b: 'bb',
c: 'cc',
d: 'dd',
},
{
make: 'Toyota',
model: 'Celica',
price: 35000,
a: 'aa',
b: 'bb',
c: 'cc',
d: 'dd',
}
];
}
// my html file
<ag-grid-angular
#agGrid
style="width: 100%; height: 100%;"
id="myGrid"
class="ag-theme-balham"
[columnDefs]="columnDefs"
[rowData]="rowData">
</ag-grid-angular>
I have solved this problem. It's a package integrated problem. I have deleted ag-grid and ag-grid-enterprise package. then solved the problem.