lightning:datatable inline editing

A lightning:datatable component displays tabular data where each column can be displayed based on the data type . in this post, we will see how to use the data table inline edit the cells. you can make data table columns as editable by passing editable to true at the column level. When you make a column editable, a pencil icon appears when you hover over the cells in that column. Clicking the icon or pressing the Enter key triggers inline editing. Inline editing is not supported for date and location fields. The datatable supports mass inline editing, so you can edit content in multiple table cells and save the changes in one step. The component verifies that you want to update multiple items before it applies your changes. Make a column editable by setting editable to true when you are defining your columns in the controller.

The final data table looks as shown below.

 

Apex Class 

The above apex class is used to update the inline edit data and used to get all the accounts to show in the table.

Lightning Component 

Controller.js

helper.js

 

Understing code 

1. Cells in datatable are editable only if you set the editable property to true at the column level. In the below controller code we are setting the field columns that are editable.

 

2. In the component markup data table, we need to use the draft value attributes and onsave action to save the edit the cells.

3.You can handle the oncancel, oncellchange, and onsave actions when the cell value changes or is saved. When the onsave action is used, the Cancel and Save button appears after a value cell changes and you press the Enter or Tab key, or move away from the cell.  Retrieve the new value using event.getParam('draftValues').

above code with retrieve the new values from the edited cells and passing to the apex controller to save the data into the Salesforce object. once status is the success it will refresh the screen.