Powerful Lightning Datatable base component – Example Using Fieldset

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

RequiredAtt datatable

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 . 


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 datatable


field-set new

add fieldset datatable

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

Step 3: Create a Lightning Component




LightningApp – To test this component

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


lightning datatable-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.


Lightning Developer Guide: lightning:dataTable

About The contributor: 

(Visited 33,625 times, 1 visits today)

28 thoughts on “Powerful Lightning Datatable base component – Example Using Fieldset”

  1. Use minColumnWidth  attribute in tag.


    <lightning:datatable data=”{! v.mydata }”  columns=”{! v.mycolumns }”  keyField=”Id” minColumnWidth =”100px”/>

  2. Hi this Naidu from Hyderabad I’m recently moved into salesforce development side. I got a new lightning project.

    I need a support for this project from lightning developer if anyone interested call me +91 8686716461

  3. Hello,

    I m using Lightning Tree Grid component , and when I see the datatable all the properties are same.

    I wanted to change the help text of the column header, the attribute title is not working .

    Can you please check it


  4. Can i make the column headers of this data table as bold? And can i make the lightning data table headers as fixed while the data can be scrollable? Can you suggest a way of doing it

  5. Hi,


    thank you for sharing the wonderful post.

    I am trying to use same for custom object, and have defined same in helper but getting error:


    strObjectName is not defined

    Kindly, help me.


    thanks in advance.

  6. Hello, nice guide. Any ideas how we can dynamically change classes for data calls or add icons? E.g. for Active column make green/red background and/or add approve/close icon based on Yes/No value in the cell?

  7. Hi Using Lightning data table i am displaying records .I use field sets to display columns but filed set displays Ids and references as ids so i handled this in js helper and displaying them as links but my requirement is to show mini pagelayout whenever i hover over that links .Can someone help

  8. Can we disable particular row in lightning datatable? or can we remove the checkbox for particular row on the basis of some conditions?


Leave a Comment