1

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?

Improve this question
3
  • Hi @TylerDahle, unfortunately there is no "magic" css classes to add. You have to write your own Javascript logic to make the popup appear.
    – Martin Lezer
    Oct 30, 2019 at 14:32
  • I know javascript will be needed for the popup for inline editing, but I am wondering if it is possible to get the edit button to show on cell hover without needing custom javascript through css classes or some such. The example I linked has no functionality as it all needs the javascript still, but the edit button still shows up on hover making me think that is managed by css classes. Wondering if it can be translated to lwc's
    – Tyler Dahle
    Oct 30, 2019 at 14:35
  • You have to click inline edit in the variant section.
    – Tyler Dahle
    Oct 30, 2019 at 14:38

1 Answer 1

Reset to default
2

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>
Improve this answer
1
  • Yes! This worked great. Thank you!
    – Tyler Dahle
    Oct 30, 2019 at 14:53

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .