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.

 

 

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

  1. PV Singh

    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

    Reply
  2. Jenny Mosunova

    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?

    Reply
  3. bharathi

    Hi Sharma,

    There is datatable, Can u please provide a code which will fetch data from JSON file and show data in table dynamically.

    without apex class, Create JSON file with dummy data, save it in static resource, call directly that JSON file in javascript controller

    Reply
    1. Naval Sharma Post author

      Hi Bharathi,

      I am not sure what exactly you are looking for. Is your database resides in the Salesforce or it’s outside of the Salesforce.

      However, you can not access the body of the JSON file in the javascript controller. You will have to query that static resource record through apex and then can use whatever inside in the body.

      Reply
  4. Hari

    hi i got this error in this code ….

    This page has an error. You might just need to refresh it. Error in $A.getCallback() [JSON.parse: expected ‘,’ or ‘]’ after array element at line 1 column 4 of the JSON data] Callback failed: apex://LightningTableController/ACTION$getFieldSet Failing descriptor: {c:LightningTable}

    Reply
    1. Naval Sharma Post author

      Looks like your JSON is not correct. Make sure your apex method is returning a valid JSON string.

      Reply
  5. Venkatesh

    HI,
    I am getting the following error

    This page has an error. You might just need to refresh it. Error in $A.getCallback() [JSON.parse: expected ‘,’ or ‘]’ after array element at line 1 column 4 of the JSON data] Callback failed: apex://LightningTableController/ACTION$getFieldSet Failing descriptor: {c:LightningTable}

    Reply
    1. Naval Sharma Post author

      Looks like your JSON is not correct. Make sure your apex method is returning a valid JSON string.

      Reply

Leave a Reply

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