To request editing rights on the Wiki, click here.

Help:Wiki University Wikitext--Tables - Sorting

From FamilySearch Wiki
Jump to navigation Jump to search

Lessons


Intermediate


Advanced


Flexbox


Additional Helps

Table sorting[edit | edit source]

Sorting.jpg

Sometimes tables can get really long and finding what you are looking for can be hard particularly if they are not in any kind of order such as alphabetical. To help with this we can use a "class"[1] called sorting. This will allow us to sort alphabetically any particular column.

  • It is placed in the beginning table tag like so:
{| class="sortable" style="border:1px solid red: width:100%...

  • You place the "class" before the inline style code.
  • The class has to have a space to separate it from inline style codes.

Here is a sample table with the sorting code added in the table tag.

Last Name First Name State
Wales Jonah Washington
Burns Forest Colorado
Still Stan Utah
Case Justin South Carolina
Nut Hazel New Hampshire


  • NOTICE small arrows pointing up and down have appeared alongside the headings. These arrows appear on the first row regardless of whether the row is a header row or regular row. In most cases, sorting tables will not have colored rows, but we did so here so you could see how the rows act when the sorting arrows are clicked.
  • When you click the arrows the first time you will see the columns arrange themselves in descending alphabetical order. Only a up pointing arrow remains.
  • If you click the up pointing arrow, the columns arrange themselves in reverse alphabetical order.

Rows stay together[edit | edit source]

  • PLEASE NOTICE CAREFULLY the items in the rows stay with the item in the column that you have alphabetically rearranged. It does not matter which column you click.

This is important. If you have a table of names and addresses, you will want the addresses to stay with the names if the names have been sorted. This sorting attribute allows you to add rows of data without having to worry about the order.

Html7.jpg

Be aware, when you leave the page where the sorting table appears, the order of items in the table reverts back to the original. The sorting only lasts as long as you have the page opened.

Try these out[edit | edit source]

Tests.gif
Exercises
  • Take our Healthy Foods table and add another row.
  • Now make the table sortable.


Quick Quiz
  • When you click the sorting icon, the sorting is permanent.
A. True
B. False
  • When you add items to a table, you need to insert the item in the table in alphabetical order even with the sorting class applied.
A. True
B. False
  • Sorting will revert back to the original order if you leave the page the table is on.
A. True
B. False
  1. Classes are mini-programs already created in wikitext. They perform certain functions which means we don't have to create the code ourselves. There are many classes which we will introduce from time to time.