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: