How do I make the row height adaptively increase according to the content

[silenceQdx]

Suppose I have a long cell content in a row, and I want to display it completely. After setting "autoWrapText: true", you can automatically wrap, but in this column, the content of some cells is very long, and the content of other cells is very short. How to set the automatically adjusted row height? Instead of letting the row height always be the value of'defaultRowHeight'

[ota-meshi]

Thank you for posting this issue.

The height of this grid cannot be changed automatically at this time.
Also, it can be difficult to add this feature that allows us to change the height automatically, as it can be computationally expensive to identify the row from the scroll position.

[silenceQdx]

Thank you very much for your answer! The following translation may have some errors. Hope to get your understanding

Cheetah grid is currently the best choice. I am a Java programmer. While reading the source code, I am learning the necessary typeScript syntax. Maybe my question is not professional.
I tried the following api-based methods (of course, this is only suitable for my own situation):
1. I try to modify the rowHeightsMap according to the number of rows of specific content, and modify the row height at the cost of performance. Although the display problem of multi-line content was initially solved, I encountered a new problem. Since the display of multi-line content needs to specify columnType:'multilinetext', after specifying it, I will no longer be able to use'column Action'. So I tried another method
2. I noticed the rowSpan attribute in "Layout". I tried to modify the rowSpan of the column to receive "functions". This method is more difficult than the first method. Although I can use "Column Operations", I can't find a way to evenly write content in different rows in a cell, so it fails.
I want to ask which of the above two methods is the most likely,
In addition, I would like to ask how to debug locally. All previous attempts were obtained after "build"
"CheetahGrid.es5.js"
"CheetahGrid.js"
"Index.d.ts"
After replacing these three files, and then check the effect of the example, how should I perform local debugging to reduce the time spent on repeated "build", thank you again

[dhenson02]

Old post but responding for people coming later

tl;dr - dynamic row height changes throughout a grid is poor design and expensive to compute.

here are some suggestions:

• an overflow: scroll on the cells in CSS
• use a CSS ellipsis on the extra text to truncate and add a tooltip on the element for hover
• add a small icon next to the truncated text to click and launch a small view somewhere (dialog/modal, or expand that cell manually in-place) on click containing the rest of the text
• or find another design pattern to use

A grid is, by nature, expected to maintain its dimensions consistently throughout (whether that is per column, per row, or even per cell). To expect one of these to be dynamic, especially while actively navigating the data, means you will have large patches of excess, irregular space inside the cells spanning a particular row.
For instance:

• 4 columns in a grid, most rows stay 1 unit tall. You scroll down and find a row with cells of different text amounts
• col 1 has 3 lines
• col 2 has 24 lines
• col 3 has 1 line
• col 4 has 5 lines
• If the cells are justified and centered, reading the text will be uncomfortable and hard to find what you are looking for
• If the cells are aligned together (at the top or bottom of the cells) there could be vast amounts of whitespace
• no matter what you'll be displacing other content the user may want to find