You need to sign in to do that
Don't have an account?

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];
}
}
}
<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];
}
}
}
https://newstechnologystuff.com/2019/01/01/lightning-datatable-lazy-loading-with-inline-editing-and-actions/