Ag-Grid - Row with multiline text

André Luís Oliveira picture André Luís Oliveira · Mar 17, 2016 · Viewed 10.8k times · Source

I'm using Angular Grid (version 1.16.1) and I need to show a long text inside a table and I want that row height would be adjusted by the content, breaking line if necessary.

I've tried:

  • sizeColumnsToFit method, expecting that ag-grid could resize column by its content;

  • setRowStyle method at gridOptions: I've added CSS classes to adjust roe height by the content (e.g: 'word-wrap':'break-word');

  • minWidth and width: I've calculated the average column size but ag-grid didn't respect it;

  • cellStyle at gridOptions: on the same way as "setRowStyle", but CSS classes didn't gave me any success;

Does anyone has another suggestion?

Answer

philoniare picture philoniare · Mar 17, 2016

I have tried it with css with no luck, have you looked into dynamic row height? See an example here: https://www.ag-grid.com/angular-grid-row-height/index.php. It using the length of the text to calculate the height of each row. Here's a snippet from the example:

getRowHeight: function(params) {
    // assuming 50 characters per line, working how how many lines we need
    return 18 * (Math.floor(params.data.latinText.length / 45) + 1);
}