<template>
    <lightning-card title="Datatable styling in lwc">
     <lightning-button label="New Record" onclick={HandleNewRecord}></lightning-button>
     <lightning-button label="Edit Record" onclick={HandleEditRecord}></lightning-button>
       <!--create new record-->
  <template if:true={newRecord}>
    <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 New Record</h2>  
    </div>  
            <!---Body Section-->  
    <div class="slds-modal__content slds-p-around_medium">  
                <lightning-record-form object-api-name='Account' layout-type="Full" columns="2"
                onsuccess={handleSuccess}>
            </lightning-record-form>
    </div>  
            <!------Footer Section
            <div class="slds-modal__footer">  
              </div>
            -->     
    </div>  
    </div>  
    </div>  
</template>
    </lightning-card>
</template>



import { LightningElement,api,track,wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class TestComponent extends NavigationMixin(LightningElement) {
    newRecord=false;
    @api recordId;
    @api handleSuccess(event){
        var recId = event.detail.id;
        
        var toast = new ShowToastEvent({
            'title': 'Account Created...',
            'message': recId + ' Successfully Created..',
            'variant': 'success'
        });
        this.dispatchEvent(toast);
        this.newRecord = false;
    }
    HandleEditRecord(event) {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.recordId,
                objectApiName: 'Account',
                actionName: 'edit'
            }
        });
    }
    HandleNewRecord(){
        this.newRecord = true;
    }
    closeModal(){
        this.newRecord = false;
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
     <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>