How to clear selected rows in Lightning DataTable?

I have a lightning datatable where I am displaying leads.

Once I selected the rows that I wanted and completed the action, I noticed that the checkboxes are not getting unchecked.

Here is what I added to the action method to make sure that the checkboxes will be unchecked after the action is completed.

Hope it helps 🙂

How to create Popup Using Lightning Web Components?

Lightning Web Components is the new programming model that you can use to build Lightning components in Salesforce. Here Is how you can create a Popup in Salesforce using LWC.

The following is the JavaScript that foes in the filename.js

import { LightningElement , track } from 'lwc';

export default class PopUpExample extends LightningElement {
    @track openModal;
    openPopUp() {
        this.openModal = true;
    }
    closePopUp() {
        this.openModal = false;
    }
    saveAction(){
        // eslint-disable-next-line no-console
        console.log( 'saveaction is called');
        this.closePopUp();
    }
}

Here is the xml file

When you create a new lwc, make sure the isExposed is updated to True in the xml file. The default is false, the component will not show up in the Lightning Builder even if you deploy the component to your org. Also update the <targets> based on what your requirements are.

That’s it.. Hope it helps.

How to use static resource to style Lightning Web Components?

Here is a sample code on how to import and use static resources for styling your lwc.

I zipped my CSS file into folder and uploaded this into a static resource called ‘myResource’. Here is the JS code you would need to import this static Resource into your component.

import { LightningElement, track } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import myResource from '@salesforce/resourceUrl/myResource';
export default class CssExample extends LightningElement {
    @track textVal;
    changeHandler(event) {
        this.textVal = event.target.value;
    }
    renderedCallback() {
        Promise.all([
            loadStyle(this, myResource + '/styleSheet.css')
        ]).catch(error => {
             // eslint-disable-next-line no-console
             console.log(error);
            
        });
    }
}

Here is how you can use a style class that you have defined inside the static resource:

That’s it. Hope it helps 🙂