[SalesForce] What controls the sortDirection arrow in lightning-datatable

I have a lightning-datatable (lwc) that has a number of columns that are sortable. I'm tracking the sort direction of each column with a separate variable.

The sorting works great, including sortDirection — except that the sort arrow on every column always points up — even if the actual sort is DESC.

I can't figure out how to change that. What is the value that datatable uses to determine which arrow to display?

Here's my markup:

       <lightning-datatable
            key-field="id"
            data={responses}
            columns={columns}
            onsave={handleSave}
            draft-values={draftValues}
            onsort={handleSort}
            sorted-by={sortedBy}
            sorted-direction={sortedDirection}
            onrowselection={handleRowSelected}
            onrowaction={handleRowAction}
            show-row-number-column
            enable-infinite-loading
            onloadmore={handleLoadMore}>
        </lightning-datatable>

Best Answer

LWC (and Aura, Lightning, JavaScript, etc) is case sensitive. The allowed values are asc and desc. If you use the correct values, the arrows should appear in the correct direction.

Related Solutions

[SalesForce] Help with working with lightning:dataTable

Must have been user error... not sure what I did, but it works now. See code above in the question. And a screenshot. The code I showed is only for the nested table.

[SalesForce] Lightning DataTable onCellChange

As you would expect onCellChange actions are fired when a table cell's value changes in an inline edit. There's a good example of using this feature here

So, here is the setup you do in the component. Note the draftValues are there because that's what onCellChange actions return on inline edits.

<aura:attribute name="draftValues" type="Object" default="[]"/>
<aura:attribute name="mydata" type="Object"/>
<aura:attribute name="mycolumns" type="List"/>
<aura:attribute name="errors" type="Object" default="[]"/>
<aura:attribute name="saveLocalStorage" type="Boolean" default="false"/>

<lightning:datatable
errors="{! v.errors }"
draftValues="{! v.draftValues }"
data="{! v.mydata }" 
columns="{! v.mycolumns }" 
keyField="Id"
onsave="{! c.handleSave }"
oncellchange="{! c.handleEditCellChange}"
oncancel="{! c.handleCancel }"
onrowaction="{! c.handleRowAction }"
/>

the controller is pretty basic. It just calls the handler method

 handleEditCellChange: function(cmp, event, helper) {
    helper.handleEditCell(cmp, event);
  },

The helper has a bunch going on:

handleEditCell: function (cmp, event) {
    var saveLocalStorage = cmp.get('v.saveLocalStorage');
    if (saveLocalStorage) {
        var atomicChange = event.getParam('draftValues');
        var atomicChanges = cmp.get('v.atomicChanges');
        atomicChanges.push(atomicChange);
        cmp.set('v.changeIndex', atomicChanges.length);

        var draftValues = this.getBuildedDraftValues(atomicChanges, atomicChanges.length);

        localStorage.setItem('demo-draft-values', JSON.stringify(atomicChanges));
    }

    if (cmp.get('v.autoSaveEnabled')) {
        this.saveChanges(cmp, draftValues);
    }
},

Best Answer

Related Solutions

[SalesForce] Help with working with lightning:dataTable

[SalesForce] Lightning DataTable onCellChange

Related Topic