[SalesForce] How to conditionally add the “show-row-number-column” attribute to the lightning-datatable

I am new to LWC and I'm trying to learn by converting an older Aura component to a LWC. What I'm trying to do right now is conditionally add the "show-row-number-column" attribute to the lightning-datatable via JavaScript.

In Aura I could set showRowNumberColumn = "{! c.enableRowNumber}" (which would pull in true or false conditionally), but in the LWC it looks like I have to add or remove the whole attribute from the datatable not just set it to true or false. I've searched, but don't see any way to conditionally add or remove an attribute from the datatable. Would someone be able to point me in the right direction here?

Best Answer

Although it is true that you have to just mention the attribute to make it true in LWC, this is applicable only to pass static value true and if you want to make it dynamic you can bind it to tracked property in LWC also (like Aura).

show-row-number-column={enableRowNumber}

Here show-row-number-column will become true or false depending on tracked property enableRowNumber.

PROOF: You can this playground link - created an example for your understanding

Related Solutions

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

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
            },

[SalesForce] How to programatically add selected rows to a LWC datatable

You simply need to add the value to the list of selected values:

switch(action.name) {
    case 'select':
        let actionRow = this.mydata.find(row => rowData[this.keyfield] === keyValue);
        // Not already selected
        if(this.preSelectedIds.indexOf(actionRow[this.keyfield]) === -1) {
            this.preSelectedIds.push(actionRow[this.keyfield]);
            this.preSelectedIds = [...this.preSelectedIds];
        }
        actionRow.buttonDisabled = true;
        this.mydata = [...this.mydata];
}

Note the use of the spread syntax to duplicate the list to trigger @track and update the UI.

Best Answer

Related Solutions

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

[SalesForce] How to programatically add selected rows to a LWC datatable

Related Topic