How to wrap cell text properly in datatable in LWC?

Question

I'm struggling with the issue, where cell text in the datatable in LWC isn't wrapping correctly. It obscures the cell from the next column in some cases. I didn't applied any formatting for that table beside the column size.

The table is declared in js file:

const columns2 = [
     {
         label: 'Name',
         fieldName: 'Name',
         initialWidth: 120
     },
    {
        label: 'Type',
        fieldName: 'Type',
        initialWidth: 100
    }]

Do you know maybe how to solve it? Why in some cases it's wrapping correctly and in some not? Looks like the issue is when there is really long one word, but not only. On the above screen both test names are single words(without white spaces etc). First long name is wrapped while the second not and I can't find out why :/

I tried that and it's wrapping but in some cases it's going over cell border, like on the screen which I posted. This is the result of wrap action :/ Thanks in advance guys!

Answer 1

Use wrap=true. like below

const columns2 = [
     {
         label: 'Name',
         fieldName: 'Name',
         initialWidth: 120,wrap:true
     },
    {
        label: 'Type',
        fieldName: 'Type',
        initialWidth: 100,wrap:true
    }]

Answer 2

I'm facing the same issue. Were you able to fix it?

-- Update: May 30th, 2023 I was able to fix it using a static resource and loadStyle function on rendered callback as written in this link: LWC datatable header wrapping hack

I found it in this related question: LWC datatable Header wrapping

So basically, this is my CSS file that I uploaded as a CSS static resource

.slds-table .slds-cell-wrap {
    white-space: pre-line;
    word-break: break-all !important;
}

I'm using a custom LWC that extends the LightningDatatable class in where I import this static resource and load it with the loadStyle function.

The .slds-table & .slds-cell-wrap CSS classes are standard classes assigned when a column uses the property "wrapText: true", so we are overriding the word-break: break-word that wrap text uses by default with the word-break: break-all

JS:

import { loadStyle } from "lightning/platformResourceLoader";
import DatatableWrapText from "@salesforce/resourceUrl/DatatableWrapText";

export default class CustomDatatable extends LightningDatatable {
   renderedCallback() {
        super.renderedCallback();

        if (!this.stylesLoaded) {
            Promise.all([loadStyle(this, DatatableWrapText)])
                .then(() => {
                    console.log("Custom styles loaded");
                    this.stylesLoaded = true;
                })
                .catch((error) => {
                    console.error(error);
                });
        }
    }
}

Answer 3

Need to add another column property called wrapText and set it to true.

wrapText:true

From the documentation

Specifies whether text in a column is wrapped when the table renders. Wrapped text vertically expands a row to reveal its full content. Use with wrap-text-max-lines to display a number of lines before hiding the rest. For more information, see Text Wrapping and Clipping.

const columns2 = [
     {
         label: 'Name',
         fieldName: 'Name',
         wrapText:true
     },