如何防止Ag-Grid React最后一列调整大小时出现空白区域？

问题描述 #

以下是最后一列的当前配置：

{
  field: 'roles',
  headerName: 'User Roles',
  minWidth: 150,
  width: 240,
  sortable: true,
  cellDataType: 'object',
  filter: 'agNumberColumnFilter',
}

以下是AgGrid组件的配置：

<AgGridReact
    // rowData={tableData}
    ref={ref}
    columnDefs={tableColumns}
    defaultColDef={defaultColDef}
    rowSelection="multiple"
    suppressRowClickSelection
    pagination
    paginationPageSize={100}
    paginationPageSizeSelector={[10, 25, 50, 100, 200, 1000]}
    getRowStyle={getRowStyle}
    scrollbarWidth={8}
    tooltipShowDelay={0}
    tooltipHideDelay={2000}
    onRowDoubleClicked={handleDoubleClick}
    rowModelType="serverSide"
    onGridReady={tableData}
    // getRowId={getRowId}
    noRowsOverlayComponent={noRowsOverlayComponent}
    noRowsOverlayComponentParams={noRowsOverlayComponentParams}
  />

如何避免表格最后一列调整后出现空白区域？我不想完全移除列调整功能，只希望消除这个空白问题。

解决方案 #

方案1：给最后一列设置flex属性

让最后一列自动填充网格剩余宽度，从根源避免空白。修改最后一列配置：

{
  field: 'roles',
  headerName: 'User Roles',
  minWidth: 150,
  width: 240,
  flex: 1, // 添加该行，让列自动占满剩余空间
  sortable: true,
  cellDataType: 'object',
  filter: 'agNumberColumnFilter',
}

方案2：禁用最后一列的手动调整

保留其他列的调整功能，仅限制最后一列不能拖动修改宽度：

{
  field: 'roles',
  headerName: 'User Roles',
  minWidth: 150,
  width: 240,
  resizable: false, // 添加该行，禁用最后一列的调整
  sortable: true,
  cellDataType: 'object',
  filter: 'agNumberColumnFilter',
}

方案3：监听列调整事件动态修正宽度

通过事件监听，在最后一列调整后自动计算并填充剩余空间：

<AgGridReact
    // 其他原有配置...
    onColumnResized={(params) => {
      const allColumns = params.columnApi.getAllColumns();
      const lastCol = allColumns[allColumns.length - 1];
      // 判断调整的是最后一列时，重新计算宽度
      if (params.column === lastCol) {
        const totalWidthOfOtherCols = allColumns.slice(0, -1).reduce((sum, col) => sum + col.getActualWidth(), 0);
        params.columnApi.setColumnWidth(lastCol.getId(), params.gridApi.getGridWidth() - totalWidthOfOtherCols);
      }
    }}
  />

内容的提问来源于stack exchange，提问作者Sanal S