To display the button on the rows, you need to put the attributes in the typeAttributes object just like with actions in the row above in your example.
{
type: 'button',
typeAttributes:
{
iconName: 'utility:edit',
label: 'Edit',
name: 'editRecord',
title: 'editTitle',
disabled: false,
value: 'test'
}
}
Update
The above example shows just how to add the button to the column to display it. Manza rightly asks how to use the button to call a method.
First, you add a method to your controller to handle the button click. Something like this:
handleRowAction: function (cmp, event, helper) {
var action = event.getParam('action');
var row = event.getParam('row');
switch (action.name) {
case 'editRecord':
helper.editRecord(row);
break;
// You might have other buttons as well, handle them in the same way
case 'action2':
helper.handleAction2(cmp, row, action);
break;
// etc.
}
}
You retrieve the value of the name
attribute you defined in your column using the event parameter. Based on this you can execute different logic as shown in the example above.
Then you add a onrowaction
attribute to the lighting:datatable
component:
<lightning:datatable
columns="{! v.columns }"
data="{! v.data }"
onrowaction="{! c.handleRowAction }"
/>
This will trigger the handleRowAction
method you defined in your controller when a button on a row is clicked.
Also note that if you have buttons in columns as well as row actions in the action
column (the little drop down menu), these actions when clicked will also fire the same onrowaction
method, so be sure to handle those in that method as well.
Please see the Data Table in Action example in the component documentation for further example code and documentation.
Yes, it only works on the checkboxes. Unfortunately, there is no onrowclick type handler as there was in Visualforce right now. If you want to make a Lightning Data Table that has this feature, you're going to have to write your own component(s) to do this.
Best Answer
You can use the
initialWidth
property of the column to set the width when it is rendered. It can still be resized.