Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sample slds table with popover of related record
<template>
<div>
<template if:true={ranger} >
<lightning-record-view-form
record-id={ranger}
object-api-name="Contact">
<div class="potato slds-box" style={boxClass}>
<lightning-output-field field-name="Name">
</lightning-output-field>
<lightning-output-field field-name="Email">
</lightning-output-field>
</div>
</lightning-record-view-form>
</template>
</div>
</template>
import { LightningElement, api, track } from 'lwc';
export default class BoxPopover extends LightningElement {
@track ranger;
@track top = 50;
@track left = 50;
@api
get myranger(){
return this.ranger;
}
set myranger(value) {
this.ranger = value;
}
@api
get topmargin(){
return this.top;
}
set topmargin(value) {
this.top = value;
}
@api
get leftmargin(){
return this.left;
}
set leftmargin(value) {
this.left = value;
}
get boxClass() {
return `background-color:white; top:${this.top - 280}px; left:${this.left}px`;
}
}
<template>
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<tr class="slds-line-height_reset">
<th class="slds-cell-buffer_right" scope="col">
<div class="slds-truncate" title="Bear Name">Name</div>
</th>
<th class="slds-cell-buffer_right" scope="col">
<div class="slds-truncate" title="Bear Age">Age</div>
</th>
<th class="slds-cell-buffer_right" scope="col">
<div class="slds-truncate" title="Bear Birthday">Birthday</div>
</th>
<th class="slds-cell-buffer_right" scope="col">
<div class="slds-truncate" title="Bear Height">Height</div>
</th>
<th class="slds-cell-buffer_right" scope="col">
<div class="slds-truncate" title="Bear Sex">Sex</div>
</th>
<th class="slds-cell-buffer_right" scope="col">
<div class="slds-truncate" title="Bear Weight">Weight</div>
</th>
</tr>
</thead>
<tbody>
<template if:true={bears.data}>
<div class="slds-m-around_medium">
<template for:each={bears.data} for:item="bear" for:index="index">
<tr class={assignClass} key={bear.Id} data-rangerid={bear.Supervisor__c} onmouseout={hideData} onmouseover={showData}>
<td data-label="Bear Name" class="slds-cell-buffer_right">
<div class=slds-truncate title="Bear Name">{bear.Name}</div>
</td>
<td data-label="Bear Age" class="slds-cell-buffer_right">
<div class="slds-truncate" title="Bear Age">{bear.Age__c}</div>
</td>
<td data-label="Bear Birthday" class="slds-cell-buffer_right">
<div class="slds-truncate" title="Bear Birthday">{bear.Birthday__c}</div>
</td>
<td data-label="Bear Height" class="slds-cell-buffer_right">
<div class="slds-truncate" title="Bear Height">{bear.Height__c}</div>
</td>
<td data-label="Bear Sex" class="slds-cell-buffer_right">
<div class="slds-truncate" title="Bear Sex">{bear.Sex__c}</div>
</td>
<td data-label="Bear Weight" class="slds-cell-buffer_right">
<div class="slds-truncate" title="Bear Weight">{bear.Weight__c}</div>
</td>
</tr>
</template>
</div>
</template>
</tbody>
</table>
<c-box-popover topmargin={top} leftmarginn={left} myranger={ranger}></c-box-popover>
</template>
import { LightningElement, track, wire, track } from 'lwc';
import searchBears from '@salesforce/apex/BearController.searchBears';
export default class SelectPicklist extends LightningElement() {
@track searchTerm = '';
@track bears;
@track ranger;
@track left;
@track top;
@wire(searchBears, {searchTerm: '$searchTerm'})
loadBears(result) {
this.bears = result;
}
showData(event){
this.ranger = event.currentTarget.dataset.rangerid;
this.left = event.clientX;
this.top=event.clientY;
}
hideData(event){
this.ranger = "";
}
get assignClass() {
return this.active ? '' : 'slds-hint-parent';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.