datatable

Powerful Lightning Datatable base component – Example Using Fieldset

Lightning Component

Sharing is caring!

SFDC Monkey wishes you a happy and prosperous new year. We hope you all had a great long weekend. Let’s continue the same momentum throughout this year and achieve your goals.

It’s been a quite some time since lightning has launched. We have seen a lot of new features and improvements to make Lightning Experience super awesome. With the same momentum, Salesforce had released a bunch of base components in Winter 18 release and we would like to discuss one of the powerful base components in this post.

 If you are working in lightning projects, You must have created a table to display the data.

You might have done below steps to achieve the requirement.

  1. Get the data from Server.
  2. Use <table> html element with aura:iteration in component markup.
  3. Apply SLDS styling to look better.

This process might look easy and fine if you are familiar with lightning. But what if we want to make this table reusable ? Of course, this can also be done but it is not that straight forward like you are thinking. You may end up with performance issue as well.

With winter 18 release, Salesforce has released an awesome component called lightning:datatable. This is a base component and it simplified the above process with few lines of markup. We just have to get the data and columns to be displayed in the table and set the required attributes in the component.

Inline editing is currently not supported

Supported features include:

  • Displaying and formatting of columns with appropriate data types
  • Resizing of columns
  • Selecting of rows
  • Sorting of columns by ascending and descending order
Syntax:

These are the some of the attributes we would be using in this example. In short, we just have to set the columns and data attributes to display the column headers and data accordingly. hideCheckboxColumn attribute hides the check boxes on every row, by default check boxes are visible. KeyField attribute is required to identify the each row with a unique id and for better performance.

      We have a lot of attributes in lightning:datatable to perform sorting, resizing columns, giving custom width and row selection with checkboxes. This post is focused on basic agenda of lightning:datatable. We will cover all other functionalities in later posts.

The following example fetches the data from Account object and display the data using lightning:datatable base component. I used a fieldset to refer the columns to be displayed. (You can use your own way). This way we do not have to hard code any of the columns and it will become dynamic . 

Example:

Step 1: FieldSet Creation

To create a field set, switch to salesforce classic >> Go to Account Object >> Select FieldSets.

Click on [New] >> drag and drop the fields to be displayed on the table.

field set

 

new field set creation

add fields to fieldset

  • click on Save button.
Step : 2  Server Side Controller – Apex Class (LightningDataTableController .apxc)

Step 3: Create a Lightning Component

LightningDataTable.cmp

LightningDataTableController.js

LightningDataTableHelper.js

LightningApp – To test this component

check also : Custom Data Table With Inline Editing In Salesforce Lightning Component – Sample

Output:

component output

 

        If you want to remove or add the columns to this table, You do not have to touch the code. Just go to the field set, add/remove fields accordingly. Awesome right ?

Please share your feedback and comment if any questions. Happy Learning.

Follow us on Facebook and twitter further updates.

Resources:

Lightning Developer Guide: lightning:dataTable

About The contributor: 

Sharing is caring!

(Visited 7,510 times, 12 visits today)

13 comments

Leave a Reply