Can a Wappler table can be sorted by value?

Wappler General Need Help
1

Hi,

In Wappler, if I have a table showing data, can the user sort the rows by value?

E.g. I have a column “has_joined” (bool), it’s true or false, can the user sort the rows to see more easily?

P.S.: I’m using Bootstrap 5

2

You can by using a custom query

3

Oh, I need this fully client-side, the data doesn't come from a DB

4

Have you thought using a json file as data source?

5

From ChatGPT:

Yes :white_check_mark: — an HTML table with static values (hard-coded in the HTML, not generated dynamically) can be made sortable using JavaScript. The HTML itself does not support sorting, but you can attach a script to let users click on a column header and sort the rows.

Here’s a minimal example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sortable Table</title>
  <style>
    table {
      border-collapse: collapse;
      width: 60%;
      margin: 20px auto;
    }
    th, td {
      border: 1px solid #ccc;
      padding: 8px;
      text-align: left;
    }
    th {
      cursor: pointer;
      background: #f4f4f4;
    }
    th:hover {
      background: #ddd;
    }
  </style>
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th onclick="sortTable(0)">Name</th>
        <th onclick="sortTable(1)">Age</th>
        <th onclick="sortTable(2)">Country</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Anna</td><td>24</td><td>USA</td></tr>
      <tr><td>John</td><td>31</td><td>Canada</td></tr>
      <tr><td>Maria</td><td>28</td><td>Germany</td></tr>
      <tr><td>Mark</td><td>35</td><td>UK</td></tr>
    </tbody>
  </table>

  <script>
    function sortTable(n) {
      const table = document.getElementById("myTable");
      let rows, switching = true, dir = "asc", switchcount = 0;

      while (switching) {
        switching = false;
        rows = table.rows;

        for (let i = 1; i < rows.length - 1; i++) {
          let shouldSwitch = false;
          let x = rows[i].getElementsByTagName("TD")[n];
          let y = rows[i + 1].getElementsByTagName("TD")[n];

          let xContent = isNaN(x.innerHTML) ? x.innerHTML.toLowerCase() : Number(x.innerHTML);
          let yContent = isNaN(y.innerHTML) ? y.innerHTML.toLowerCase() : Number(y.innerHTML);

          if (dir === "asc" && xContent > yContent) {
            shouldSwitch = true;
            break;
          } else if (dir === "desc" && xContent < yContent) {
            shouldSwitch = true;
            break;
          }
        }

        if (shouldSwitch) {
          rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
          switching = true;
          switchcount++;
        } else if (switchcount === 0 && dir === "asc") {
          dir = "desc";
          switching = true;
        }
      }
    }
  </script>
</body>
</html>

I haven't tried but it seems like it can be done.

6

Just in case, it doesn't work directly, but you can use some data view component and dynamic attribute:

image
image326×849 18.2 KB

You can then use two select component: sort by/direction

7

Can you not do something via the app connect sort function appled to the data source?
Not enough detail to give definitive solution.

8

Thank you all, I managed to implement franse's solution, Teodor once said Data View is to grab a data source and perform client-side manipulation

I asked AI to create a sort button to put near the column name, created a variable to keep track of sort, and then on-click I make the Data View sort according to this variable

3 Likes
9

Yep this is how I’ve done it as well. SC→Data View→sort controlled by variables (or by action → data view → sort on calls). Then bind the table to the data view.

Works great 90% of the time. 10% of the time though, the sort is totally wonky/buggy (as of 6.8.0). I narrowed it down to when you attempt to sort on columns that are text (alphanumeric) AND the data has nulls. You’d think it would just sort nulls at the top or bottom, but no, it’s completely broken in this scenario. Something to stay keen on with this implementation.

10

This is a known feature which has been around since day 1 and is a performance mechanism. It has been extensively documented in the past.
The solutions is very simple, apply a default formatter to the column to add an empty string and it will sort correctly.

See Productivity Tips & Tricks

Tip 1

1 Like