inline edit data table

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

Lightning Component

Hi Guys,

Today in this post we are going to create a custom lightning data table with inline edit functionality. like standard inline editing.

Output :

inline editing
Output : Lightning Component


Component Blue Print :
inline editing salesforce lightning component
Component Blueprint


Component Functionality :

  • Support inline editing by clicking on pencil icon OR double click on row column.
  • Make name field as required on data table.
  • Save and Cancel functionality, for records update.
Step 1 : Create Apex Controller : inlineEditCtrl.apxc

From Developer Console >> File >> New >> Apex Class

  • see code comments.
Step 2 : Create Child Lightning Component  : inlineEditRow.cmp

From Developer Console >> File >> New >> Lightning Component

  • see code comments.
JavaScript Controller – inlineEditRowController.js

  • see code comments
JavaScript Helper – inlineEditRowHelper.js

Also Checkout  : How to Fetch Picklist value from sObject and Set in ui:inputSelect
style – inlineEditRow.css

Step 3 : Create Parent Lightning Component  : inlineEditTable.cmp

From Developer Console >> File >> New >> Lightning Component

  • see code comments
JavaScript Controller – inlineEditTableController.js

$A.get(‘e.force:refreshView’).fire(); This event is handled by the container. It’s supported in Lightning Experience, Salesforce app, and Lightning communities.
JavaScript Helper- inlineEditTableHelper.js

  • see code comments
Add Lightning Components as Custom Tabs in Lightning Experience : 

Related Resource:

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can share your thoughts  in comment box.

Happy Learning 🙂


Leave a Reply