[SalesForce] How to add a title on hover of a text data cell in an LWC datatable

It seems that the LWC datatable does not just provide title attributes for cell values. I have a cell that will usually have information that is truncated. Currently a user can only see everything in it by doing the wrap text option for the column, but I want them to be able to just hover over the text and see the information without having to click wrap text every time.

Surely, surely Salesforce has some way to add a title to simple text data cells? I have not been able to find any actual documentation on making that happen, though. Is this possible? Does this require a custom column type?

I attempted cellAttributes by doing:
cellAttributes: {title: {fieldName: 'myFieldName}}
but this still did not apply a title.

Best Answer

In order to customize a datatable cell, you should create your own custom cell. You can find the documentation and an example here: https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation (Section Creating Custom Data Types)

It's up to you to implement showing the title when hovering the cell.

Related Solutions

[SalesForce] How to display lable to a url cell in LWC datatable

You have to use typeAttribute object in URL column. I tried to use JS object but couldn't use JS object in typeAttribute in datatable. So, my finding was that your label should be a field in each entry in data list. Try this playground version of your code: https://developer.salesforce.com/docs/component-library/tools/playground/vi7rAWnIH/20/edit

Issue with your version of code which is rendering label as target is there is no value attribute in typeAttribute object. It's correct name is target. Screenshot from lightning-datatable documentation:

Codet snippet in case playground is not available:

JS data array:

const data =  [{createdDate : "1479944705000" , duplicateWebsite : "www.google.com", websiteLabel:"google", personDetailMatch : true }];

datatable column definition:

const columns = [
    { label: 'Date', fieldName: 'createdDate' , type: 'date-local',typeAttributes :{ month: "2-digit",day: "2-digit"}},
    { label: 'Duplicate Website', fieldName: 'duplicateWebsite', type: 'url' , typeAttributes:{label: { fieldName: 'websiteLabel' }}},
    { label: 'Person Detail Match', fieldName: 'personDetailMatch', type: 'boolean' } 
];

[SalesForce] Inline editing datatable – show edit button on hover (LWC)

The edit icon visibility depends on various css classes. Here's the standard css in the lightning design system:

.slds-hint-parent .slds-cell-edit:hover .slds-button__icon_edit, .slds-hint-parent .slds-cell-edit:hover .slds-button__icon--edit, .slds-hint-parent .slds-cell-edit:focus .slds-button__icon_edit, .slds-hint-parent .slds-cell-edit:focus .slds-button__icon--edit {
    opacity: 0.5;
}

So if you want to use this, you have to add the slds-hint-parent class to the table row. Then, you'll have to add the slds-button__icon_edit class to the icon inside the button using the icon-class property of the lightning-button-icon component. You can use the below code:

<tr class="slds-hint-parent">
  <td aria-selected="true" class="slds-cell-edit" role="gridcell">
    <span class="slds-grid slds-grid_align-spread">
        <span class="slds-truncate" title={row.objectName}>{row.objectName}</span>
        <lightning-button-icon icon-name="utility:edit" icon-class="slds-button__icon_edit" variant="bare" class="slds-cell-edit__button slds-m-left_x-small" onclick={showEditPopover}></lightning-button-icon>
    </span>
  </td>
</tr>

Best Answer

Related Solutions

[SalesForce] How to display lable to a url cell in LWC datatable

[SalesForce] Inline editing datatable – show edit button on hover (LWC)

Related Topic