Hi! I need Inline edit custom table example. Not datatable. Not with aura. Code below with datatable. How get same logics but with custom table? Thank you



Html
<template>
    <lightning-card title="Account">
       
        <template if:true={accountObj.data}>
            <lightning-datatable
            key-field="Id"
            data={accountObj.data}
            columns={columns}
            onsave={saveHandleAction}
            draft-values={fldsItemValues}
            hide-checkbox-column
            onrowaction={handleDelete}
            show-row-number-column>
           </lightning-datatable>
        </template>
    </lightning-card>
</template>

Js
import { LightningElement, wire, track } from 'lwc';
import getAccounts from '@salesforce/apex/ProjectFour.getAccounts';
import { updateRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { refreshApex } from '@salesforce/apex';
import { deleteRecord } from 'lightning/uiRecordApi';
 
const columns = [
    { label: 'Name', fieldName: 'Name', type: 'text', editable: true },
    { label: 'Rating', fieldName: 'Rating', type: 'test', editable: true },
    { type: 'button-icon', label: 'Delete', initialWidth: 75,
        typeAttributes: {iconName: 'action:delete', title: 'Delete',
        name: 'delete_account', variant: 'border-filled', alternativeText: 'Delete'} }
];
export default class ProjectFour extends LightningElement {
    columns = columns;
    accountObj;
    fldsItemValues = [];
 
    @wire(getAccounts)
    wiredAccounts(result) {      
        this.accountObj = result;
        this.refreshData = result;
        if (result.error) {
            this.accountObj = undefined;
        }
    }
    handleDelete(event) {
        console.log('event = ', event);
        const action = event.detail.action;
        console.log('action = ', JSON.stringify(action));
        const row = event.detail.row;
        console.log('row = ', JSON.stringify(row));
        if (action.name === 'delete_account') {
            console.log('Done = ', row.Id);
            deleteRecord(row.Id)
            .then(() => {
                const rows = this.data;
                return refreshApex(this.refreshData);
            })
        }
    }
 
    saveHandleAction(event) {
        this.fldsItemValues = event.detail.draftValues;
        const inputsItems = this.fldsItemValues.slice().map(draft => {
            const fields = Object.assign({}, draft);
            return { fields };
        });      
        const promises = inputsItems.map(recordInput => updateRecord(recordInput));
        Promise.all(promises).then(res => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Records Updated Successfully!!',
                    variant: 'success'
                })
            );
            this.fldsItemValues = [];
            return this.refresh();
        })
        .catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error',
                    message: 'An Error Occured!!',
                    variant: 'error'
                })
            );
        })
        .finally(() => {
            this.fldsItemValues = [];
        });
    }
   
    async refresh() {
        await refreshApex(this.accountObj);
    }
}

Apex
public class ProjectFour {
    
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        List<Account> accounts = [SELECT Id, Name, Rating FROM Account  Limit 3];

        return accounts;    
    } 
}