AG Grid开启rowDrag后被拖拽行占满屏幕宽度问题求解

修复方案 #

该问题由AG Grid拖拽行的默认渲染逻辑导致：拖拽过程中生成的临时行元素默认直接挂载在body节点下，无法继承表格外层容器的宽度限制，因此会出现撑满全屏的异常。按以下两步操作即可修复：

1. 新增拖拽元素的样式约束

针对AG Grid拖拽过程生成的临时元素专属类.ag-dnd-ghost添加宽度限制：

/* 全局样式添加如下规则 */
.ag-dnd-ghost {
  max-width: 100% !important;
  box-sizing: border-box !important;
  /* 若外层表格为固定宽度，可直接填写对应宽度值，例如max-width: 1200px */
}

/* 若项目使用CSS Modules，需用global包裹类名 */
:global(.ag-dnd-ghost) {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

2. 补充外层容器属性

你当前包裹AG Grid的div仅配置了主题类，缺少必要的宽度和定位规则，修改如下：

function AgGridClientSide({ handleRowSelection, data, handleCellEdited, tableColumnDef, rowHeight, onGridReady }) {
const gridOptions = {
    columnDefs: tableColumnDef,
    rowSelection: 'single',
    rowHeight,
    onCellValueChanged(params) {
        handleCellEdited(params);
    },
};

return (
    // 外层div补充宽度、定位、溢出规则
    <div 
        className="ag-theme-material" 
        style={{ width: '100%', position: 'relative', overflow: 'hidden' }}
    >
        <AgGridReact
            gridOptions={gridOptions}
            rowData={data}
            onGridReady={onGridReady}
            onRowClicked={current => handleRowSelection(current)}
            suppressCellSelection
            suppressNoRowsOverlay
            rowDragManaged
            animateRows
        />
    </div>
);
}

修改完成后拖拽行宽度会自动和表格宽度对齐，不会再出现溢出问题。

内容的提问来源于stack exchange，提问作者Preben Tjemsland