Adding button and sorting columns in Lightning DataTable

Salesforce has launched Lightning:Datatable tag to display list of records in lightning components.

In this blog, I will share the code through which we can add a button in column and call javascript controller function on click of that button. Also I will share the code required to enable sorting on columns for datatable.

Use case: Display list of account records along with view button and onclick of that button call javascript controller function. Once the javascript controller function is invoked, you can open any other component or redirect user to account detail page as per requirement.

In order to add button, you have to specify input type as button and provide type attributes while specifying the columns.

{
label: 'Action',
type: 'button',
typeAttributes: {
iconName: 'utility:view',
label: 'View Record',
name: 'viewRecord',
disabled: false,
value: 'viewBtn'
}
}

you can use onrowaction event on lightning:datatable to call javascript controller function.

Below is sample code which includes sorting as well as button in one of the columns:


Below is snapshot:

Click here for  Lightning DataTable Demo .

Hope this will help!!!