2

I want to use lightning:datatable component to display list of records where the first column is the URL with label and tooltip consisting of record name and value directing to record URL in format /{Id}.

If I don't use lightning:datatable, it is quite simple

<table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
    <thead>
    <tr class="slds-text-heading--label">
        <th scope="col"><div class="slds-truncate" title="Name">Name</div>
        </th>
    </tr>
    </thead>
    <tbody>
    <aura:iteration items="{!v.records}" var="record">
        <tr>
            <td><div class="slds-truncate" title="{!record.Name}"><a href="{!'/' + record.Id}">{!record.Name}</a></div></td>
        </tr>
    </aura:iteration>
    </tbody>
</table>

However, using lightning:datatable it seems to be impossible, even though Lightning Datatable supports label customization, it doesn't support tooltip customization in the current Spring'18 release.

Actually Lightning Datatable documentation suggests that it uses lightning:formattedUrl component to format URL and Lightning Formatted URL component documentation suggests that this component supports both title and tooltip attributes

  • title String Displays tooltip text when the mouse moves over the element.
  • tooltip String The text to display when the mouse hovers over the link.

However, these two attributes are not passed from Datatable, so even though I have tried this JSON

{
  'type': 'url',
  'typeAttributes': {
    'label': {
      'fieldName': 'Name'
    },
    'tooltip': {
      'fieldName': 'Name'
    },
    'title': {
      'fieldName': 'Name'
    }
  }
}

it doesn't really work since Lightning supports only label and target attributes. Is there are other hacks or workarounds to get this functionality done with Lightning Datatable?

2

Tooltip customization is available in Winter '19 release. As per the documents:

This attribute for the URL type column property is new. tooltip — Displays a tooltip for a URL in the datatable column. Use the typeAttributes property to pass the tooltip for the URL.

Eg: For assigning a particular field name to a tooltip

tooltip: {
    fieldName: attributeFieldName
}

Or for assigning a normal text to a tooltip

tooltip:'Normal text'

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.