0

I'm using Jquery dataTable in a LWC component to load around 1500 records from Salesforce into the table. I'm using a SOQL query to fetch the records from SF and load them into the table. The data is received immediately without any lags, but it takes a few seconds for the dataTable to load the data. Is there any way I can improve the performance of the table so it loads the data quicker?

This is the first method in the JS controller of my lwc component that initializes the dataTable:

initializeDataTable() {
// get the table tag reference from html template using class
const table = this.template.querySelector(".tableCls");

// set table headers
const columnHeaders = [
  "ClassSection Id",
  "Course Name",
  "Course Type",
  "Term Name",
  "Term StartDate",
  "Term EndDate",
  "Instructor Name",
  "Meeting Date",
  "Start Time",
  "End Time",
  "Day",
  "Building Name",
  "Room Name"
];
// create html table header part
let columnHeaderHtml = "<thead> <tr>";
columnHeaders.forEach(function (header) {
  columnHeaderHtml += "<th>" + header + "</th>";
});
columnHeaderHtml += "</tr></thead>";
// set <thead> element inside table element
table.innerHTML = columnHeaderHtml;
// apply dataTable library to the table and store reference in a variable
this.dataTable = $(table).DataTable({
  paging: true,
  ordering: true
  //info: true,
  //filter: true
});}

And this is the 2nd method that loads the data into the dataTable:

updateDataTable(dataArray) {
console.log("data: ", dataArray);

if (this.dataTable) {
  this.dataTable.clear().draw();

  dataArray.forEach(function (item) {
    let tableRow = [
      item.Class_Schedule_Id__c,
      item.Course_Name__c,
      item.Course_Type__c,
      item.Term_Name__c,
      item.Term_Start_Date__c,
      item.Term_End_Date__c,
      item.Instructor_Name__c,
      item.Meeting_Date__c,
      item.Start_Time__c,
      item.End_Time__c,
      item.Day_of_Week__c,
      item.Building_Name__c,
      item.Room_Name__c
    ];

    this.dataTable.row.add(tableRow);
  }, this);

  this.dataTable.draw();
}}

In the component, first I call the initializeDataTable() method to initialize the dataTable. Then I make a SOQL query to a SF object, get an array of data from SF, and call the updateDataTable(dataArray) method and pass in that array.

And this is the representation of the dataTable in the LWC component:

enter image description here

4
  • Is there a reason not to use a standard Salesforce lightning datatable component?
    – Phil W
    Nov 1, 2023 at 22:21
  • That's because Jquery dataTable takes care of pagination and it also has a built-in search bar, and as I was asked to follow the no code/low code approach, I decided to use this. I assume that lightning-datatable doesn't support a search bar and pagination without coding. Please correct me if I'm wrong. Nov 1, 2023 at 22:40
  • Is this already in production? Just FYI : The datatable plugin, uses jquery which does a lot of DOM manipulation. When we tried to use this plugin couple of years back, as DOM manupulation was not much supported by locker services, we faced a lot of issues and developed something like this in LWC only. Nov 2, 2023 at 5:16
  • @NagendraSingh Thanks for your comment. I just finished working on this component. It's currently in the sandbox not prod. But because we wanted to avoid extra coding, we decided to use this plugin instead of lightning-datatable, as it's taking care of both pagination and search. Do you have any alternative idea? Nov 2, 2023 at 18:45

1 Answer 1

0

I think you can divide your data and display it in chunks. When you receive your data, split your data in 100 and remaining records. Display first only 100 records and when they scroll down keep on adding 100 records.

1
  • Thanks for your answer. The thing is that because I'm using the data Table built-in pagination, dataTable needs to have the total number of records. I don't know how I can handle it. I'll update my question with a screenshot of the table. Nov 1, 2023 at 22:32

You must log in to answer this question.

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