0

I have a lightning-datatable that is defined so it can be sorted by a few different columns. This is the code:

<lightning-datatable
        lwc:if={data}
        key-field="id"
        data={data}
        columns={columns}
        onrowaction={handleRowAction}
        onsort={handleOnSort}
        sorted-by={sortBy}
        sorted-direction={sortDirection}
        column-widths-mode="auto"
        resize-column-disabled
        hide-checkbox-column>
</lightning-datatable>

This is the definition of the columns:

const COLUMNS = [
{label: 'Cultivo', fieldName: 'cultivo', fixedWidth: 150},
{label: 'Nro Comprobante', fieldName: 'numero'},
{label: 'Marca', fieldName: 'obtentor'},
{label: 'Comercio', fieldName: 'comercio'},
{label: 'Fecha Emisión', fieldName: 'fecha', type: 'date', sortable: true},
{label: 'Fecha Vencimiento', fieldName: 'fechaVencimiento', type: 'date', sortable: true},
{label: 'Importe USD', fieldName: 'total', type: 'currency', sortable: true},
{label: 'Saldo USD', fieldName: 'saldo', type: 'currency', sortable: true},
{label: 'Saldo ARS', fieldName: 'saldoArs', type: 'currency', sortable: true},
{type: 'button-icon', typeAttributes: {alternativeText: 'Ver Factura', iconName: 'utility:file', name: 'Ver', title: 'Ver'}},
{type: 'button', typeAttributes: {label: 'Pagar', name: 'Pagar', title: 'Pagar', disabled: {fieldName: 'disablePagar'}}},
{type: 'button', typeAttributes: {label: 'Informar Pago', name: 'Informar Pago', title: 'Informar Pago', disabled: {fieldName: 'disableInfPago'}}}
];

And the JS methods:

handleOnSort(event){
    this.sortBy = event.detail.fieldName;
    this.sortDirection = event.detail.sortDirection;
    console.log(this.sortBy, this.sortDirection);
    this.sortData();
}

sortData() {
    const parseData = JSON.parse(JSON.stringify(this.data));
    // Return the value stored in the field
    const keyValue = (a) => {
        return a[this.sortBy];
    };
    // cheking reverse direction
    const isReverse = this.sortDirection === 'asc' ? 1: -1;
    // sorting data
    parseData.sort((x, y) => {
        x = keyValue(x) ? keyValue(x) : ''; // handling null values
        y = keyValue(y) ? keyValue(y) : '';
        // sorting values based on direction
        return isReverse * ((x > y) - (y > x));
    });

    this.data = parseData;
} 

Both sortBy and sortDirection properties are tracked and have initial values. The data renderds correctly at first, I can click one of the sortable columns and it works but when I try to sort it again, it throws the following error:

enter image description here

I can't find what is wrong with my code.. is it a problem with the data itself? I don't get it. Thanks for the help!

2
  • please enable debug mode for the user to get which line is throwing this exception and in this browser log, you will be able to see not obfuscated code Commented Jan 8 at 14:59
  • @OleksandrBerehovskyi hey! I enabled LWC debug mode for the user, I just edited the post with the not obfuscated code. Thanks! Commented Jan 8 at 17:16

2 Answers 2

0

lwc:if/lwc:elseif/lwc:else does not work correctly when used on non-<template> tags. Change your code as follows:

<template lwc:if={data}>
    <lightning-datatable
        key-field="id"
        data={data}
        columns={columns}
        onrowaction={handleRowAction}
        onsort={handleOnSort}
        sorted-by={sortBy}
        sorted-direction={sortDirection}
        column-widths-mode="auto"
        resize-column-disabled
        hide-checkbox-column>
    </lightning-datatable>
</template>

The documentation does warn you of this limitation:

To render HTML conditionally, add the lwc:if|elseif={property} and lwc:else directive to a nested <template> tag that encloses the conditional content.

This is a change from if:true and if:false directives, which worked on any element.

1
  • I just changed every lwc:if I have to template tags and the error still occurs. Thank you for the input though! Commented Jan 8 at 17:10
0

The problem was a duplicate key field error in the datatable that wasn't showing in the console because I didn't have LWC debug mode enabled for that user. I changed the field used as key-field and the sorting works perfectly. Thank you @sfdcfox anyway for the information about lwc:if I'll have that in mind.

You must log in to answer this question.

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