When my sortablejs has an table of 2000+ records it gets realy slow and the page gives me the option to wait or close tab.
But this table is used by clients(in need of an good UX) so this cant happen to them.

I have the following code example:

var left = document.getElementById("left");
var right = document.getElementById("right");

generateTable(2000, left)
generateTable(10, right)

function generateTable(nOfRows, wrap) {
  var newTable = document.createElement("table"),
      tBody = newTable.createTBody(),
      nOfColumns = 5,
      row = generateRow(nOfColumns);

  tBody.classList.add("sortable");
  
  for (var i = 0; i < nOfRows; i++) {
    tBody.appendChild(row.cloneNode(true));
  }

  (wrap.hasChildNodes() ? wrap.replaceChild : wrap.appendChild).call(wrap, newTable, wrap.children[0]);
}

function generateRow(n) {
  var row = document.createElement("tr"),
      text = document.createTextNode("cell");

  for (var i = 0; i < n; i++) {
    row.insertCell().appendChild(text.cloneNode(true));
  }

  return row.cloneNode(true);
}


Sortable.create(document.getElementsByClassName('sortable')[0], {
  items: "tr",
  group: '1',
  animation: 100
});

Sortable.create(document.getElementsByClassName('sortable')[1], {
  items: "tr",
  group: '1',
  animation: 100
});

<!-- Latest Sortable -->
<script src="/[email protected]/Sortable.min.js"></script>

<div id="left"></div>
<div id="right"></div> 

When my sortablejs has an table of 2000+ records it gets realy slow and the page gives me the option to wait or close tab.
But this table is used by clients(in need of an good UX) so this cant happen to them.

I have the following code example:

var left = document.getElementById("left");
var right = document.getElementById("right");

generateTable(2000, left)
generateTable(10, right)

function generateTable(nOfRows, wrap) {
  var newTable = document.createElement("table"),
      tBody = newTable.createTBody(),
      nOfColumns = 5,
      row = generateRow(nOfColumns);

  tBody.classList.add("sortable");
  
  for (var i = 0; i < nOfRows; i++) {
    tBody.appendChild(row.cloneNode(true));
  }

  (wrap.hasChildNodes() ? wrap.replaceChild : wrap.appendChild).call(wrap, newTable, wrap.children[0]);
}

function generateRow(n) {
  var row = document.createElement("tr"),
      text = document.createTextNode("cell");

  for (var i = 0; i < n; i++) {
    row.insertCell().appendChild(text.cloneNode(true));
  }

  return row.cloneNode(true);
}


Sortable.create(document.getElementsByClassName('sortable')[0], {
  items: "tr",
  group: '1',
  animation: 100
});

Sortable.create(document.getElementsByClassName('sortable')[1], {
  items: "tr",
  group: '1',
  animation: 100
});

<!-- Latest Sortable -->
<script src="https://cdn.jsdelivr/npm/[email protected]/Sortable.min.js"></script>

<div id="left"></div>
<div id="right"></div> 

• javascript
• user-experience
• sortablejs

• a table of 2000+ records that's the real problem. Don't do that – Panagiotis Kanavos Commented Apr 1 at 9:39
• I've moved your code to a Stack Snippet, feel free to edit if anything is wrong. – StackByMe Commented Apr 1 at 10:20
• @PanagiotisKanavos good point but this is used in a matching system to match the clients from one system to another and easely drag drop match/switch between them using sortablejs these systems can exist for over 200 to 5000 clients and using paging UI is an option that was considered but alot of more work since the sorted data wil not be present anymore thus can not be saved. most data iss already pre sorted but this also makes small mistakes because of human error – oelimoe Commented Apr 1 at 11:51
• All the more reason to use paging or virtualization instead of adding 1950 invisible rows that can never be matched. It's OK to have an array with 2000 objects, but not OK to generate <tr>.....</tr> tags and all their content for the 1950 invisible objects. Most grids have a virtualization option – Panagiotis Kanavos Commented Apr 1 at 11:52
• all of the rows need to be present because they are used in an post mechenism (not everything is explained in the question but the problem i encountered is) so if you know a method that can always remember wat is done and at the end make the request for the 2000 rows that all need to be visualy checked if they are correct (there cant be clients not matched/transferred) so the next step can continue (transferring invoices per client) be my guest and give an method/code example that can do that – oelimoe Commented Apr 1 at 12:10

1 Answer 1

To fix this issue you need to change the animation setting to 0 of the sortable instance:

Sortable.create(document.getElementsByClassName('sortable')[0], {
  items: "tr",
  group: '1',
  animation: 0
});

Sortable.create(document.getElementsByClassName('sortable')[1], {
  items: "tr",
  group: '1',
  animation: 0
});

Related issue