How can to Implement Tool Tip in Lightning Data Table:
Lightning Data Table:
<lightning:datatable
keyField="Id"
aura:id="dataTable"
data="{! v.data }"
columns="{! v.columns }"
hideCheckboxColumn="true"
showRowNumberColumn="false"
initialRows="{! v.recordsToDisplay}"
sortedBy="{! v.sortedBy }"
sortedDirection="{! v.sortedDirection }"
defaultSortDirection="{!v.defaultSortDirection}"
onsort="{! c.updateColumnSorting}"
onrowaction="{! c.handleRowAction }"
/>
Js side:
component.set('v.columns', [{
label: 'Primary ID',
fieldName: 'PrimaryId__c',
type: 'text',
sortable: true
},
{
label: 'Primary ID Type',
fieldName:'PrimaryIdType__c',
type: 'text',
sortable: true
}
]);
Following columns:
cloumn 1:Primary ID , column 2: Primary ID Type
Showing cell values in the Image:
How to display My Tool tips Like below in Lightning data table Like below:
In tool tip needs to display Like below:
Email : test@test.com (hovering test@test.com- cell1)
NucleusId : 566 (hovering on NucleusId - cell2)
I have refereed this post:
https://success.salesforce.com/ideaView?id=0873A0000003fVOQAY
Best Answer
This is not possible in standard Lightning Data Table as it supports tooltip only for URL type fields.