Populate lightning-datatable with label from lightning-combobox selected item

Question

I have a component that generates a Product2 datatable from some filter options. There is a lightning-combobox that has labes and values and if a user select one option I need the lightning-datatable populates the first column with the combobox selected label.

The combobox data:

[
    {
        "label": "-- Todos --",
        "selected": true,
        "value": ""
    },
    {
        "label": "CATÁLOGO",
        "selected": false,
        "value": "IsProductList__c=true"
    },
    {
        "label": "LANÇAMENTO",
        "selected": false,
        "value": "IsLaunch__c=true"
    },
    {
        "label": "KIT/COFFRET (LUMFE)",
        "selected": false,
        "value": "IsKitCoffret__c=true"
    },
    {
        "label": "ORIGEM NACIONAL",
        "selected": false,
        "value": "Origin__c = 'NACIONAL'"
    },
    {
        "label": "ORIGEM IMPORTADA",
        "selected": false,
        "value": "Origin__c = 'IMPORTADO'"
    },
    {
        "label": "ORIGEM MISTA",
        "selected": false,
        "value": "Origin__c = 'MISTO'"
    },
    {
        "label": "PLV (TODOS)",
        "selected": false,
        "value": "IsPLV__c = true"
    },
    {
        "label": "BOM (TODOS)",
        "selected": false,
        "value": "BOM__c = true"
    },
    {
        "label": "SALES DEAL",
        "selected": false,
        "value": "SalesDeal__c= 'BOM'"
    }
]

Columns data:

    columns = [
        {
            label: 'Product Characteristic',
            fieldName: 'HOW TO PASS THE COMBOBOX SELECTED LABEL??',
            sortable: false,
            initialWidth: 160,
        },
        { 
            label: 'Product Name', 
            fieldName: 'Name',
            sortable: true,
            initialWidth: 270,
        },
        { 
            label: 'SKU', 
            fieldName: 'SKUCode_Cod__c', 
            sortable: true,
            initialWidth: 120,
        },
        { 
            label: 'Código EAN', 
            fieldName: 'EANCode_Cod__c', 
            initialWidth: 100,
        },
    ]

datatable example:

[
    {
        "Name": "BIOLAGE REPAIR COND 250ML",
        "SKUCode_Cod__c": "H1107100",
        "EANCode_Cod__c": "7899026494527",
        "ProductGroup__c": "110 - PRODUTO ACABADO",
        "IsPLV__c": false,
        "BOM__c": false,
        "Id": "01tj0000000AtjvAAC"
    },
    {
        "Name": "BIOLAGE REPAIR CPP 200ML",
        "SKUCode_Cod__c": "H1108300",
        "EANCode_Cod__c": "7899026494589",
        "ProductGroup__c": "110 - PRODUTO ACABADO",
        "IsPLV__c": false,
        "BOM__c": false,
        "Id": "01tj0000000AtjxAAC"
    }
]

lightninng-datatable:

<lightning-datatable 
 key-field="Id" 
 data={data} 
 columns={columns} 
 sorted-by={sortedBy}
 sorted-direction={sortedDirection} 
 onsort={sortColumns}>
</lightning-datatable>

How can I pass the selected combobox label to my datatable? Thanks!!

Answer 1

Like other applications where you wish to enrich your data or store state for rows in a data table, you'll need to mutate the records stored in your component's data property. You'll create a property in each data row, and then update the value of that property as the user changes the state of your combo box.

An example would look something like this:

this.data.forEach(
    (d) => { d.filter = this.selectedFilter }
);

You'd run that whenever your user's selection in the combobox changes, as well as when you first initialize the combobox value. Then, your columns becomes

columns = [
    {
        label: 'Product Characteristic',
        fieldName: 'filter',
        sortable: false,
        initialWidth: 160,
    },
    // ...