I've been attempting to adjust the formatting of a long cell value by wrapping the text. According to the documentation, setting autoHeight=true and wrapText=true works fine without any cellRenderer components. However, when using a cellRendererFramework with a React component, it doesn't seem to work as expected. I've also tried setting styles inside the custom cell renderer but had no luck. Any assistance on this matter would be greatly appreciated!
The AgGrid component code is shown below:
<AgGridReact
{...configs}
onGridReady={onGridReady}
masterDetail={true}
suppressContextMenu
detailCellRenderer='agCustomDetailTimelineRenderer'
detailRowHeight={140}
frameworkComponents={{
agCustomRenderer: CustomRenderer,
}}>
{configs.columnDefs.map((columnDef) => (
<AgGridColumn {...columnDef} />
))}
</AgGridReact>
The default column definition is:
defaultColDef: {
sortable: true,
filter: true,
wrapText: true,
autoHeight: true,
menuTabs: ['filterMenuTab']
}
Here's my custom React component:
import React from 'react';
const CustomRenderer = (props) => {
return (
<div
style={{ height: '100%', whiteSpace: 'normal', wordBreak: 'break-all' }}>
{props.value}
</div>
);
};
export default CustomRenderer;