ExtJS Modern -- add button to grid cell - extjs

Question

I have an ExtJS 6.2 modern app. What is the proper way to add a button to a grid cell?
I tried using the column renderer fn to return a button but I just see the HTML tags rendered, not the actual element. I also tried using the "widgetcell" component which does render the button but not the button text.
Fiddle.

Answer 1

Using your fiddle as an example, you can make a widget button like this
columns: [
//other columns
{
dataIndex: 'description',
flex: 1,
cell: {
xtype: "widgetcell",
widget: {
xtype: "button",
}
}
}
]

Answer 2

You can do it without widgetcell by:
{
text: "Button Widget ",
flex: 1,
cell: {
xtype: 'button',
text: 'CLICK ME'
}
}
Or with panel
{
text: "Button Widget ",
flex: 1,
cell: {
xtype: "widgetcell",
widget: {
xtype: 'panel',
header: false,
items: [{
xtype: 'button',
text: 'CLICK ME'
}]
}
}
}

Answer 3

I wanted to accomplish the same task but thought I would include a little more complete example. This was the first resource I came across so figured I should post here.
So for my problem I just wanted to pass the data and render a view utilizing that data.To do that I add a column to my grid and added a widgetcell inside that column. The grid column requires a dataIndex but my button wasn't associated with a specific column in my model, so I just added a non-existent column for the required value which worked.
After that you can specify a widget object as a cell config. You can add a handler key and access the record object from the grid like below.
{
xtype: 'gridcolumn',
flex: 1,
width: 80,
dataIndex: 'button',
text: 'Details',
cell: {
xtype: 'widgetcell',
widget: {
xtype: 'button',
text: 'View',
width: '100%',
handler: function(button,e){
let accountData = this.up().up()._record.data
console.log(accountData);}
}
}
}