Fix column in custom scrollable table using LWC in salesforce

This post explains how to fix the column in custom table using lightning web component.

Below is the demo of output:

fixColumn.cmp :

<template>

    <div class="table-scroll">

        <table>

            <thead>

                <tr>

                    <th class="fix">

                        <div> Head </div>

                    </th>

                    <th>

                        <div> Head 1 </div>

                    </th>

                    <th>

                        <div> Head 2 </div>

                    </th>

                    <th>

                        <div> Head 3 </div>

                    </th>

                    <th>

                        <div> Head 4 </div>

                    </th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td class="fix">

                        <div> Lovesalesforceyes </div>

                    </td>

                    <td>

                        <div> Fix column </div>

                    </td>

                    <td>

                        <div> with </div>

                    </td>

                    <td>

                        <div> LWC </div>

                    </td>

                    <td>

                        <div> Salesforce </div>

                    </td>

                </tr>

            </tbody>

        </table>

    </div>

</template>

fixColumn.css :

table {

 background-color: white;

}

.table-scroll {

  overflow: auto;

}

table th{

  min-width: 140px;

  height: 50px;

  text-align: center;

}

table td{

  height: 50px;

  text-align: center;

}

.fix{

    position: sticky;

    left: 0;

    z-index: 1;

    background: #f8f8f8;

 }

Explanation :

Basically this is just a two line CSS work. Main thing you have to look at in this code is to fix class CSS. Position fix the first column and z-index show the first column above over other columns. Left is 0 because the requirement is to fix the first column. If you have to fix more than the first column then you have to adjust left according to that. In the same way you can also fix the header by changing left to top.

Thanks, 
Lovesalesforceyes

Show Success, Error, Information and Warning messages in LWC

This post explains how can we show success and error messages in LWC with the help of lightning toast. With the help of toast you can show any kind of of message in LWC.

Toast is basically used to show message after performing any action by user based on the condition.

We can customize style and visibility of toast according to our requirement. Below is the attribute which you can use to customize the toast:

• title : It is required parameter. Title display as heading of message. Title will be displayed in bold.
• message : It is also a required parameter. In this attribute you can specify the message which you want to show in the toast.
• duration : This value is used to set toast visibility duration. Default value of this attribute is 3000 ms.
• variant : This attribute is used for the appearence of the toast. Valid values for this attribute are:

info : Grey color toast for showing information message(Default value of this attribute).

success : Green color toast for showing success message.

warning : Orange color toast for showing warning message.

error : Red color toast for showing error message.

• mode :  This attribute is used to control how user can close the toast. Valid values for this attributes are: 

dismissible : It is a default value of this attribute. Toast will visible until you hit close button or duration has elapsed(3000 ms by default).

pester : With this value user can't close the toast because there is no close button. Toast will close automatically after duration has elapsed.

sticky : With this value toast will only close after uset hit the close button. 

ShowErrorMessage.cmp :

<template>

    <lightning-button label="Success" onclick={success}></lightning-button>

    <lightning-button label="Error" onclick={error}></lightning-button>

    <lightning-button label="Warning" onclick={warning}></lightning-button>

    <lightning-button label="Information" onclick={info}></lightning-button>

</template>

ShowErrorMessage.js :

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

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class ShowErrorMessage extends LightningElement {

    success(){

        const event = new ShowToastEvent({

            title: 'Success Message',

            message: 'This is used to show success message',

            variant: 'success',

            mode: 'dismissable'

        });

        this.dispatchEvent(event);

    }

    error() {

        const event = new ShowToastEvent({

            title: 'Error Message',

            message: 'This is used to show error message',

            variant: 'error',

            mode: 'dismissable'

        });

        this.dispatchEvent(event);

    }

 

    warning(){

        const event = new ShowToastEvent({

            title: 'Warning Message',

            message: 'This is used to show warning message',

            variant: 'warning',

            mode: 'dismissable'

        });

        this.dispatchEvent(event);

    }

 

    info() {

        const event = new ShowToastEvent({

            title: 'Info Message',

            message: 'This is used to show information message',

            variant: 'info',

            mode: 'dismissable'

        });

        this.dispatchEvent(event);

    }

}

Thanks, 
Lovesalesforceyes

Lightning Web Component to Delete Multiple Records in Custom Datatable

This Post explains how to delete multiple records in LWC with custom datatable. Below is the demo of output :

DelMultipleAcc.html : 

<template>
    <lightning-button variant="destructive" onclick={DelAcc} label="Delete" title="Delete"                                      icon-name="utility:delete" class="slds-m-left_x-small"></lightning-button>
        <template if:true={AccLists.data}>           
            <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                <thead>
                    <tr class="slds-line-height_reset">
                        <th></th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Name">ID</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="First Name">NAME</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Last Name">PHONE</div>
                        </th>
                        
                    </tr>
                </thead>
                <tbody>
                    <template for:each={AccLists.data} for:item="acc">
                        <tr key={acc.Id}>
                            <th scope="col">
                                    <lightning-input type="checkbox" data-id={acc.Id} onchange=                                                                 {handleChange} label="" name="input1"></lightning-input>
                            </th>
                            <th scope="col">
                                <div>{acc.Id}</div>
                            </th>
                            <th scope="col">
                                <div>{acc.Name}</div>
                            </th>
                            <th scope="col">
                                <div>{acc.Phone}</div>
                            </th>
                        </tr>
                    </template>
                </tbody>
            </table>
        </template>    
</template>

DelMultipleAcc.js :

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

import getAccountList from '@salesforce/apex/DeleteMultipleAccounts.getAccountList';

import DelAccountList from '@salesforce/apex/DeleteMultipleAccounts.DelAccountList';

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

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

var conIds = new Set();

export default class DelMultipleAcc extends LightningElement {

    @track AccLists;

    selectedRecords = [];

    @wire(getAccountList) AccLists

 

    handleChange(event) {

        if (event.target.checked)

        {

            conIds.add(event.target.dataset.id);

            console.log(conIds);

        }

        else

        {

            conIds.delete(event.target.dataset.id);

        }

        this.selectedRecords = Array.from(conIds);

    }

    DelAcc(){

        DelAccountList({ids : this.selectedRecords})

        .then(result => {

            this.dispatchEvent(new ShowToastEvent({

                title: 'Success',

                message: 'Record Is  Deleted',

                variant: 'success',

            }));

           return refreshApex(this.AccLists);

          })

          .catch(error => {

            this.dispatchEvent(new ShowToastEvent({

                title: 'Error While Deleting record',

                message: error.message,

                variant: 'error',

            }));

        });

    }

}

DelMultipleAcc.Meta : 

  

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

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

    <apiVersion>45.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

DeleteMultipleAccounts  Apex Class :

public with sharing class DeleteMultipleAccounts {

    

    @AuraEnabled(cacheable=true)

    public static List<Account> getAccountList(){  

        List<Account> acc = [select id, name, phone from Account];

        return acc;

    }

    

    @AuraEnabled

    public static void DelAccountList(list<Id> ids){  

        system.debug(ids);

        List<Account> acc = [select id, name, phone from Account where id IN :ids];

        system.debug(acc);

        delete acc;

        

    }

    

}

Output : 

Thanks, 
Lovesalesforceyes