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.