0

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

1 Answer 1

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.

2
  • Hi @McCubo, Thanks for the reply. I dont want to create a new custom Data Type. I want to use the existing lightning:buttonStateful in my js file to show the toggle button in result table after doing a search.
    – sfdcdev
    Commented Jun 7, 2022 at 10:01
  • did you read the second article? your use case is not supported out-of-the-box by datatable, so I think that you have to create a custom data type. this article might give you a better overview of what a custom data type is.
    – McCubo
    Commented Jun 7, 2022 at 10:09

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .