|
<template> |
|
<div class="slds-p-horizontal_small" style="background: white;padding: 20px;"> |
|
<div class="slds-table_edit_container slds-is-relative"> |
|
|
|
<div class="slds-grid slds-gutters_direct-x-small" style="margin-top: 10px;margin-bottom: 10px;"> |
|
<div class="slds-col slds-size_2-of-12 slds-grid"> |
|
<lightning-input type="text" label="Contact Name" class="contact-name" style="width: 100%;"></lightning-input> |
|
</div> |
|
|
|
<div class="slds-col slds-size_2-of-12 slds-grid"> |
|
<div class="slds-col_bump-left" style="margin-top: 23px;"> |
|
<lightning-button label="Search" onclick={doSearch}></lightning-button> |
|
</div> |
|
</div> |
|
<div class="slds-col slds-size_2-of-12 slds-grid"> |
|
<div class="slds-col_bump-left" style="margin-top: 23px;"> |
|
<lightning-button label="Refresh & Search" onclick={doRefreshSearch} variant="brand"></lightning-button> |
|
</div> |
|
</div> |
|
<div class="slds-col slds-size_2-of-12 slds-grid"> |
|
<div class="slds-col_bump-left" style="margin-top: 23px;"> |
|
<lightning-button label="Flush Cell" onclick={flushCell} variant="destructive"></lightning-button> |
|
</div> |
|
</div> |
|
<div class="slds-col slds-size_2-of-12 slds-grid"> |
|
<div class="slds-col_bump-left" style="margin-top: 23px;"> |
|
<lightning-button label="Flush Block" onclick={flushBlock} variant="destructive"></lightning-button> |
|
</div> |
|
</div> |
|
<div class="slds-col slds-size_2-of-12 slds-grid"> |
|
<div class="slds-col_bump-left" style="margin-top: 23px;"> |
|
<lightning-button label="Flush All" onclick={flushAll} variant="destructive"></lightning-button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<table aria-multiselectable="true" |
|
class="slds-table slds-no-cell-focus slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols" |
|
role="grid" style="width: 100%;"> |
|
<thead> |
|
<tr class="slds-line-height_reset"> |
|
<th class="slds-is-resizable slds-is-sortable"> |
|
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate"> |
|
<div class="slds-truncate slds-p-right_xx-small">Name</div> |
|
</div> |
|
</th> |
|
<th class="slds-is-resizable slds-is-sortable"> |
|
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate"> |
|
<div class="slds-truncate slds-p-right_xx-small">Phone</div> |
|
</div> |
|
</th> |
|
<th class="slds-is-resizable slds-is-sortable"> |
|
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate"> |
|
<div class="slds-truncate slds-p-right_xx-small">Email</div> |
|
</div> |
|
</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
<template for:each={contacts} for:item='con'> |
|
<tr key={con.Id}> |
|
<td role="gridcell" style="white-space: normal;word-break: break-all;"> |
|
{con.Name} |
|
</td> |
|
<td role="gridcell" style="white-space: normal;word-break: break-all;"> |
|
{con.Phone} |
|
</td> |
|
<td role="gridcell" style="white-space: normal;word-break: break-all;"> |
|
{con.Email} |
|
</td> |
|
</tr> |
|
</template> |
|
</tbody> |
|
</table> |
|
|
|
</div> |
|
</div> |
|
</template> |