*).

html

<template>

<!-- lightning button for open modal window -->

<!--Use template if:true to display/hide popup based on isModalOpen value-->

<div class="slds-grid slds-wrap">

<div class="slds-col slds-size_4-of-12 slds-m-bottom--medium">

<lightning-Input type="search" placeholder="Search..." value={accountName}

name="accountName" class="accountName" onchange={handleChangeAccName}></lightning-
input>

</div>

<div class="slds-col slds-size_6-of-12 slds-m-top--medium" style="margin-top: 19px; margin-

left: 10px;">

<lightning-button label="Search Account Name" size="small" variant="brand"

onclick={handleAccountSearch} icon-name="utility:search" icon-position="right"></lightning-
button>

</div>

</div>

<template if:true={contacts.data}>

<lightning-datatable

key-field="Id"

data={contacts.data}

columns={columns1}

>

</lightning-datatable>

</template>

<lightning-card title="Account Records" icon-name="custom:custom63">

<div class="slds-m-around_medium">

<template if:true={Accounts.data}>

<lightning-datatable

key-field="Id"

data={Accounts.data}

columns={columns}
 onrowaction={openModal}

>

</lightning-datatable>

</template>

</div>

</lightning-card>

<template if:true={isModalOpen}>

<!-- Modal/Popup Box LWC starts here -->

<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"

aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">

<div class="slds-modal__container">

<!-- Modal/Popup Box LWC header here -->

<header class="slds-modal__header">

<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"

title="Close" onclick={closeModal}>

<lightning-icon icon-name="utility:close"

alternative-text="close"

variant="inverse"

size="small" ></lightning-icon>

<span class="slds-assistive-text">Close</span>

</button>

<h2 id="modal-heading-01" class="slds-text-heading_medium slds-

hyphenate">Modal/PopUp Box header LWC</h2>

</header>

<!-- Modal/Popup Box LWC body starts here -->

<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">

<template if:true={getAllAccounts.data}>

<lightning-datatable

key-field="Id"

data={getAllAccounts.data}

columns={columns1}

>
 </lightning-datatable>

</template>

</div>

<!-- <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">

<p><b>Modals/Popup Box are used to display content in a layer above the app.

</b></p>

<p><b>This paradigm is used in cases such as the creation or editing of a record, as well
as various types of messaging and wizards.

</b></p>

</div>-->

<!-- Modal/Popup Box LWC footer starts here -->

<footer class="slds-modal__footer">

<button class="slds-button slds-button_neutral" onclick={closeModal}

title="Cancel">Cancel</button>

<button class="slds-button slds-button_brand" onclick={submitDetails}

title="OK">OK</button>

</footer>

</div>

</section>

<div class="slds-backdrop slds-backdrop_open"></div>

</template>

<!-- <c-paginator onprevious={previousHandler2} onnext={nextHandler2}

onselected={changeHandler2} onfirstpage={firstpagehandler} onlastpage={lastpagehandler}></c-
paginator>-->

</template>

*).js

import { LightningElement, wire, track, api } from 'lwc';

import getAccountList from '@salesforce/apex/dspyAccounts.getAccountList';

import getNext from '@salesforce/apex/dspyAccounts.getNext';

import getPrevious from '@salesforce/apex/dspyAccounts.getPrevious';

import TotalRecords from '@salesforce/apex/dspyAccounts.TotalRecords';

import relatedContact from '@salesforce/apex/dspyAccounts.relatedContact';

import retrieveContactData from '@salesforce/apex/dspyAccounts.retrieveContactData';

const COLS = [

{label: 'Account ID', fieldName: 'Id'},

{label: 'Account Name', fieldName: 'Name'},

{label: 'Industry', fieldName: 'Industry'},

{label: 'Rating', fieldName: 'Rating'},

{label: 'Phone', fieldName: 'Phone'},

{type: "button", typeAttributes: {

label: 'View Contact',

name: 'View',

title: 'View',

disabled: false,

value: 'View',

iconPosition: 'left'

}}

];

const COLS1=[{ label: 'Contact Name', fieldName: 'Name', type: 'text'},

{ label: 'Phone', fieldName: 'Phone', type: 'phone'},

{ label: 'Email', fieldName: 'Email', type: 'email'}

];

export default class DisplayAccounts extends LightningElement {

@track columns = COLS;

@track columns1=COLS1;

@track v_Offset=0;

@track v_TotalRecords;

@track page_size = 10;

@api accName;

@track currentAccountName;
@track searchAccountName;

@track isModalOpen = false;

@track recid;

@track results;

@track error;

//@api getAllAccounts;

handleChangeAccName(event){

this.currentAccountName = event.target.value;

handleAccountSearch(){

this.searchAccountName = this.currentAccountName;

openModal(event) {

//this.currentAccountName = event.target.value;

// this.searchAccountName = this.currentAccountName;

this.recid= event.detail.row.Id;

//console.log(recId);

//console.log(event.target.dataset.id);

//console.log(contacts1);

this.isModalOpen = true;

@wire (retrieveContactData,{keySearch:'$searchAccountName'})contacts;

/*@wire (relatedContact,{accountid:'$recid'})contacts1({ error, data }) {

console.log('hello');

console.log(data);

this.results = data;

this.error = error;

}*/

@wire(relatedContact,{accountid:'$recid'}) getAllAccounts;

// wiredAccount({error, data}){
 // if(data){

// this.getAllAccounts = data;

// //this.getAllAccounts.data = data;

// //this.isData = true

// //console.log("Api Data" + this.isData)

// //console.log(this.getAllAccounts)

// console.log('hello world');

// console.log(data);

// }

// if(error){

// console.error(error)

// }

// }

//@wire (retrieveContactData,{keySearch:'$recName'})contacts;

closeModal() {

// to close modal set isModalOpen tarck value as false

this.isModalOpen = false;

submitDetails() {

// to close modal set isModalOpen tarck value as false

//Add your code to call apex method or do some processing

this.isModalOpen = false;

// @wire (retrieveContactData,{keySearch:'$searchAccountName'})contacts;

@wire(getAccountList, { v_Offset: '$v_Offset', v_pagesize: '$page_size' }) Accounts;

//Executes on the page load

/*connectedCallback() {

TotalRecords().then(result=>{
 this.v_TotalRecords = result;

});

previousHandler2(){

getPrevious({v_Offset: this.v_Offset, v_pagesize: this.page_size}).then(result=>{

this.v_Offset = result;

if(this.v_Offset === 0){

// this.template.querySelector('c-paginator').changeView('trueprevious');

}else{

// this.template.querySelector('c-paginator').changeView('falsenext');

});

nextHandler2(){

getNext({v_Offset: this.v_Offset, v_pagesize: this.page_size}).then(result=>{

this.v_Offset = result;

if(this.v_Offset + 10 > this.v_TotalRecords){

// this.template.querySelector('c-paginator').changeView('truenext');

}else{

// this.template.querySelector('c-paginator').changeView('falseprevious');

});

changeHandler2(event){

const det = event.detail;

this.page_size = det;

firstpagehandler(){

this.v_Offset = 0;

// this.template.querySelector('c-paginator').changeView('trueprevious');
 // this.template.querySelector('c-paginator').changeView('falsenext');

lastpagehandler(){

this.v_Offset = this.v_TotalRecords - (this.v_TotalRecords)%(this.page_size);

// this.template.querySelector('c-paginator').changeView('falseprevious');

// this.template.querySelector('c-paginator').changeView('truenext');

}*/

*).cls

public class dspyAccounts {

@AuraEnabled

public static Integer TotalRecords(){

return [Select count() from Account];

@AuraEnabled(cacheable=true)

public static List<Account> getAccountList(Integer v_Offset, Integer v_pagesize){

return [Select Id,Name,Rating,Industry,Phone from Account limit :v_pagesize OFFSET

:v_Offset];

@AuraEnabled(cacheable=true)

public static List<Contact> retrieveContactData(string keySearch){

List<Contact> contactList = [Select Name,Email,Phone From Contact Where

Account.Name=:keySearch];

return contactList;

@AuraEnabled(cacheable=true)

public static List<Contact> relatedContact(Id accountid)

list<Contact> con1= [Select Name,Email,Phone from Contact where AccountId=:accountid];

return con1;
 }

@AuraEnabled(cacheable=true)

public static Integer getNext(Integer v_Offset, Integer v_pagesize){

v_Offset += v_pagesize;

return v_Offset;

@AuraEnabled(cacheable=true)

public static Integer getPrevious(Integer v_Offset, Integer v_pagesize){

v_Offset -= v_pagesize;

return v_Offset;