How do I sort a UI table using a dropdown list?

Sorting a UI table using a dropdown list involves a combination of HTML, CSS, and JavaScript. Here's a breakdown of how to achieve this:

1. HTML Structure:

- Create an HTML table with a header row (<thead>) and a body (<tbody>). Each header cell should have a unique identifier (e.g., a data-sort attribute) to indicate which column to sort by.

- Add a dropdown list (<select>) with options corresponding to the table headers. Each option should have a value that matches the data-sort attribute of the corresponding header.

2. JavaScript Logic:

- Attach an event listener to the dropdown list's change event. When the user selects a new option, the event listener will trigger.

- Inside the event listener, get the selected value from the dropdown. This value will indicate which column to sort by.

- Retrieve all rows from the table body (<tbody>).

- Sort the rows based on the selected column. You can use the sort() method on an array of table rows. The sorting logic should compare the values in the specified column.

- After sorting, remove all existing rows from the table body and append the sorted rows back to the table.

3. Example HTML Structure:

<select id="sort-dropdown">
  <option value="name">Name</option>
  <option value="age">Age</option>
  <option value="city">City</option>
</select>
<table id="my-table">
  <thead>
    <tr>
      <th data-sort="name">Name</th>
      <th data-sort="age">Age</th>
      <th data-sort="city">City</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>30</td><td>New York</td></tr>
    <tr><td>Bob</td><td>25</td><td>London</td></tr>
    <tr><td>Charlie</td><td>35</td><td>Paris</td></tr>
  </tbody>
</table>

4. Example JavaScript Code:

document.addEventListener('DOMContentLoaded', function() {
  const dropdown = document.getElementById('sort-dropdown');
  const table = document.getElementById('my-table');
  const tbody = table.querySelector('tbody');

  dropdown.addEventListener('change', function() {
    const sortBy = this.value;
    const rows = Array.from(tbody.querySelectorAll('tr'));

    rows.sort((rowA, rowB) => {
      const cellA = rowA.querySelector(`td:nth-child(${Array.from(table.querySelectorAll('th')).findIndex(th => th.dataset.sort === sortBy) + 1})`).textContent;
      const cellB = rowB.querySelector(`td:nth-child(${Array.from(table.querySelectorAll('th')).findIndex(th => th.dataset.sort === sortBy) + 1})`).textContent;
      if (isNaN(cellA) || isNaN(cellB)) {
        return cellA.localeCompare(cellB);
      } else {
        return parseFloat(cellA) - parseFloat(cellB);
      }
    });

    tbody.innerHTML = '';
    rows.forEach(row => tbody.appendChild(row));
  });
});

5. Explanation:

- The JavaScript code first gets references to the dropdown and table elements.

- It adds an event listener to the dropdown's change event.

- When the dropdown value changes, it retrieves the selected value (e.g., 'name', 'age', 'city').

- It converts the table rows into an array and sorts them using the sort() method. The sorting logic compares the text content of the cells in the selected column.

- Finally, it clears the table body and appends the sorted rows back to the table.

This approach provides a flexible and user-friendly way to sort a UI table using a dropdown list. You can extend this logic to handle different data types and sorting orders.

Learn more about this