JavaScript Sorting Guide: Arrays, Tables, and Drag & Drop with SortableJS

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction

JavaScript-based sorting functionality is extremely useful for dynamically managing data in tables and lists.
In this article, we comprehensively explain everything from JavaScript’s native sorting features to intuitive drag-and-drop sorting implementations.

By reading this article, you will be able to:

• Understand how to sort arrays using JavaScript’s standard features.
• Implement sorting functionality for HTML tables and lists.
• Implement drag-and-drop sorting using SortableJS.
• Acquire practical skills applicable to real-world projects through examples and use cases.

We will walk through each topic step by step, so be sure to follow along and try implementing the examples yourself.

2. Understanding JavaScript Native Sorting Features

2.1 Basic Sorting Methods

In JavaScript, you can easily sort array data using built-in sorting functionality.
This section explains everything from basic usage to advanced examples, complete with code samples.

String Sorting Example

const fruits = ["banana", "apple", "orange", "grape"];
fruits.sort();
console.log(fruits); 
// Output: ["apple", "banana", "grape", "orange"]

Numeric Sorting Example

const numbers = [40, 100, 1, 5, 25, 10];
numbers.sort((a, b) => a - b); // Ascending order
console.log(numbers); 
// Output: [1, 5, 10, 25, 40, 100]

When sorting numbers, it is important to use a comparison function.
Without it, values are sorted lexicographically (as strings), which can lead to unexpected results.

2.2 Advanced Examples Using Custom Comparison Functions

When sorting arrays of objects, you can sort based on a specific property.

Object Array Sorting Example

const users = [
  { name: "Yamada", age: 30 },
  { name: "Tanaka", age: 25 },
  { name: "Suzuki", age: 35 }
];

// Sort by age
users.sort((a, b) => a.age - b.age);
console.log(users);
/* Output:
[
  { name: "Tanaka", age: 25 },
  { name: "Yamada", age: 30 },
  { name: "Suzuki", age: 35 }
]
*/

As shown above, using a comparison function allows you to implement highly customized sorting logic.

2.3 Performance Optimization Tips

When working with large datasets, consider the following points:

1. Optimize comparison functions

• Avoid heavy computations inside comparison functions.

1. Reduce the amount of data being sorted

• Filter out unnecessary data before performing the sort.

1. Use Web Workers

• Run sorting operations in the background to improve overall performance.

3. Implementation Example: Sorting an HTML Table

3.1 Basic Table Sorting Functionality

Here, we will implement a feature in JavaScript that sorts HTML table data by clicking a column header.

HTML Code

<table id="data-table">
  <thead>
    <tr>
      <th onclick="sortTable(0)">Name</th>
      <th onclick="sortTable(1)">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Yamada</td><td>30</td></tr>
    <tr><td>Tanaka</td><td>25</td></tr>
    <tr><td>Suzuki</td><td>35</td></tr>
  </tbody>
</table>

JavaScript Code

function sortTable(columnIndex) {
  const table = document.getElementById("data-table");
  const rows = Array.from(table.rows).slice(1); // Exclude the header row

  rows.sort((rowA, rowB) => {
    const cellA = rowA.cells[columnIndex].innerText;
    const cellB = rowB.cells[columnIndex].innerText;

    // Detect whether values are numeric or strings, then sort accordingly
    return isNaN(cellA) || isNaN(cellB)
      ? cellA.localeCompare(cellB)
      : cellA - cellB;
  });

  // Re-render after sorting
  rows.forEach(row => table.tBodies[0].appendChild(row));
}

This is a simple implementation that lets you sort each column just by clicking.

3.2 Advanced Example Combined with Filtering

By combining sorting with filtering, you can also sort search results in real time.

JavaScript Code Example

document.getElementById("filter-input").addEventListener("input", (e) => {
  const filter = e.target.value.toLowerCase();
  const rows = document.querySelectorAll("#data-table tbody tr");

  rows.forEach(row => {
    const text = row.innerText.toLowerCase();
    row.style.display = text.includes(filter) ? "" : "none";
  });
});

This enables a feature where users can search and sort the data at the same time.

4. Drag-and-Drop Sorting with SortableJS

4.1 What Is SortableJS?

SortableJS is a JavaScript library that makes it easy to implement drag-and-drop reordering for HTML elements.
It has the following features:

• Intuitive drag-and-drop interactions.
• Highly customizable, and can be applied to lists and tables.
• Mobile-friendly, supporting touch-based operations.
• Lightweight with no dependencies, providing excellent performance.

4.2 Installing and Basic Setup for SortableJS

4.2.1 Installation Steps

Using a CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>

Using npm (for a Node.js environment)

npm install sortablejs

4.2.2 Basic Configuration

Using the following HTML and JavaScript code, you can implement drag-and-drop sorting.

HTML Code

<ul id="sortable-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

JavaScript Code

document.addEventListener("DOMContentLoaded", () => {
  const list = document.getElementById("sortable-list");
  new Sortable(list, {
    animation: 150, // Animation speed (milliseconds)
    ghostClass: "sortable-ghost" // Class applied to the element while dragging
  });
});

CSS (Optional)

.sortable-ghost {
  opacity: 0.5;
  background: #f0f0f0;
}

4.3 Advanced Example: Drag-and-Drop Between Multiple Lists

HTML Code

<div>
  <ul id="list1">
    <li>Item A</li>
    <li>Item B</li>
  </ul>
  <ul id="list2">
    <li>Item C</li>
    <li>Item D</li>
  </ul>
</div>

JavaScript Code

document.addEventListener("DOMContentLoaded", () => {
  const list1 = document.getElementById("list1");
  const list2 = document.getElementById("list2");

  new Sortable(list1, {
    group: "shared", // Set the group name
    animation: 150
  });

  new Sortable(list2, {
    group: "shared", // Use the same group name
    animation: 150
  });
});

5. Comparison Table: Third-Party Libraries vs Native Implementation

5.1 Comparison Table

5.2 When Native Implementation Is the Best Choice

Advantages

1. No dependencies, so no external libraries are required.
2. Quick to implement with short code, ideal for simple sorting features.
3. High performance, suitable even for large datasets.

Disadvantages

• No drag-and-drop support, requiring additional work for visual interaction.
• Advanced customization or multi-list support requires extra implementation or libraries.

Use Cases

• When you need to sort static HTML tables or arrays.
• Projects that prioritize performance and minimal functionality.

5.3 When SortableJS Is the Best Choice

Advantages

1. Built-in drag-and-drop for intuitive visual interaction.
2. Supports multi-list movement and server synchronization.
3. Mobile-ready by default, including touch support.
4. Highly customizable and well-suited for production environments.

Disadvantages

• Requires adding a library, slightly increasing project size.
• Code complexity can increase, resulting in a higher learning cost.
• Potential dependency or configuration issues in certain environments.

Use Cases

• When you need dynamic lists or drag-and-drop functionality.
• UI designs that require moving items between multiple lists or saving order in real time.

6. Implementation Tips and Troubleshooting

6.1 Performance Optimization

1. Handling Large Data Sets

Sorting large datasets may lead to performance degradation.

Solutions

• Use virtual scrolling

const visibleItems = items.slice(startIndex, endIndex);
renderItems(visibleItems);

• Leverage asynchronous processing
  Run sorting logic in Web Workers to keep the UI responsive.

2. Minimize DOM Operations

Sorting often involves frequent DOM manipulation, so reducing unnecessary reflows is critical.

Solution

• Use DocumentFragment

const fragment = document.createDocumentFragment();
rows.forEach(row => fragment.appendChild(row));
table.appendChild(fragment);

6.2 Improving Accessibility and Usability

1. Keyboard Navigation Support

Provide keyboard alternatives for users who cannot use drag-and-drop.

Solution

document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowUp') {
    moveItemUp();
  } else if (e.key === 'ArrowDown') {
    moveItemDown();
  }
});

2. Visual Feedback Enhancements

Add visual cues to clearly indicate sorting actions.

CSS Example

.sortable-ghost {
  opacity: 0.5;
  border: 2px dashed #007BFF;
}

6.3 Error Handling and Debugging Guide

1. Error: Sorting Does Not Work

Cause 1: Incorrect selector

const list = document.getElementById("sortable-list");
if (!list) {
  console.error("Element not found. Please check the ID.");
}

Cause 2: Event conflicts

list.removeEventListener('click', handler);

6.4 Troubleshooting Checklist

1. Check JavaScript errors in the console

• Use the developer tools Console tab to identify issues.

1. Verify data formats

• Validate data structures used in sorting and server communication.

1. Confirm library versions

• Ensure all libraries and dependencies are up to date.

7. Frequently Asked Questions (FAQ)

Q1: Why does the table sorting feature not work?

A1: Please check the following points.

1. Incorrect selector

const table = document.getElementById("data-table");

2. Distinguishing between numbers and strings

rows.sort((a, b) => Number(a) - Number(b));

3. Event conflicts
   Other JavaScript code or plugins may be attaching events to the same elements.

Q2: Drag-and-drop does not respond. What should I do?

A2: Check the following items.

1. Confirm SortableJS is loaded

console.log(Sortable);

2. Verify the HTML structure

<ul id="sortable-list">
  <li>Item 1</li>
</ul>

3. Check mobile support settings

new Sortable(list, {
  touchStartThreshold: 5
});

4. Incorrect group configuration

group: "shared"

Q3: How can I save the sorted order to the server?

A3: Server synchronization can be easily implemented using AJAX.

JavaScript Example

const list = document.getElementById("sortable-list");
new Sortable(list, {
  animation: 150,
  onEnd: function () {
    const items = Array.from(list.children).map(item => item.innerText);
    fetch("/save-order", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ order: items })
    })
    .then(response => response.json())
    .then(data => console.log("Saved successfully:", data))
    .catch(error => console.error("Error:", error));
  }
});

Q4: How can I improve performance?

A4: Consider the following approaches.

1. Use virtual scrolling

const visibleItems = items.slice(startIndex, endIndex);
renderItems(visibleItems);

2. Use Web Workers
   Process data in the background to improve UI responsiveness.
3. Optimize sorting logic

rows.sort((a, b) => a - b);

Q5: Can sorting be combined with additional features?

A5: Yes, it can be easily extended as shown below.

1. Combine with real-time filtering

document.getElementById("search").addEventListener("input", (e) => {
  const value = e.target.value.toLowerCase();
  document.querySelectorAll("#sortable-list li").forEach(item => {
    item.style.display = item.innerText.toLowerCase().includes(value) ? "" : "none";
  });
});

2. Add and remove items dynamically

function addItem(text) {
  const list = document.getElementById("sortable-list");
  const li = document.createElement("li");
  li.textContent = text;
  list.appendChild(li);
}

function removeItem(index) {
  const list = document.getElementById("sortable-list");
  list.removeChild(list.children[index]);
}

8. Conclusion

8.1 Article Recap

1. JavaScript Native Sorting

• Learned basic sorting techniques using Array.prototype.sort().
• Covered object array sorting with comparison functions and performance optimization strategies.

2. HTML Table Sorting

• Introduced practical examples for sorting table data by column.
• Explored advanced use cases combined with filtering functionality.

3. Drag-and-Drop with SortableJS

• Implemented intuitive drag-and-drop sorting using SortableJS.
• Learned flexible approaches including multi-list movement and server synchronization.

4. Native vs SortableJS Comparison

• Compared strengths and use cases to help select the best approach for each project.

5. Troubleshooting and FAQ

• Provided solutions for common issues and tips for improving performance and reliability.

8.2 Practical Next Steps

Sorting functionality is a key component for improving dynamic UIs and data management.
Keep the following points in mind as you move forward.

1. Start with simple implementations, then explore advanced use cases
2. Experiment with customizing the code
3. Master error handling and debugging techniques
4. Continuously improve performance and usability

8.3 Take Action

1. Try implementing it yourself!

• Apply the code examples from this article to your own projects and test them in practice.
• Sharing your source code on GitHub and exchanging feedback with other developers is also recommended.

2. Keep improving your skills!

• If you want to learn more about sorting features, refer to the following official resources:
• SortableJS Official Documentation
• MDN Web Docs – Array.sort()

3. Check related articles

• We also recommend articles on “Implementing JavaScript Filtering” and “Fundamentals of DOM Manipulation”.

8.4 Final Thoughts

Sorting functionality is essential for organizing data and improving user experience.
Use the techniques introduced in this article to enhance your projects.

If you have questions about implementing new features or extending these examples,
feel free to reach out via the comment section or contact form.

The next step is in your hands—start experimenting with the code today!