【Ag Grid】常用的Ag Grid表格配置(换行，排序等)

【Ag Grid】常用的Ag Grid表格配置(换行，排序等)

如下：

    defaultColDef: {
        width: 80,
        resizable: true,
        sortable: true, // 关键配置：启用排序
        suppressMenu: false, // 允许显示列菜单（包含筛选选项）
        headerClass: 'row-header',
        editable: true,
        filter: true, // 启用筛选功能
        filterParams: {
            // 可选：配置筛选器参数（例如默认筛选类型）
            filter: 'agTextColumnFilter',
            suppressAndOrCondition: true
        },
        cellRenderer: 'showCellRenderer', //显示数据处理
        cellClass: "wrap-text",
        cellStyle: { display: "flex", alignItems: "center" },
        autoHeight: true, // 自动调整行高
    },

效果：

PS：以上自动换行对于全是数字的时候不适用，需要特殊处理

以下为AI解答：

AG Grid 默认情况下，连续的数字/字母不会自动换行，因为它们被视为 "不间断内容"。解决方法：

方案 1：强制换行（CSS）

/* 在你的 CSS 文件中 */
.wrap-text {
    white-space: normal !important;
    word-break: break-all !important; /* 强制所有内容（包括数字）换行 */
}

确保 cellClass: "wrap-text" 已应用。

方案 2：使用自定义 Cell Renderer
如果 CSS 方案无效，可以添加一个自定义渲染器，在数字之间插入 \n 或 <br>。

// 注册自定义渲染器
cellRenderer: (params) => {
    return params.value.toString().replace(/(\d)/g, '\$1\u200B'); // 插入零宽空格
}

或者直接返回 HTML 换行：

cellRenderer: (params) => {
    return `<div style="white-space: normal;">${params.value}</div>`;
}

方案 3：修改默认列定义
如果仍然不行，可以尝试在列定义中强制设置 wrapText：

defaultColDef: {
    ...
    autoHeight: true,
    wrapText: true, // 强制换行
    cellStyle: { 
        "white-space": "normal", 
        "word-break": "break-all" 
    }
}

总结
推荐优先使用 CSS 方案，添加以下样式即可让数字自动换行：

.wrap-text {
    white-space: normal !important;
    word-break: break-all !important;
}

如果仍然无效，可尝试自定义渲染器或 wrapText: true。