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

My column entries look like this:

<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" variant="bare" class="slds-cell-edit__button slds-m-left_x-small" onclick={showEditPopover}></lightning-button-icon>
    </span>
</td>

And I have slds-table_edit as a class up on my <table> element. This slds datatable example (Click 'Inline Edit' in the Variant section) shows the edit buttons showing up on hover automatically. My assumption is this is some magic that is happening with all the various slds edit type classes in the table.

My attempt at adding slds-cell-edit__button did not work, the buttons just appear there all the time and are dark instead of the light gray in the example. Is it possible to achieve this behavior with the edit button with the css classes so an onMouseOver event doesn't have to be finagled? Or is that example actually doing some mouse over event to show and hide the buttons that is hidden from view?

Best Answer

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>
Related Topic