使用自定义 cellRenderer 时，Ag Grid autoHeight 和 wrapText 不起作用

Question

我正在尝试wrap the text 。 根据文档设置autoHeight=true和wrapText=true在没有cellRenderer组件的情况下工作正常。 但是当使用cellRendererFramework React component, seems not working 。 我试图在自定义单元格渲染器中设置样式也不起作用。 任何帮助将不胜感激！

AgGrid 组件如下，

<AgGridReact
    {...configs}
    onGridReady={onGridReady}
    masterDetail={true}
    suppressContextMenu
    detailCellRenderer='agCustomDetailTimelineRenderer'
    detailRowHeight={140}
    frameworkComponents={{
        agCustomRenderer: CustomRenderer,
    }}>
    {configs.columnDefs.map((columnDef) => (
        <AgGridColumn {...columnDef} />
    ))}
</AgGridReact>

默认列定义是，

defaultColDef: {
    sortable: true,
    filter: true,
    wrapText: true,
    autoHeight: true,
    menuTabs: ['filterMenuTab']
}

我的自定义 React 组件是，

import React from 'react';

const CustomRenderer = (props) => {
  return (
    <div
      style={{ height: '100%', whiteSpace: 'normal', wordBreak: 'break-all' }}>
      {props.value}
    </div>
  );
};

export default CustomRenderer;

Answer 1

对我来说，它在添加固定宽度时开始工作，在将以下三个属性添加到 columnDef 之后它开始为我工作

wrapText: true,
autoHieght: true,
width: 120