AG-Grid - 如何在我的单元格数据中插入换行符

Question

我是 AG-Grid 的新手，如果这是一个愚蠢的问题，请原谅我。我们在 Angular 5 应用程序中使用 Ag-Grid 的 OSS 版本。我有一个专栏，我将两组汇总数据组合在一起并显示它们。我想在两段文字之间换行。

现在它正在这样做：

《总结一总结二》

我希望它这样做：

《总结一
总结二》

到目前为止，我已经尝试过 HTML 中断标记，\r\n 和 \n 并且没有任何效果。这是可能的吗？

谢谢，詹姆斯

Answer 1

您可以使用它cellRenderer来实现这一点。

看看下面colDef。

{
  headerName: "Custom column", 
  cellRenderer: function(param){
    return param.data.col1 + '<br/>' + param.data.col2;
  }
}

您可能需要设置rowHeight的gridOptions为好。

现场示例：Plunk

Answer 2

我有一个更简单的解决方案，没有单元格渲染器。顺便说一句，我正在使用 ag-theme-balham 主题。只需将 cellStyle 设置为空白前，您就可以使用 \n 插入新行。

columnDefs()
...
   valueGetter: ({ data }) => 'first value\nsecond value',
   cellStyle: { 'white-space': 'pre' }