Objective

Construct a SortableTable class that creates an interactive table whereby the items could be sorted based on a particular field.

Difficulty

Hard

Description

In HTML DOM — Building Tables Exercise, you created an HTML table based on an array of items, each of which represented a row of the table, while the headings were obtained via the properties of these items.

Now, you have to take that idea a step further.

In this exercise, you have to create a SortableTable class that creates a sortable table based on a given array of items.

Here's what we mean by a 'sortable table':

Initially the table should be the same as it would be if it was implemented as a normal table (just as we did in HTML DOM — Building Tables Exercise). The main difference is that in a sortable table, all the headings (i.e. <th> elements) of the table are clickable.

When a given heading is clicked, the rows of the table are either sorted or returned to their original ordering based on the point at which the click is made and also depending on which column is clicked.

For instance, given the sortable table below,

NamePrice ($)
Orange juice2.30
Chocolate cookie1.00
Lemon tart1.50

suppose we click on the 'Price ($)' heading. The data would then get reorganized according to the price of each item, in ascending order, as follows:

NamePrice ($) ▴
Chocolate cookie1.00
Lemon tart1.50
Orange juice2.30

Such kinds of interactive tables are very common in apps that deal with tabular data. Sorting the data based on given fields is a really handy way of being able to view the data in a particular order and make more intuition out of it.

Following are a couple of things to abide by in your sortable table implementation:

  • On the very first click on a heading, the table should be reordered in ascending values of the corresponding field.
  • On the next click on the same heading, the table should be reordered in descending values of the corresponding field.
  • On the third click on the same heading, the table should return to its original order.
  • Clicking on any other heading apart from the one which was clicked previously (if any) should get the table to be reordered in ascending values of the corresponding field (of that recently-clicked heading). The previous order must be overridden.

In order to make it clear as to which heading is the table sorted by and in which order, also implement the following points:

  • Add the HTML entity symbol (you can copy this as normal text) next to the text of a heading if the table is sorted in ascending values of its corresponding field.
  • Add the HTML entity symbol next to the text of a heading if the table is sorted in descending values of its corresponding field.
  • If the table is in its original order, no such symbols should be visible.

Apart from this, the constructor of the SortableTable class must follow the signature shown below:

new SortableTable(data[, element])

data is the array of items to display in the form of an HTML table, while element is the element node inside which the table should be placed. As you can see, it must be optional, and default to the <body> element.

To get an even better idea of what you ought to create, take a look at the example below:

Live Example