У меня такой высокий ряд
и мне удалось отобразить это вот так
Я также хочу, чтобы это отображалось как на первой картинке после нажатия точек. Для этого я создал настраиваемый рендерер ячеек, который изменяет внутреннее HTML-содержимое ячейки. И моя проблема в том, что после изменения содержимого на длинную строку такая же высота, поэтому я не вижу полный текст. Есть ли способ перерисовать строки или всю таблицу.
вам нужно установить эти два свойства в расширяемом столбце.
wrapText: true,
autoHeight: true,
если такое поведение необходимо для всех столбцов или вы не уверены, что лучше определить их в
defaultColDef: {
....
flex: 1,
minWidth: 110,
editable: true,
resizable: true,
wrapText: true,
autoHeight: true,
...
},
затем вызовите resetRowHeights(); на cellValueChanged событии.
onCellValueChanged : function(params){ params.api.resetRowHeights();}
Вам не нужно настраивать средство визуализации ячеек, если вы просто хотите отображать длинный текст. Единственное, что вам нужно сделать, это добавить 2 свойства ниже в свой ColDef
{
...
autoHeight: true,
cellStyle: { "white-space": "normal" }
},
Но поскольку эти свойства применяются только к столбцам с длинным текстом, вы можете извлечь его в именованный тип столбца, чтобы его можно было повторно использовать.
const columnTypes = {
longText: {
width: 300,
autoHeight: true,
cellStyle: { "white-space": "normal" }
}
};
const columnDefs = [
{
headerName: "Content",
field: "content",
type: "longText"
},
{
headerName: "Description",
field: "description",
type: "longText"
},
]
И передайте эти реквизиты в свой метод рендеринга
<AgGridReact
columnDefs={columnDefs}
columnTypes={columnTypes}
...
/>
Чтобы указать AgGrid обновить высоту определенной строки, например, после изменения содержимого, вы можете использовать RowNode.setRowHeight(null)
onCellValueChanged={(e) => {
e.node.setRowHeight(null);
gridApi.onRowHeightChanged(); // apply row height transaction
}}
