+ Start a Discussion
Mike Tol 1Mike Tol 1 

Can’t find simple Inline edit custom table example

Hi!
I can’t find simple Inline edit custom table example like this:


User-added image

I have find desired example with datatable https://www.w3web.net/record-save-edit-field-inline-in-lwc/ (https://www.w3web.net/record-save-edit-field-inline-in-lwc/" style="color:#0563c1; text-decoration:underline) and with aura https://sfdcmonkey.com/2017/12/08/lightning-data-table-inline-editing/. I need same but with custom table, not with datatable, not with aura. I was given a link to a Inline edit snippet https://www.salesforcebolt.com/2021/09/ep-35-custom-inline-editing.html (https://www.salesforcebolt.com/2021/09/ep-35-custom-inline-editing.html" style="color:#0563c1; text-decoration:underline" target="_blank). But I can’t to interpose this fragment that the full table turned out. Please, tell me where can I find such an example?
My attempt:

Html
<template>
    <lightning-card title="Account" >
        <table border="1" cellspacing="0" cellpadding="5" style="border-collapse:collapse;" class="tblColPad">
            
            <tr>
                <th>Name</th>
                <th>Rating</th>
                <th>Dalete</th>
            </tr>

            <template for:each={getAccount.data} for:item="accountItem">
                <tr key={accountItem.Id}>
                    <td>
           <template if:false={editName}>
                            <span style="border-bottom: 1px dotted black"
                              >{accountItem.Name}
                              <lightning-button-icon
                                class="slds-float_right"
                                icon-name="utility:edit"
                                alternative-text="Update Name"
                                title="Update Name"
                                variant="bare"
                                size="medium"
                                onclick={handleNameEdit}
                              ></lightning-button-icon>
                            </span>
                          </template>

                          <template if:true={editName}>
                            <lightning-input
                              name="accountItem.Id"
                              value={accountItem.Name}
                              label=""
                              onchange={handleNameChange}
                            ></lightning-input>
                            <lightning-button-icon
                              class="slds-float_right"
                              icon-name="utility:save"
                              alternative-text="Update Name"
                              title="Update Name"
                              variant="bare"
                              size="large"
                              onclick={handleUpdateName}
                            ></lightning-button-icon>
                          </template>

         </td>
                    <td>{accountItem.Rating}</td>
                    <td><lightning-button label="Delete" size="small" variant="neutral" 
                    onclick={handleDelete} value={accountItem.Id} 
                    icon-name="utility:delete" icon-position="right" 
                    class="deleteButton"></lightning-button></td>
                </tr>
            </template>

        </table>
    </lightning-card>
</template>

Js
import { LightningElement, track, wire } from 'lwc';
import getAccounts from '@salesforce/apex/ProjectFour.getAccounts';
import {deleteRecord} from 'lightning/uiRecordApi';
import {refreshApex} from '@salesforce/apex';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
 
export default class ProjectFourCustom extends LightningElement {
    
  @wire (getAccounts) getAccount;
  @track recordId;
 
@track account;
  @track accountId;
  @track accountName;
  @track accountItem
  @track error;
  @track editName = false;

//   connectedCallback() {
//     getAccounts()
//       .then((result) => {
//         this.accountId = result.Id;
//         this.accountName = result.Name;
//       })
//       .catch((error) => {
//         this.error = error;
//       });
//   }

handleNameEdit(event) {
   console.log('handleNameEdit', event);
   this.editName = true;
 }

 handleNameChange(event) {
   console.log('handleNameChange', event);
   this.accountItem = event.target.value;
 }

 handleUpdateName(event) {
   console.log('handleUpdateName', event);
   const fields = {};
   fields[ID_FIELD.fieldApiName] = this.accountId;
   fields[NAME_FIELD.fieldApiName] = this.accountItem;

   const recordInput = { fields };

   updateRecord(recordInput)
     .then(() => {
       console.log('Done', event);
       this.editName = false;
     })
     .catch((error) => {
       console.log("Error updating date => " + error.body.message);
     });
 }


  handleDelete(event){
     this.recordId = event.target.value;
     deleteRecord(this.recordId) 
     .then(() =>{
 
        return refreshApex(this.getAccount);
        
     })
     .catch(error =>{
         window.console.log('Unable to delete record due to ' + error.body.message);
     });
  }
  
}

 
mukesh guptamukesh gupta
Hi Mike,

Please follow below url

https://www.salesforcelwc.in/2019/04/blog-post.html

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh 
Mike Tol 1Mike Tol 1
Thank you! But editing in this example does not work. When you click the edit button, a modal window immediately pops up without the ability to edit. And I have to do it without modal window. The table should look like the image:

User-added image

'if you need any assistanse, Please let me know!!' - Yes, I need. If you agree to help me, please write me: michail.v.tolmachev@gmail.com

Html
<template>
  <lightning-card title="Accounts List" icon-name="standard:account">
      <div class="slds-p-around_x-small">
          <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="Account Name">Account Name</div>
                      </th>
                      <th class="" scope="col">
                          <div class="slds-truncate" title="Industry">Industry</div>
                      </th>
                      <th class="" scope="col">
                          <div class="slds-truncate" title="Phone">Phone</div>
                      </th>
                      <th class="" scope="col">
                          <div class="slds-truncate" title="Edit">Action</div>
                      </th>
                  </tr>
              </thead>
              <tbody>
                  <template for:each={Accounts.data} for:item="acc">
                      <tr key={acc.Id} class="slds-hint-parent">
                          <td data-label="Prospecting">
                              <div class="slds-truncate" title="Account Name">{acc.Name}</div>
                          </td>
                          <td data-label="Confidence">
                              <div class="slds-truncate" title="Industry">{acc.Industry}</div>
                          </td>
                          <td data-label="Confidence">
                              <div class="slds-truncate" title="Phone">{acc.Phone}</div>
                          </td>
                          <td data-label="Confidence">
                              <div class="slds-truncate" title="Edit">
                                  <a name={acc.Id} onclick={handleClick}>
                                      <lightning-icon icon-name="action:edit" size="x-small"></lightning-icon>
                                  </a>
                              </div>
                          </td>
                      </tr>
                  </template>
              </tbody>
          </table>
      </div>
  </lightning-card>
  <template if:true={open}>
      <div class="demo-only" style="height: 640px;">
          <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
          <div class="slds-modal__container">
              <header class="slds-modal__header">
                  <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
                      <lightning-icon icon-name="utility:close" title="close" size="small" onclick={closeModal} variant="inverse"></lightning-icon>
                  </button>
                  <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal Header</h2>
              </header>
              <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                      <!-- <c-update-rec record-id={rec2Id} oncreate={reloadList}></c-update-rec> -->
              </div>
              <footer class="slds-modal__footer">
              <button class="slds-button slds-button_neutral">Cancel</button>
              <button class="slds-button slds-button_brand">Save</button>
              </footer>
          </div>
          </section>
          <div class="slds-backdrop slds-backdrop_open"></div>
      </div>
  </template>
  </template>

Js
import { LightningElement, wire, track, api } from 'lwc';
import getAccounts from '@salesforce/apex/Qqq.getAccounts';
import { refreshApex } from '@salesforce/apex';
export default class AccountListEdit extends LightningElement {
    @wire(getAccounts) Accounts;
    @track open = false;
    @api rec2Id;
    renderedCallback() {
        console.log("Accounts:::", this.Accounts);
        //console.log("Accounts:::", JSON.stringify(this.Accounts));
    }
    handleClick(event) {
        console.log("In HandleClick");
        const recId = event.target.name;
        this.rec2Id = event.currentTarget.name;
        console.log("Selected Account Id:::", recId);
        console.log("Selected Account Id rec2Id :::", this.rec2Id);
        this.open = true;
    }
    closeModal() {
        console.log("In closeModal");
        this.open = false;
    }
    reloadList() {
        return refreshApex(this.Accounts);
    }
}

Apex
public class Qqq {

    @AuraEnabled(cacheable = true)
    public static List<Account> getAccounts() {
        return [Select Id, Name, Industry, Phone from Account  Limit 3];
    }
}