Lightning-datatable – cellAttributes

lightning-datatablelightning-web-components

I am using a lightning-datatable. I have a description field for one of my columns that I would like to better display the text. I would like to either be able to have 3 lines for this field if the data needs it. I tried to use wrapText: true but that just bleeds the text into the next field. I tried looking for a full list of column cellAttributes without success. How can I display the Description field so it shows multiple lines if needed?

    const cols = [
    { label: 'Status', fieldName: 'Status__c', sortable: "true", initialWidth: 90},
    { label: 'Number', fieldName: 'Group_Number__c', type: 'text', sortable: "true", initialWidth: 125 },
    { label: 'Eff Date', fieldName: 'Effective_Date__c', type: 'date-local', sortable: "true", initialWidth: 10},
    { label: 'Description', fieldName: 'Description__c', type: 'longtext', sortable: "true",  initialWidth: 520, editable: true, wrapText: false},
    {label: 'Actions', type: 'action', fixedWidth: 70, fixedHeight: 90,
        typeAttributes: {
            rowActions: actions,
           // menuAlignment: 'right'
        }
    }
];

Best Answer

You need to set number of visible lines as data-table attribute wrap-text-max-lines. Like this.

<lightning-datatable
                key-field="id"
                data={data}
                columns={columns}
                wrap-text-max-lines=3>
</lightning-datatable>

Related Solutions

[SalesForce] lightning-datatable row number error

Just figured it out myself. I didn't have show-row-number-column in the html. Now it works fine. But, that brings up a different question... what if I didn't want to show row numbers. The docs suggest that I would just leave show-row-number-column out of the markup and then they won't show. But I didn't have it in the markup before and they displayed.

Updated markup:

<lightning-datatable
    key-field="id"
    data={responses}
    columns={columns}
    onsort={handleSort}
    sorted-by={sortedBy}
    sorted-direction={sortedDirection}
    onrowaction={handleRowAction}
    show-row-number-column
    enable-infinite-loading
    onloadmore={handleLoadMore}>
</lightning-datatable>

BTW, there's a lot more info in the dev guide here that isn't detailed in the reference materials. In particular, how to handle draftValues, which is necessary to get the Cancel/Save buttons to disappear after an inline edit.

[SalesForce] refresh lightning-datatable after save

The way you have it built you would need to update your success handler to refetch records after they have been updated.

.html

<lightning-record-edit-form onsuccess={handleSuccess}>

.js

connectedCallback() {
    this.fetchStaffingAssignments();
}

handleSuccess() {
    this.resetStaffingSelection();
    this.fetchStaffingAssignments();
}

fetchStaffingAssignments(){

    getStaffingAssignmentByParentId({parentId: this.recordId})
    .then(result => {
        console.log(JSON.stringify(result));
        let rows = result;
        let rowBuilder = [];
        for (let i = 0; i < rows.length; i++) {
            let row = rows[i];
            //Datatable can't handle related fields, so flatten the data
            if (row.User__r) {
                if (row.User__r.Name) {
                    //Add the User Name to the first level of the row
                    let pair = {UserName: row.User__r.Name};
                    row = {...row, ...pair};
                }
            }
            rowBuilder.push(row);
        }

        this.datatableStaffingAssignments = rowBuilder;
        this.gotData = true;
        this.error = undefined;
    })
    .catch(error => {
        //this.error = reduceErrors(error).join(', ');
        this.record = undefined;
    });

}

Related Topic