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?

  • 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 '19 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 '19 at 14:35
  • You have to click inline edit in the variant section. – Tyler Dahle Oct 30 '19 at 14:38
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 | |
  • Yes! This worked great. Thank you! – Tyler Dahle Oct 30 '19 at 14:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.