如何在ag-grid中拆分逗号分隔文本换行并设置行自动高度？

1. 拆分逗号分隔值并换行显示 #

修改列配置，通过cellRenderer把逗号加空格分隔的内容替换成换行标签<br>，就能让单元格内的内容自动换行：

export const columns = [
    {
        field: 'apple',
        headerName: 'Apple Number',
        headerTooltip: 'Apple Number',
        cellRenderer: (params) => {
            if (!params.value) return '';
            // 按", "拆分后用<br>拼接，实现换行
            return params.value.split(', ').join('<br>');
        },
        // 可选：设置单元格样式确保换行生效
        cellStyle: { whiteSpace: 'pre-line' }
    }
];

2. 设置行自动调整高度 #

有两种常用方式实现行高随内容自动适配：

方式一：使用domLayout: 'autoHeight'

在AG-Grid的配置对象中添加domLayout: 'autoHeight'，Grid会自动根据内容高度调整行高，适合简单场景：

const gridOptions = {
    columns: columns,
    rowData: yourRowData,
    domLayout: 'autoHeight',
    // 其他配置...
};

方式二：自定义行高计算（更灵活）

如果需要精准控制行高，可以通过getRowHeight函数根据内容行数动态计算：

const gridOptions = {
    columns: columns,
    rowData: yourRowData,
    getRowHeight: (params) => {
        // 计算内容的行数，默认至少1行
        const lineCount = params.data.apple ? params.data.apple.split(', ').length : 1;
        // 每行高度设为24px（可根据字体大小调整），加上上下内边距
        return lineCount * 24;
    },
    // 确保所有单元格内容能换行
    defaultColDef: {
        cellStyle: { whiteSpace: 'pre-line' }
    },
    // 其他配置...
};

内容的提问来源于stack exchange，提问作者KARTHIKEYAN.A