Hello There, I have lwc app which shows contact records and I can edit it also but my requirement is it should be editable in modal. my code has modal functionality as well but both functionalities working seperately, I need it should be editable in modal.
I know some lines of code (code to edit records )need to be placed inside modal but It's not happening, can anyone pls look into my code.

// html

<template>
    <lightning-card title="Contact details">
       
        <lightning-datatable data={wireContact.data} columns={columns} key-field="id"   onrowaction={handleRowAction} onsave={handleSave}></lightning-datatable>
       
        <template if:true={modalContainer}>
            <section  class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <header class="slds-modal__header">
                       
                        <h2 class="slds-text-heading_medium slds-hyphenate">Contact Record Detail</h2>
                     </header>
                     <div class="slds-modal__content slds-p-around_medium">
                        <table class="slds-table slds-table_bordered slds-table_col-bordered slds-table_cell-buffer">
                           <thead>
                            <tr>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Email Name</th>
                                <th>Phone Name</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{contactRow.FirstName}</td>
                                <td>{contactRow.LastName}</td>
                                <td>{contactRow.Email}</td>
                                <td>{contactRow.Phone}</td>
                            </tr>
                        </tbody>  
                        </table>
                     </div>
                     <footer class="slds-modal__footer">
                        <lightning-button variant="brand" label="Close" title="Close"  onclick={closeModalAction}></lightning-button>
                        <lightning-button variant="brand" label="Save" title="Close"  onclick={handleSave}></lightning-button>
                   </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </template>
        <br/><br/>
   
    </lightning-card>
</template>


--------------------------------------------------
//js code

import { LightningElement, track, wire } from 'lwc';
import getDataFromContact from '@salesforce/apex/LWCExampleController.getDataFromContact';
const columns=[
    {
        label: 'View',
        type: 'button-icon',
        initialWidth: 75,
        typeAttributes: {
            iconName: 'action:preview',
            title: 'Preview',
            variant: 'border-filled',
            alternativeText: 'View'
        }
      },
      {
        label: 'First Name',
        fieldName: 'FirstName'
    },
    {
        label: 'Last Name',
        fieldName: 'LastName'
    },
    {
        label: 'Email',
        fieldName: 'Email'
    },
    {
        label: 'Phone',
        fieldName: 'Phone'
    }
];
export default class LwcDataTableRowAction extends LightningElement {
  @track columns = columns;
  @track contactRow={};
  @track rowOffset = 0;  
  @track modalContainer = false;
   @wire(getDataFromContact) wireContact;
 
   handleRowAction(event){
      const dataRow = event.detail.row;
      window.console.log('dataRow@@ ' + dataRow);
      this.contactRow=dataRow;
      window.console.log('contactRow## ' + dataRow);
      this.modalContainer=true;
   }
   closeModalAction(){
    this.modalContainer=false;
   }
   handleSave(event) {
    this.saveDraftValues = event.detail.draftValues;
    const recordInputs = this.saveDraftValues.slice().map(draft => {
        const fields = Object.assign({}, draft);
        return { fields };
    });
    // Updateing the records using the UiRecordAPi
    const promises = recordInputs.map(recordInput => updateRecord(recordInput));
    Promise.all(promises).then(res => {
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Success',
                message: 'Records Updated Successfully!!',
                variant: 'success'
            })
        );
        this.saveDraftValues = [];
        return this.refresh();
    }).catch(error => {
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Error',
                message: 'An Error Occured!!',
                variant: 'error'
            })
        );
    }).finally(() => {
        this.saveDraftValues = [];
    });
}
}

-------------------------------------------------------
// class code

public with sharing class LWCExampleController {
 
    // Create a lightning-datatable and display modal on rowaction
    @AuraEnabled(cacheable=true)
    public static List<Contact> getDataFromContact(){
      List<Contact> conList = [Select Id, FirstName, LastName, Email, Phone From Contact limit 10];
      try{
         return conList;
      }
      catch(Exception e){
         throw new AuraHandledException(e.getMessage());
      }
    }
}

---------------------------------------------------------------