Is there a way to have sortable headers on a table?

[homeofeconomy]

I have a directory of contact information in a table, which would benefit from sortable headers.  Is there a way to have the table include these?  I'm happy to buy a plugin if there's a good one available.

[Miss_B]

4 minutes ago, homeofeconomy said:

I have a directory of contact information in a table, which would benefit from sortable headers.  Is there a way to have the table include these?  I'm happy to buy a plugin if there's a good one available.

That table that you are talking about, is that from the pages or a database table?

[homeofeconomy]

2 hours ago, Miss_B said:

That table that you are talking about, is that from the pages or a database table?

It is from a Pages table.

[Marc]

There is nothing like that within the core platform at present

[The Old Man]

Hi @homeofeconomy

There may be a CKEditor plugin but you can accomplish this in Pages. You will need to add some code in the AdminCP Pages sections. This is based on a W3Schools example that I’ve previously used in Wordpress, but I’ve just tested it and it works fine in IPS.

Step 1: Create a new Page

First create a new Page in in AdminCP > Pages to host an example.

Go to Pages > Add Page  and choose With Page Builder and on the first tab give it a Page Name such as ‘Sortable Table Test’.
(You can leave all the other fields alone for now, perhaps allow it to be added to your Menu for convenience if you like.)
 

Step 2: Add the JS and some CSS

Next go to Pages Templates. 

Click new and choose CSS. Give it a name of sortable_tables (it will add the .js for you) and if you like choose to put it in a new category such as Sortable Tables.

You could let it inherit the current IPS theme stylings or make use of the IPS theme classes.

For now though, open the new blank template you created and copy and paste this CSS inside it:

/* CSS for tables*/
.responsive_table_wrapper {
  overflow-x: auto;
}
table.test {
  border: 1px solid #51c427;
  margin: 2% 0;
  padding: 0;
  text-align: left;
  vertical-align: middle;
  overflow-x: auto;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #51c427;
  color: #000;
}

/* For test table */
table.test caption {
  display: none;
}

Now do the same for a Javascript file called sortable_tables and then paste in the following code:

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  // Set the sorting direction to ascending:
  dir = "asc"; 
  /* Make a loop that will continue until
  no switching has been done: */
  while (switching) {
    // Start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /* Loop through all table rows (except the
    first, which contains table headers): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Start by saying there should be no switching:
      shouldSwitch = false;
      /* Get the two elements you want to compare,
      one from current row and one from the next: */
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* Check if the two rows should switch place,
      based on the direction, asc or desc: */
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          // If so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // If so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* If a switch has been marked, make the switch
      and mark that a switch has been done: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // Each time a switch is done, increase this count by 1:
      switchcount ++; 
    } else {
      /* If no switching has been done AND the direction is "asc",
      set the direction to "desc" and run the while loop again. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

Notice the ID of our table of myTable in the 3rd line of JS, this is important so we target the correct table! It must match the table ID name we’ll create next. Save the changes.
 

Step 3: Create a new Custom Block

Next create a new Pages Custom Block, this will hold the Sortable Table allowing you to position it where you like on the page, say between Rich Text Blocks.

Select the Manual and the HTML type of block, give it a name such as Sortable Table, leaving the other fields alone for now. In the Content tab, paste the following HTML code:

<h2>Sortable HTML Table</h2>
  <p>Based on <a href="https://www.w3schools.com/howto/howto_js_sort_table.asp" target="_blank" title="View the original example at W3Schools (new tab/window).">www.w3schools</a></p>

<div class="responsive_table_wrapper">
<table class="test" id="myTable">
<!-- When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by Company, 1 for sorting by Contact etc. -->
  <tr>
    <th onclick="sortTable(0)"><i class="fa fa-sort"></i> Company
</th>
    <th onclick="sortTable(1)"><i class="fa fa-sort"></i> Contact
</th> 
    <th onclick="sortTable(2)"><i class="fa fa-sort"></i> Country
</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td> 
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td> 
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
</div>

 

Save the block, in future once you are happy with it, you could opt to cache it.

Next we’ll edit the Page we created in the first step.
 

Step 4: Add the CSS and JS to the new page

Edit the file and select the Page Includes tab. Tick/Check to include both the Sortable Tables JS and CSS files created earlier so that they are loaded inside this page and click Save.
 

Step 5: Add the Custom Block to the page

Finally, click the Magic Wand button for the page and it will open up the Page Builder on the Sortable Table Test page.

Drag and drop a Pages Custom Block into your page. Select the Sortable Table block and exit the Page Builder (finish editing button).

Tip. When you refresh that page, it will open the Page Builder again, so instead click on the page name in the breadcrumbs and then you can reload the page as normal.

You’ll have something like this, just click or tap on the Table Headers to sort the columns:

 

Demo: https://invisionary.tech/sortable-table-test/

Hope this helps!

[homeofeconomy]

That is awesome!  I will go get working on this and will report back with success (or questions)!  Thanks a ton!

[homeofeconomy]

I ended up changing how I used this a little - instead of placing a sortable table as a block, I did the includes to the particular Pages wiki that holds our phone number articles, then modified the headers of the existing tables to include the bit of this that make it work.  It's perfect!  Thank you very much for the help!

[The Old Man]

That’s awesome, thanks for letting us know!