function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
sammy cyborgsammy cyborg 

I am trying to implement the sorting functionality in a data table. Can you please help me out with this

Component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
                access="global"
                controller="fileViewerCtrl">
    <!--aura doInit handler--> 
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
 
    
    <!--aura attributes-->  
    <aura:attribute name="selectedDocumentId" type="string"/>
    <aura:attribute name="lstContentDoc" type="List"/>
    <aura:attribute name="hasModalOpen" type="boolean" default="false"/>
    <header>
            <h2>Global Post Incident Reports</h2>
        </header>
    <!-- Custom DataTable to Display List Of Available ContentDocuments Start-->  
        <table class="slds-table slds-table_cell-buffer slds-table_bordered">
        <thead>
            <tr class="slds-line-height_reset">
                <th class="slds-text-title_caps" scope="col">
                    <div class="slds-truncate" title="Title" onclick="{!c.sortbyTitle}">Title</div>
                </th>
                <th class="slds-text-title_caps" scope="col">
                    <div class="slds-truncate" title="File Type" onclick="{!c.sortbyFileType}">File Type</div>
                </th>
                <th class="slds-text-title_caps" scope="col">
                    <div class="slds-truncate" title="size" onclick="{!c.sortbySize}">size(bytes)</div>
                </th>
                 <th class="slds-text-title_caps" scope="col">
                    <div class="slds-truncate" title="Last Modified Date" onclick="{!c.sortbyLastModifiedDate}">Last Modified Date</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.lstContentDoc}" var="CD">
                <tr>
                    <th scope="row">
                        <div class="slds-truncate" title="{!CD.ContentDocument.Title}">
                            <!--store contentDocument Id in data-Id attribute-->
                            <a onclick="{!c.getSelected}" data-Id="{!CD.ContentDocument.Id}">{!CD.ContentDocument.Title}</a>
                        </div>
                    </th>
                    <th scope="row">
                        <div class="slds-truncate" title="{!CD.ContentDocument.FileType}">{!CD.ContentDocument.FileType}</div>
                    </th>
                    
                    <th scope="row">
                        <div class="slds-truncate" title="{!CD.ContentDocument.ContentSize}">{!CD.ContentDocument.ContentSize}</div>
                    </th>
                    <th scope="row">
                        <div class="slds-truncate" title="{!CD.ContentDocument.LastModifiedDate}">{!CD.ContentDocument.LastModifiedDate}</div>
                    </th>
                </tr>  
            </aura:iteration>
        </tbody>
    </table>
    <!-- Custom DataTable to Display List Of Available ContentDocuments End-->  
    <!--###### FILE PREVIEW MODAL BOX START ######--> 
    <aura:if isTrue="{!v.hasModalOpen}">
 <section onclick="{!c.closeModel}"
                 role="dialog"
                 aria-modal="true"
                 class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <div class="slds-modal__content slds-p-around_medium slds-text-align_center"
                     style="background: transparent;">
                    <div style="width: 50%; margin: 0 auto; text-align: left">
                        <!--<lightning:fileCard> to preview file using content document Id -->
                        <lightning:fileCard fileId="{!v.selectedDocumentId}"/>
                    </div>
                </div>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </aura:if>
    <!--###### FILE PREVIEW MODAL BOX END ######-->
    
</aura:component>

Controller:

({
    /*call apex controller method "fetchContentDocument" to get salesforce file records*/
    doInit : function(component, event, helper) {
        var action = component.get("c.fetchContentDocument");
         action.setParams({ clickedItem : 'PIR' });

        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set('v.lstContentDoc', response.getReturnValue());
            }
            else if (state === "INCOMPLETE") {
                // do something
            }
                else if (state === "ERROR") {
                    var errors = response.getError();
                    if (errors) {
                        if (errors[0] && errors[0].message) {
                            console.log("Error message: " + 
                                        errors[0].message);
                        }
                    } else {
                        console.log("Unknown error");
                    }
                }
        });
        $A.enqueueAction(action);  
    },
    getSelected : function(component,event,helper){
        // display model and set seletedDocumentId attribute with selected record Id   
        component.set("v.hasModalOpen" , true);
        component.set("v.selectedDocumentId" , event.currentTarget.getAttribute("data-Id")); 
        
    },
    closeModel: function(component, event, helper) {
        // for Close Model, set the "hasModalOpen" attribute to "FALSE"  
        component.set("v.hasModalOpen", false);
        component.set("v.selectedDocumentId" , null); 
    },
        sortByTitle: function(component, event, helper) {
        helper.sortBy(component, "Title");
    },
    sortByFileType: function(component, event, helper) {
        helper.sortBy(component, "FileType");
    },
        sortBySize: function(component, event, helper) {
        helper.sortBy(component, "Size");
    },
    sortByLastModifiedDate: function(component, event, helper) {
        helper.sortBy(component, "LastModifiedDate");
    }
    
})

Helper: 

({
    sortBy: function(component, field) {
        var sortAsc = component.get("v.sortAsc"),
            sortField = component.get("v.sortField"),
            records = component.get("v.lstContentDoc"),
            fieldPath = field.split(/\./),
            fieldValue = this.fieldValue;
        sortAsc = sortField != field || !sortAsc;
        records.sort(function(a,b){
            var aValue = fieldValue(a, fieldPath),
                bValue = fieldValue(b, fieldPath),
                t1 = aValue == bValue,
                t2 = (!aValue && bValue) || (aValue < bValue);
            return t1? 0: (sortAsc?-1:1)*(t2?1:-1);
        });
        component.set("v.sortAsc", sortAsc);
        component.set("v.sortField", field);
        component.set("v.lstContentDoc", records);
        this.renderPage(component);     
    },
    fieldValue: function(object, fieldPath) {
        var result = object;
        fieldPath.forEach(function(field) {
            if(result) {
                result = result[field];
            }
        });
        return result;
    },
    renderPage: function(component) {
        var records = component.get("v.lstContentDoc"),
            pageNumber = component.get("v.pageNumber"),
            pageRecords = records.slice((pageNumber-1)*10, pageNumber*10);
        component.set("v.currentList", pageRecords);
    }
})

fileViewerCtrl Apex Class:

public class fileViewerCtrl {
    @AuraEnabled 
    public static List<ContentWorkspaceDoc> fetchContentDocument(string clickedItem){
        if(clickedItem == 'PIR'){
            
            ContentWorkspace cw = [SELECT Id, RootContentFolderId FROM ContentWorkspace WHERE Name ='Global Post Incident Reports' LIMIT 1];
            
            return [SELECT Id , ContentDocumentId, ContentDocument.title,ContentDocument.FileType, ContentDocument.CreatedBy.Name, ContentDocument.ContentSize, ContentDocument.LastModifiedDate from ContentWorkspaceDoc where ContentWorkspaceId =: cw.Id LIMIT 1000];
            
        }
        else if(clickedItem == 'Release'){
            
             ContentWorkspace cw = [SELECT Id, RootContentFolderId FROM ContentWorkspace WHERE Name ='Release Deployment Plan' LIMIT 1];
            
            return [SELECT Id , ContentDocumentId, ContentDocument.title,ContentDocument.FileType, ContentDocument.CreatedBy.Name, ContentDocument.ContentSize, ContentDocument.LastModifiedDate from ContentWorkspaceDoc where ContentWorkspaceId =: cw.Id LIMIT 1000];              
        }
      else{
            
             ContentWorkspace cw = [SELECT Id, RootContentFolderId FROM ContentWorkspace WHERE Name ='PDR' LIMIT 1];
            
            return [SELECT Id , ContentDocumentId, ContentDocument.title,ContentDocument.FileType, ContentDocument.CreatedBy.Name, ContentDocument.ContentSize, ContentDocument.LastModifiedDate from ContentWorkspaceDoc where ContentWorkspaceId =: cw.Id LIMIT 1000];              
        }             
    }
}
Consultant Vinay BothraConsultant Vinay Bothra
Use OOB lightning:datatable 
Tushar sharmaTushar sharma
I have created one dynamic datatable component which you can use to get sorting, Dynamic action and many other features.

https://newstechnologystuff.com/2019/01/01/lightning-datatable-lazy-loading-with-inline-editing-and-actions/