I have been working on ag grid since quite long time. Currently we got a requirement to change the grid display for mobile devices (for example width <480 px).
Does Ag grid support/convert its view for small devices? If yes, could you provide the relevant link for the same?
The quickest way to achieve a responsive grid is to set the grid's containing div to a percentage. With this simple change the grid will automatically resize based on the div size and columns that can't fit in the viewport will simply be hidden and available to the right via the scrollbar.
Pagination is enabled using the grid option pagination=true . A pagination page size of 10 (default is 100) is set using the grid option paginationPageSize=10 . The number of rows returned per request is set to 10 (default is 100) using cacheBlockSize=10 .
Editing data inside the grid using the grid's UI, e.g. by the user double-clicking on a cell and editing the cell's value. When this happens the grid is in control and there is no need to explicitly tell the grid data has changed.
AgGrid adjust by itself. The default themes is capable of dynamic resizing itself.
You can use params.api.sizeColumnsToFit()
in either on onGridReady
or onFirstDataRendered
. This will do dynamic resizing with scrolls.
However i would suggest to create a seperate view for mobile, display only relevant colums which makes sense in mobile view.
var column = [{ field: "Col1" }, { field: "Col2", }, { field: "Col3", }, { field: "Col4", }, { field: "Col5", }];
var mobileColumn = [{ field: "Col1" }, { field: "Col2", }, { field: "Col3", }];
window.addEventListener('resize', function () {
setTimeout(function () {
if (window.innerWidth <= 480) {
gridOptions.setColumnDefs(mobileColumn);
params.api.sizeColumnsToFit();
}
})
})
dynamically set columns for mobile view
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With