Cell does not support automatic text wrapping

[rtcnhat18]

Hi, I want my column automatically wrap text whenever the text is longer than column width. I want the row height to expand according to the text length while maintaining column width. Could you please help with this problem?

[jahanbakhsh18]

Hi @rtcnhat18,
You can solve this problem using the new enableVariableRowHeight option. This feature was added in PR #1235 recently. It allows rows to have different heights, which is perfect for text wrapping.
To use it, set enableVariableRowHeight: true in your grid options. Then, you tell the grid how tall each row should be. There are two main ways, both shown in the example-variable-row-height.html file:

1. Using rowHeightProvider: You write a function that returns a height (in pixels) for each row. If you return undefined, the grid uses the default rowHeight.

const grid = new Slick.Grid('#myGrid', data, columns, {
    rowHeight: 25,
    enableVariableRowHeight: true,
    rowHeightProvider: function(grid, row, item) {
        // Return a specific height for some rows
        if (item.isSpecial) { return 50; }
        // Return undefined to use the default (25px)
        return undefined;
    }
});

2. Using ItemMetadata.height: If you already use metadata for other things (like styles), you can set the height there. The grid will read it automatically when enableVariableRowHeight is true.

data.getItemMetadata = function(row) {
    if (row % 4 === 0) {
        return { height: 60 }; // Make every 4th row taller
    }
    return null;
};

How to Calculate Height Dynamically

Sometimes you want the row height to match the text inside it. The attached code shows one way to do this by using a hidden measurement element.

// 1. Create a hidden element to measure text
const measureEl = document.createElement('div');
measureEl.style.position = 'absolute';
measureEl.style.visibility = 'hidden';
measureEl.style.whiteSpace = 'normal';
measureEl.style.wordWrap = 'break-word';
measureEl.style.padding = '6px';
document.body.appendChild(measureEl);

// 2. Use it to calculate height
function calculateRowHeight(row, item, colWidth) {
    measureEl.style.width = colWidth + 'px';
    measureEl.textContent = item.desc;
    return measureEl.getBoundingClientRect().height;
}

// 3. Use it in the provider
rowHeightProvider: function (grid, row, item) {
    var colWidth = getDescriptionColumnWidth(grid);
    return calculateRowHeight(row, item, colWidth);
}

// 4. Recalculate when columns are resized
grid.onColumnsResized.subscribe(function() {
    grid.invalidateRowHeights();
});

Showcase:

1276.mp4

Why use a hidden element?
You cannot know exactly how tall text will be in the browser. Different fonts, screen sizes, and word wrapping change the height. A hidden element lets you actually render the text and measure its real height.

Limitations to know: simple character-counting methods don't know where words break. This is why a hidden measurement element is better, but it is still not perfect. Also for large datasets, measuring every row can be slow. It is often better to use a rough estimate or only measure rows that are visible.

[6pac]

Thanks @jahanbakhsh18 . You have nailed it, but as you say, fit-to-text is very expensive in the Slickgrid paradigm, since it cannot use natural HTML/CSS flow for row height - it must be retro-fitted. If this is core to your needs @rtcnhat18 , you are honestly probably better off using one of the many HTML based non fixed row height solutuons out there.