Как сделать сетку AG адаптивной для представлений на мобильных устройствах и планшетах в Angular? ⇐ CSS

[Anonymous]

Я использую AG Grid в своем приложении Angular для отображения данных в виде сетки. Сетка отлично выглядит на ноутбуке, но при просмотре на мобильном телефоне или планшете (iPad) все столбцы сжимаются и становятся трудночитаемыми.
Я хочу сделать сетку адаптивной, чтобы это обеспечивает лучший пользовательский опыт на мобильных устройствах. Ничего страшного, если для небольших экранов будет добавлена ​​горизонтальная полоса прокрутки, при условии, что столбцы будут отображаться в расширенном и читаемом формате.
Каковы наилучшие подходы для достижения этой цели в AG Grid? Существуют ли определенные параметры сетки, настройки CSS или другие методы, которые мне следует использовать?

Код: Выделить всё

initializeGridOptions(): GridOptions {
return {
pagination: true,
rowModelType: 'infinite',
cacheBlockSize: 10,
paginationPageSize: 10,
infiniteInitialRowCount: 10,
paginationPageSizeSelector: [10, 20, 50, 100],
maxConcurrentDatasourceRequests: 1,
cacheOverflowSize: 1,
context: {
componentParent: this,
},
columnDefs: this.getColumnDefs(),
datasource: this.getDataSource(),
defaultColDef: {
sortable: true,
filter: true,
resizable: true,
autoHeight: true
},
};

Вот HTML-код:

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/793 ... in-angular