<lightning-card>
        <div class="slds-p-around_medium lgc-bg">
    <lightning-tile type="media">
        <lightning-icon slot="media" icon-name="standard:contact"></lightning-icon>
        <p class="slds-truncate"><b>Contacts({records})</b></p>
        <lightning-button class='slds-float_right' label="New" onclick={handleOpenModal}></lightning-button>
    </lightning-tile>
</div>

        <table class="slds-table slds-table_cell-buffer slds-table_bordered">
        <thead>
            <tr class="slds-line-height_reset">
            <th class="" scope="col">
                <div class="slds-truncate" title="#"></div>
                </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="CheckBox"></div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Account Name">FirstName</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Phone">LastName</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="ParentId">Account</div>
            </th>
            </tr>
        </thead>
        <tbody>
            <template for:each={data} for:item="item" for:index="index">
            <tr class="slds-hint-parent" key={item.index}>
            <td data-label="CheckBox" >
                <lightning-input type="checkbox" data-index={index} data-value={item.Id} name={item.Id} 
                 onchange={handleCheckbox} checked={item.isChecked} access-key={item.Id} ></lightning-input>
            </td>
            <td data-label="Account Name">
                {item.FirstName}
            </td>
            <td data-label="Phone">
                {item.LastName}
            </td>
            <td data-label="ParentId">
                {item.Account.Name}
            </td>
            </tr>
            </template>
        </tbody>
        </table>


    <template if:true={newCreate}>
        <div class="slds-box slds-theme_shade">  
        <div class="slds-modal slds-fade-in-open slds-backdrop">  
        <div class="slds-modal__container">  
        <!--HEADER Section-->  
        <div class="slds-modal__header">  
        <lightning-button-icon icon-name="utility:close" alternative-text="Close this window" size="large" variant="bare-inverse" onclick={closeModal} class="slds-modal__close"></lightning-button-icon>
        <h2> Create Bulk Accounts..</h2> 
        </div>  
        <!---Body Section--> 
        <div class='container'>
    <template for:each={itemList} for:item="item" for:index="index">
        <lightning-record-edit-form key={item.id} object-api-name="Contact">
            <div >
                <lightning-layout>
                    <lightning-layout-item padding="around-small" size="3">
                        <lightning-input-field field-name="FirstName"></lightning-input-field>
                    </lightning-layout-item>
                    <lightning-layout-item padding="around-small" size="3">
                        <lightning-input-field field-name="LastName"></lightning-input-field>
                    </lightning-layout-item>
                    <lightning-layout-item padding="around-small" size="3">
                        <lightning-input-field field-name="AccountId" value={AccountId}></lightning-input-field>
                    </lightning-layout-item>
                    <lightning-layout-item padding="around-small" size="3">
                        <div class="box1 slds-p-top_large">
                           
                                <lightning-button class='slds-m-right_small slds-m-top_small' access-key={item.id} data-index={index} icon-name="action:new" onclick={addRow} disabled={disableAdd}></lightning-button>
                           
                                <lightning-button icon-name="action:delete" data-index={index} access-key={item.id}
                                onclick={removeRow} disabled={disableDelete}></lightning-button>
                        </div>  
                    </lightning-layout-item>
                </lightning-layout>
               
            </div>
        </lightning-record-edit-form>
    </template>
            </div> 
            <!--Footer Section-->
            <div class="slds-modal__footer">            
                    <lightning-button label='Cancel' onclick={closeModal} class='slds-m-around_medium'></lightning-button>
                    <lightning-button label="Save" type='submit' variant="brand" onclick={handleSubmit} ></lightning-button>
            </div>
            </div>  
            </div>  
            </div>  
    </template>
        </lightning-card>



-------------------------------------------
JS

import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { refreshApex } from '@salesforce/apex';
import ContacttList from '@salesforce/apex/ContactQuery.ContacttList';

 @api recordId;

    newCreate = false;
    records = ''; 
    data;
    error;
    wiredActivities;
    keyIndex = 0;
    AccountId;
    @track itemList = [
        {
            id: 0,
            
            
        }
    ];

    @wire(ContacttList,{
        AccId: '$recordId'
    })
    wiredclass(value){
        this.wiredActivities = value;
        const { data, error } = value;
    if(data){
        let dataEditing = JSON.parse(JSON.stringify(data));
        this.records = dataEditing.length;

        
        this.data = dataEditing;
        }else if(error){
        this.error = error;
        }
    }
    handleOpenModal(){
        this.newCreate= true;
    
        this.AccountId = this.recordId;
    }
    closeModal(){
        this.newCreate = false;
    }

    addRow(event) {
        let currentIndex = event.target.dataset.index;
        this.keyIndex++;
        this.itemList[currentIndex].showAddIcon = false;
        var newItem = [{ id: this.keyIndex }];
        this.itemList = this.itemList.concat(newItem);
    
    }

    removeRow(event) {

        
        if (this.itemList.length >= 2) {
            this.itemList = this.itemList.filter(function (element) {
                return parseInt(element.id) !== parseInt(event.target.accessKey);
            });
        }
        
    }

    @api 
    handleSubmit() {
        var isVal = true;
        this.template.querySelectorAll('lightning-input-field').forEach(element => {
            isVal = isVal && element.reportValidity();
            
        })
        if (isVal) {
            this.template.querySelectorAll('lightning-record-edit-form').forEach(element => {
                element.submit();
                
            });
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'successfully created',
                    variant: 'success',
                }),
                
            );
            this.newCreate = false;
            if(this.newCreate == false){
                this.itemList.length = 1;
    
              
            }
            return refreshApex(this.wiredActivities); 
        
        } else {
        
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error creating record',
                    message: 'Please enter all the required fields',
                    variant: 'error',
                }),
            );
        }
    }


----------------------------------------------
CSS

.lgc-bg {
    background-color: rgb(242, 242, 242);
}

.lgc-bg-inverse {
    background-color: rgb(22, 50, 92);
}
.slds-modal__container {
    
    max-width: 70rem !important;
    width: 70% !important;
}
.container{
    max-height: 400px;
    overflow-y: auto;
    background-color: white;
}
.box1{
    padding-left: 20px;
    width:100%;
}

----------------------------------------------
Apex

public class ContactQuery {
@AuraEnabled( cacheable = true )
    public static list<Contact> ContacttList(String AccId){
        list<Contact> lstAcc=[Select Id,FirstName,LastName,Account.Name from Contact Where AccountId = :AccId];
        return lstAcc;
    }
}