0

Hi everybody I am coding a LWC datatable with several columns and the last one is a column with buttons. the columns are the next one:

const COLUMNS = [
{
    label: 'Punto de producción',
    fieldName: 'name',
    type: 'lookup',
    iconName: 'utility:checkin',
    initialWidth: 330,
    editable: false,
    
},
{
    label: 'Distancia (km)',
    fieldName: 'distance',
    type: 'Text',
    iconName:'utility:product_transfer',
    initialWidth: 230,
    editable:false
},
{
    label: 'Número de solicitudes',
    fieldName: 'requestsNumbers',
    type: 'Text',
    iconName: 'utility:work_order_type',
    initialWidth: 200,
    editable: false,
    
},
{
    label: 'Acciones',
    type: "button", 
    iconName: 'utility:touch_action',
    typeAttributes:{
        label: 'Asignar',
        name: 'Asignar',
        title: 'Asignar',
        disabled: false,
        iconPosition: 'center',
        value: 'Asignar',
    },
}

]

Using javascript I want to get the json from the button column to modify them. So I have the function:

actionFromButton(event){
     const valueButton = event.detail.action.value;
}

What I need is that the blue button Add to turn red when clicked and change its name to Remove and vice versa. enter image description here What I was wondering is if there is a way to get all the attributes from the button to modify them because I want to change the name and value and change it in the LWC. And I want to know if this can be done, I mean be able to modify the attributes. I am struggling with this. Could anybody help me? Thanks

Improve this question
3
  • why do you get JSON? What is your exact need? You want to show dynamic label on button?
    – Karan Sharma
    Nov 7, 2022 at 13:31
  • Hi @KaranSharma the JSON you see is are the columns that are shown in the datatable. What I need is that in every row to show all the information and in the last one to show the button Assign. Once the user clicks the Assign button this has trigger the button event that creates a record. After this I want that the button to turn red and change its name to Unassign and the value to 'unassign'. Because I want to handler the button event when the value is 'unassign' to delete the record.
    – user120821
    Nov 7, 2022 at 13:42
  • @KaranSharma The problem that I am having is that I do not know how to modify the button attribute to change its values
    – user120821
    Nov 7, 2022 at 13:43

2 Answers 2

Reset to default
1

I hope this will work for you now

Demo

Updated:

for that you can manipulate the data and add more attributes in your data if you want.

    this.tableData = data.map(item=>{
    let buttonName = item.status = 'Add' ? "Add":"Remove"
                    return {...item, 
                             "buttonName":buttonName
                            }
Improve this answer
5
  • 1
    you are a big asset to this community. I see lot of great answer from your side. Keep going.
    – darkshadowrule
    Nov 7, 2022 at 15:03
  • @KaranSharma Hi this is very useful but the problem is that in the data records you created you put the values of buttonName and buttonColor. In my case i get the data from apex code and not directly from the javascript data you made. Is there an alternative?
    – user120821
    Nov 7, 2022 at 16:14
  • Updated my answer please check
    – Karan Sharma
    Nov 7, 2022 at 16:22
  • Yeah I actually tried it but its kind complex. Could we talk in LinkedIn?
    – user120821
    Nov 7, 2022 at 16:38
  • yeah sure linkedin.com/in/karansf
    – Karan Sharma
    Nov 7, 2022 at 20:04
1

Prepared a demo hope it will work for you.

You just to need manipulate the data of the table (as you see in js code)

Demo

Improve this answer
1
  • Hi this is very useful but the problem is that in the data records you created you put the values of buttonName and buttonColor. In my case i get the data from apex code and not directly from the javascript data you made. Is there an alternative?
    – user120821
    Nov 7, 2022 at 16:18

You must log in to answer this question.