Can we change the view for AG grid in mobile devices

user_10831240 0
Viewed 6403

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?

responsive-design ag-grid javascript
1 Answers

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

user_86324620
Related