[SalesForce] Is it possible to add a (dynamic) label to the row selection column in a LWC Datatable

I'm working on creating a LWC for submitting "Scoping Requests" at the quote level and related "Scoping Request Lines" at the quote line level. I can't seem to achieve the following desired effect in a data table:
– If the quote line has already been scoped (I can get this value to another cell in the table), I would like to display a label of "Rescope" in the row selection column, else display "Scope"

Is there a way to manipulate the label of that column?

If not, any suggested potential workarounds would be much appreciated!

HTML

<lightning-layout>
<lightning-datatable
    key-field="quoteLine"
    data={quoteScoping.data.quoteLineScopings}
    columns={columns}
    onrowselection={handleLineSelection}
    onsave={handleTableSave}
    draft-values={draftValues}
    oncellchange={handleCellEdit}
    selected-rows={preSelectedRows}
    >
</lightning-datatable>
</lightning-layout>

I can preselect rows if they've already been scoped, through the selected-rows attribute. I'm wondering if there is a way to also display a dynamic label to the left of the row selection column (e.g., "Scope" if the quote line has not been scoped or "Rescope" if it has).

enter image description here

Best Answer

On your datatable's data function callback (assuming you're getting the data you need from apex) you can set the return type's properties dynamically and use those properties for setting the column properties. This could be color, icon, name and other attributes for the column.

If I understood correctly you can create a new column if the requirement is met and display it on a column every row. This is aura but it should be the same in LWC.

JS Controller

var resultData = response.getReturnValue();
            if (resultData !== null) {
                resultData.forEach(function (record) {
                    if (typeof record.Id != 'undefined') {
                        if (record.IsActive) {
                            record.displayIconName = 'utility:check';
                            record.showClass = 'greencolor'
                        } else {
                            record.displayIconName = 'utility:close';
                            record.displayIconName = 'redcolor';
                        }
                    }
                });`

Column

            { 
                label: 'Active',
                fieldName: 'IsActive',
                type: 'text',
                sortable: false,
                editable: false,
                "cellAttributes": {
                    "iconName": {
                        "fieldName": "displayIconName"
                    }, "class": {
                        "fieldName": "showClass"
                    },
                },
                "fixedWidth": 100
            },
Related Topic