Visualforce to LWC: PageBlockTable to lightning-datatable

Hello Ohana,

This is another article from the Series: Visualforce to LWC, a series aiming to make your transformation from Visualforce to Lightning Web Components easier and smoother. In this article I will be discussing how to transform the table you created in a Visualforce page to a table in a Lightning Web Component. The PageBlockTable tag is the one you used to create a table in a Visualforce page, let’s take a look on how you used to do that in Visualforce.

This is an example of a PageBlockTable that displays the accounts in an org by using a Visualforce page and a Custom Controller:

Visualforce:

Apex:

lightning-datatable:

The corresponding tag to PageBlockTable in lightning is the lightning-datatable. This is the tag you use to build the same functionality but in a lightning component.

Here’s the same example but in Lightning:

Apex:

Line 1: The apex class accountController is where you’ll perform the query to get the Accounts.

Line 2–5: The accountController class contains a method called getAccounts that returns a list of Accounts. This method getAccounts is wrapped with the annotation @AuraEnabled(cacheable=true). This annotation enables your lightning component to access apex methods and properties.

HTML:

Line 3: As you can see, our HTML file is pretty simple as we used the lightning-datatable component to display our data in a table. We also have attributes in this component so let’s specify what each one does.

key-field: Associates each row in our table to a unique Id, and it’s required for a better performance.

data: Here we will pass the array of data that should be displayed.

columns: This is also an array of the columns that we want to appear in the table.

JS:

Line 2: We import the getAccounts function from the accountController Apex class that we created above.

Line 5: To read Salesforce data, Lightning web components use a reactive @wire service and notice that we had to import it first in line 1. With wire service you can call your apex method by passing the method name which in this case is: getAccounts.

The wire decorator calls our apex function getAccounts and it returns the array of accounts. An important thing to note here in line 3 of the HTML file is that we didn’t pass the array of accounts to the data attribute, instead we used accounts.data, and the reason for that is that the wire service returns an object with two properties: data property and an error property. So accounts.data is where you can find the list of your accounts.

Line 7–13: Here we create an array called cols to specify which columns we want to include in our table. Required properties include ‘label’, ‘fieldName’, and ‘type’.

fieldName: contains the API name of the field.

label: The label of the column that will be displayed in the table.

type: The default type is text, but as you can see we used ‘phone’ type for the phone field.

To learn more about lightning-datatable check the Component Documentation.

Happy Learning :)!