Lightning Component – Display records in a dynamic table using FieldSet on any object
By 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.
[gist id=9102691cbdf5bf33accdf58f0422cca8 file=LightningTableDemo.html]
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
[gist id=9102691cbdf5bf33accdf58f0422cca8 file=LightningTable.html]
LightningTableController [APEX Class]
[gist id=9102691cbdf5bf33accdf58f0422cca8 file=LightningTableController.cls]
LightningTableController.js
[gist id=9102691cbdf5bf33accdf58f0422cca8 file=LightningTableController.js]
LightningTableHelper.js
[gist id=9102691cbdf5bf33accdf58f0422cca8 file=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
[gist id=9102691cbdf5bf33accdf58f0422cca8 file=LightningCell.html]
LightningCellController.js
[gist id=9102691cbdf5bf33accdf58f0422cca8 file=LightningCellController.js]
LightningCellHelper.js
[gist id=9102691cbdf5bf33accdf58f0422cca8 file=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.
By Naveen Sharma
November 21, 2017Hi Sharma,
Great post..!! you saved my day…
Thanks,
Kamal.
By Naveen Sharma
May 15, 2018Hi 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
By Naveen Sharma
May 15, 2018It should work without any issue. What kind of issue are you having right now?
By Naveen Sharma
May 17, 2018Hi 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?
By Naveen Sharma
June 29, 2018Hi Jenny,
This is a normal behavior due to LockerService which filters the objects created by lightning component.
You can learn more about that here –
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/security_proxy.htm
By Naveen Sharma
January 10, 2019Hi 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
By Naveen Sharma
January 10, 2019Hi 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.
By Naveen Sharma
February 5, 2019hi 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}
By Naveen Sharma
February 15, 2019Looks like your JSON is not correct. Make sure your apex method is returning a valid JSON string.
By Naveen Sharma
February 14, 2019HI,
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}
By Naveen Sharma
February 15, 2019Looks like your JSON is not correct. Make sure your apex method is returning a valid JSON string.
By Naveen Sharma
June 6, 2019Hi,
I tried this and get this issue on loading.
Uncaught Action failed: cGenericFieldSet$controller$doInit [Cannot read property ‘Name’ of undefined]
Callback failed: apex://CustomHighlightPanel_CTR/ACTION$displayFieldSetValues
Please help me on this
By Naveen Sharma
June 10, 2019where to save the lightningTableDemo.html please can u tell
By Naveen Sharma
September 26, 2019create a opportunity table using aura component and display the record of opportunity object….please tell me code
By Naveen Sharma
November 5, 2019Hi Naval,
I want to use this component for Opportunity Custom List view.In this case how do I make the Opportunity Name as clickable ?