Lightning Component – Display records in a dynamic table using FieldSet on any object

Recently, while answering on developer forums. I came across a question where someone asked about a lightning component to display records in the table using a fieldset. I tried to put my effort to create a generic lightning component which can be used with any object and a fieldset.

After the release of new components like Lightning:RecordEditForm, this has become so easier. You can check the following blog post where I have used the page-layout to get the list of fields but you can still go with the fieldset approach.

Rendering Lightning:RecordEditForm based on the page layout

This component can be used to display child records or all the records of an object. See below component code.

As you can see in the above component we have 4 attributes. These attributes can control the behaviour of the component. sObjectName : Name of the object which you want to query records from. (Required) fieldSetName: Name of the fieldset which will be used for the columns in the table. (Required) parentFieldName: If you want to display only child records of a parent then this should be specified. (Optional) parentRecordId: Parent record Id if you are displaying child records of a parent. (Optional) LightningTable is a parent component which is working as a table wrapper. This parent component is using a LightningCell component to display each cell of the row based on the data type. You can add more data types into the code as per your requirement. I am providing you all the code related to these components so you can update it as per your business use case. Fieldset is used to add/remove columns dynamically to the table.

LightningTable component

LightningTableController [APEX Class]

LightningTableController.js

LightningTableHelper.js

I have created one more component to use fieldset while displaying columns. As you know, we can not reference fields dynamically in the component so I used Javascript to get the value and update the view.

LightningCell Component

LightningCellController.js

LightningCellHelper.js

Reference/lookup fields are handled explicitly in the above code as they can be included as a field in any fieldset. I tried to make it as much as dynamic.

 

 

5 thoughts on “Lightning Component – Display records in a dynamic table using FieldSet on any object

  1. Hi Naval,

    Thank you for sharing your code.
    I am trying to make it work for specific record but I am not able to achieve.
    Please, help asap.

    It’s bit urgent!!!

    thanks and regards
    PV Singh

  2. Hi Naval,

    I have an issue with the child component. “record” variable is getting Proxy{} value instead of sObject. Probably the reason is LockerService which was enabled to all API versons > 40.0. What can we do continue to use this solution?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.