Display records in data table and update?

 How can we display records in the Lightning data table and how to update the records using LWC?

updateRecords.html:

<template>

    <div style="height: 800px;">

               <lightning-datatable

                key-field="Id"

                show-row-number-column = false

                data={Datatable}

                hide-checkbox-column = false

                draft-values={draftValues}

                onsave={handleSave}

                columns={columns}>

        </lightning-datatable>

    </div>

    <template if:true={error}>

        {error}

    </template>

</template>

updateRecords.js:

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

import fetchAccounts from '@salesforce/apex/lwcEditSaveRowCtrl.fetchAccounts';

import updateAccounts from '@salesforce/apex/lwcEditSaveRowCtrl.updateAccounts';

import { refreshApex } from '@salesforce/apex';

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class AccountRecord extends LightningElement {

    @track  columns = [

        { label: 'Account Name', fieldName: 'Name' ,type: 'text',editable: true},

        { label: 'Phone', fieldName: 'Phone',type: 'text',editable: true},

    ];

    @track error

    @track Datatable

    draftValues

    _datatableresp

    @wire(fetchAccounts)

    wiredAccount(result) {

        this._datatableresp = result

        if (result.data) {

            this.Datatable = result.data

        } else {

            this.error = result.error

        }

    }

    handleSave(event){

        this.draftValues = event.detail.draftValues;

        alert('draf '+JSON.stringify(this.draftValues))

        updateAccounts({acclist: this.draftValues})

         .then( result => {

            console.log( JSON.stringify( "Apex update result: " + result ) )

            if(result === true){

                this.dispatchEvent(

                    new ShowToastEvent({

                        title: 'Success!!',

                        message: 'successfully Account has been updated',

                        variant: 'success'

                    })

                );

                this.draftValues = []

                return refreshApex(this._datatableresp);

            } else {

                this.dispatchEvent(

                    new ShowToastEvent({

                        title: 'Error!!',

                        message: 'something went wrong please try again',

                        variant: 'error'

                    })

                );

            }

         })

    }

}

updateRecords.meta.xml:

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>56.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__Tab</target>

       

        <target>lightning__RecordPage</target>

     

        <target>lightning__AppPage</target>

     

        <target>lightning__HomePage</target>

     

     </targets>

</LightningComponentBundle>

lwcEditSaveRowCtrl:

public with sharing class lwcEditSaveRowCtrl {

    public lwcEditSaveRowCtrl() {

    }

    @AuraEnabled(cacheable=true)

    public static List<Account> fetchAccounts(){

        try {

System.debug('ANIL++++++++++++++++');

           return[select id,name,industry,phone,type from account limit 10];

        } catch (Exception e) {

            throw new AuraHandledException(e.getMessage());

        }

    }

    @AuraEnabled

    public static boolean updateAccounts(List<Account> acclist){

        try {

            update acclist;

            return true;

        } catch(Exception e) {

            return false;

        }

    }

}