0

I have a table with 3 inputs and one delete button. I'm hiding the delete button on first row using iterative and first property and the delete button will be visible after first row. Because of this I have the alignment issue on 3rd column. The 3rd column on the first row occupies less space than the other rows where delete button is shown. Not sure how do I fix this alignment issues. I have attached the code and js file.

html

<template>

    <div class="slds-card" style="font-family: 'Open Sans', sans-serif">

        
        <header class="slds-card__header slds-media slds-media_center">
            <div class="slds-media__figure">
                <lightning-icon icon-name="standard:account" size="small"></lightning-icon>
            </div>
            <div class="slds-media__body slds-card__header-title slds-text-title_bold" style="font-size: 14px">
                Account Creation
            </div>
        </header>

        
        <table class="slds-table  slds-no-row-hover slds-table_cell-buffer" role="grid">
            <thead>
            <tr>
                
                <th scope="col" height="22">Name</th>
                <th scope="col" height="22">Website</th>
                <th scope="col" height="22">Phone</th>
               <th scope="col" height="22" style="width: 3rem"></th>
            </tr>
            </thead>
            <tbody>
            <template iterator:it={listOfAccounts} >
                <tr key={it.value.index} class="slds-hint-parent">
                    
                    
                    <td>
                        <lightning-input type="text" variant="label-hidden" label="" data-id={it.value.index} name="Name" value={it.value.Name} onchange={handleInputChange}></lightning-input>
                    </td>

                    <td>
                        <lightning-input type="text" variant="label-hidden" label="" data-id={it.value.index} name="Website" value={it.value.Website} onchange={handleInputChange}></lightning-input>
                    </td>

                    <td>
                        <lightning-input type="text" variant="label-hidden" label="" data-id={it.value.index} name="Phone" value={it.value.Phone} onchange={handleInputChange}></lightning-input>
                    </td>
                    <template if:false={it.first}>
                    <td>
                        <lightning-button-icon icon-name="utility:delete" alternative-text="Remove" title="Remove" name={it.value.index} onclick={removeRow}></lightning-button-icon>
                    </td></template>
                </tr>
            </template>
            </tbody>
        </table>
        <div class="slds-p-left_small slds-p-vertical_small">
            
            <lightning-button variant="neutral" label="add additional row" title="add additional row" icon-name="utility:add" onclick={addNewRow}></lightning-button>
        </div>

        
    </div>

</template>

JS file

import {LightningElement, track} from 'lwc';

//APEX-Methods
import insertAccounts from '@salesforce/apex/SfWiki_Handler.insertAccounts'
import {ShowToastEvent} from "lightning/platformShowToastEvent";

export default class LwcDynamicRecordRowsCreation extends LightningElement {

    @track listOfAccounts;

    connectedCallback() {
        this.initData();
    }

    initData() {
        let listOfAccounts = [];
        this.createRow(listOfAccounts);
        this.listOfAccounts = listOfAccounts;
    }

    createRow(listOfAccounts) {
        let accountObject = {};
        if(listOfAccounts.length > 0) {
            accountObject.index = listOfAccounts[listOfAccounts.length - 1].index + 1;
        } else {
            accountObject.index = 1;
        }
        accountObject.Name = null;
        accountObject.Website = null;
        accountObject.Phone = null;
        listOfAccounts.push(accountObject);
    }

    /**
     * Adds a new row
     */
    addNewRow() {
        this.createRow(this.listOfAccounts);
    }

    /**
     * Removes the selected row
     */
    removeRow(event) {
        let toBeDeletedRowIndex = event.target.name;

        let listOfAccounts = [];
        for(let i = 0; i < this.listOfAccounts.length; i++) {
            let tempRecord = Object.assign({}, this.listOfAccounts[i]); //cloning object
            if(tempRecord.index !== toBeDeletedRowIndex) {
                listOfAccounts.push(tempRecord);
            }
        }

        for(let i = 0; i < listOfAccounts.length; i++) {
            listOfAccounts[i].index = i + 1;
        }

        this.listOfAccounts = listOfAccounts;
    }

    /**
     * Removes all rows
     */
    removeAllRows() {
        let listOfAccounts = [];
        this.createRow(listOfAccounts);
        this.listOfAccounts = listOfAccounts;
    }

    handleInputChange(event) {
        let index = event.target.dataset.id;
        let fieldName = event.target.name;
        let value = event.target.value;

        for(let i = 0; i < this.listOfAccounts.length; i++) {
            if(this.listOfAccounts[i].index === parseInt(index)) {
                this.listOfAccounts[i][fieldName] = value;
            }
        }
    }

    createAccounts() {
        insertAccounts({
            jsonOfListOfAccounts: JSON.stringify(this.listOfAccounts)
        })
            .then(data => {
                this.initData();
                let event = new ShowToastEvent({
                    message: "Accounts successfully created!",
                    variant: "success",
                    duration: 2000
                });
                this.dispatchEvent(event);
            })
            .catch(error => {
                console.log(error);
            });
    }

}

XML file

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

I have attached the picture to see the alignment issue

enter image description here

1
  • I know I can fix this by adding this width in CSS. but can we achieve this using SLDS
    – prasanth
    Commented Nov 4, 2022 at 16:28

1 Answer 1

2

We didn't need any css for this just replace

<template if:false={it.first}>
   <td>
      <lightning-button-icon icon-name="utility:delete" alternative-text="Remove" title="Remove" name={it.value.index} onclick={removeRow}></lightning-button-icon>
    </td>
</template>

From this

<td>
    <lightning-button-icon if:false={it.first} icon-name="utility:delete" alternative-text="Remove"
        title="Remove" name={it.value.index} onclick={removeRow}></lightning-button-icon>
</td>
1
  • Thank you worked like charm
    – prasanth
    Commented Nov 7, 2022 at 10:24

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .