Lightning Web Component Datatable example with sorting and search functionality.

Many people are familiar with lightning datatable component and how to use it in Aura Component. In this article I want to show example how to use lightning component in Lightning Web Component and build simple search by name and column sorting.

First we need to create an apex class.

You can create it either in Salesforce UI or Developer Console or do it in Visual Studio Code with SFDX command:

sfdx force:apex:class:create --classname GetAccounts --template DefaultApexClass --outputdir force-app\main\default\classes

Code for Apex class:

Second we will need to create Lightning Web Component budle.

sfdx force:lightning:component:create --type lwc -n LightningDatatableExample -d force-app/main/default/lwc

Code for html component:

JS controller:

To make sure component is visible in Lightning App Builder you need to add targets and change isExposed to true in LightningDatatableExample.js-meta.xml file:

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 🙂