How to add lightning toggle button lightining:buttonStateful in lwc component js file

Question

I have a search page that searches the records and displays in table.I am trying to use lightning:buttonStateful in LWC js file to display a toggle button (follow/unfollow) in the column. But it is not displaying. Below is the js file code where I have included the button code in column.

      const columns = [
{
    label: 'Name',
    fieldName: 'nameUrl',
    sortable: "true",
    type: 'url',
    typeAttributes: {
        label: {
            fieldName: 'Name'
        },
        sortable: "true",
        target: '_blank'
    }
},
{
type:"button" , 
typeAttributes:{ type : "buttonStateful",
labelWhenOff:'Follow',
labelWhenOn :'Following',
labelwhenhover :'Unfollow',
iconnamewhenoff:'utility:add',
iconnamewhenon :'utility:check',
iconnamewhenhover :'utility:close',
selected : isSelected,
onclick : handleClick

} } isSelected = false; handleClick() { this.isSelected = !this.isSelected; }

Column gets created. But the button is not appearing. Can some one please help me if I am doing some thing wrong here. Looking forward to hear from you.

Thanks & Reagrds, sfdcdev

Answer 1

based on this documentation, button type only supports the following type attributes: disabled, iconName, iconPosition, label, name, title, variant. So to achieve what you want, you need to create your own custom data type, as explained in this article, in your custom data type, you can render your lightning-button-stateful and add the behavior you need. You can pass the curernt record Id to it, call apex actions to update the record, fire events and so on. hope this info helps.