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?