如何在Angular中实现AG Grid在移动端和平板端的响应式显示？

问题背景 #

在Angular应用中使用AG Grid展示数据时，桌面端显示正常，但在移动端或平板（如iPad）上所有列会被过度压缩，导致内容难以阅读。需求是实现网格响应式，让小屏幕设备上显示横向滚动条，保持列以展开、易读的形式展示。

现有代码实现 #

TypeScript 配置 #

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 模板 #

<div class="col-md-12">
      <ag-grid-angular
            class="ag-theme-quartz"
            [domLayout]="'autoHeight'"
            [gridOptions]="gridOptions"
            [loadingOverlayComponent]="loadingOverlayComponent"
            [overlayNoRowsTemplate]="noRowsTemplate"
            [enableCellTextSelection]="true"
            (gridReady)="onGridReady($event)">
        </ag-grid-angular>
    </div>

解决方案 #

1. 移除autoHeight布局并配置容器横向滚动 #

domLayout="autoHeight"会强制网格自适应父容器宽度，导致列被压缩。移除该配置后，给网格容器添加横向滚动和最小宽度限制：

修改HTML模板：

<div class="col-md-12 ag-grid-container">
  <ag-grid-angular
        class="ag-theme-quartz"
        [gridOptions]="gridOptions"
        [loadingOverlayComponent]="loadingOverlayComponent"
        [overlayNoRowsTemplate]="noRowsTemplate"
        [enableCellTextSelection]="true"
        (gridReady)="onGridReady($event)">
    </ag-grid-angular>
</div>

添加CSS样式：

.ag-grid-container {
  overflow-x: auto;
  /* 设置最小宽度为列总宽度的合理值，避免列过度压缩 */
  min-width: 800px;
}

2. 设置列的最小宽度 #

在defaultColDef中添加minWidth，确保每列不会被压缩到无法阅读的宽度：

defaultColDef: {
  sortable: true,
  filter: true,
  resizable: true,
  autoHeight: true,
  minWidth: 120, /* 根据内容调整合适的最小宽度 */
  width: 150 /* 可选：设置列的默认宽度 */
},

3. 可选：响应式列隐藏（针对极小屏幕） #

如果需要进一步优化极小屏幕体验，可以给非核心列添加条件隐藏逻辑：

columnDefs: [
  { field: 'id', minWidth: 80 },
  { field: 'name', minWidth: 150 },
  // 屏幕宽度小于768px时隐藏描述列
  { field: 'description', minWidth: 200, hide: window.innerWidth < 768 },
  // 其他列配置...
]

或者在窗口 resize 时动态调整列显示：

onGridReady(params: GridReadyEvent) {
  // 初始化时适配列宽
  params.api.sizeColumnsToFit();
  
  // 监听窗口大小变化，动态调整列
  window.addEventListener('resize', () => {
    const isMobile = window.innerWidth < 768;
    params.api.setColumnVisible('description', !isMobile);
    // 可添加更多列的显示/隐藏逻辑
  });
}

4. 移动端样式优化（可选） #

调整移动端的单元格内边距，让内容更紧凑：

@media (max-width: 768px) {
  .ag-theme-quartz .ag-cell {
    padding: 8px 4px;
  }
  .ag-theme-quartz .ag-header-cell {
    padding: 8px 4px;
  }
}

核心思路 #

通过让网格容器支持横向滚动，同时限制列的最小宽度，从根本上避免列被过度压缩。根据业务需求，可额外添加列的响应式隐藏或动态调整逻辑，进一步优化移动端体验。

内容的提问来源于stack exchange，提问作者Ch Vamsi