Table Sort

Database Collection

We created one collection called Solar System. This collection includes details on the planets in the solar system.

Page Elements

We added the following elements:

• Table: displays information about the planets in the solar system. 

• Container box: for the table headings. We grouped all the heading texts into a single group that we'll use later in our code. In order to group items, select all the items and click the “Group Elements” button.

• Button: for clearing the sort.

Page Code

We declared a constant called columnObject that holds the columns of our table.

In our page code we have the following functions:

• updateTableRows: gets data from the collection and updates the table rows with this data. This function runs when the dataset is ready and loaded or when a header has been clicked.

• formatDate: formats the date field from the collection to our desired format.

• setHTML: sets the text and color of the heading. Headers that are clicked get a red color and also an up or down arrow added to their heading text, according to the order the data is sorted by (ascending or descending).

• setTableSortingEvents: defines the event handlers: Clicking a header event handler: when clicking a header the event handler loops through all headers and changes them to blue. It changes the clicked header to red and adds an up or down arrow to the heading text according to the sort direction (first click is ascending and if it is already sorted in ascending order it changes the sort to descending order). It then calls updateTableRows() to update the table with the correctly sorted data. Clicking the clear sort button event handler: changes all the headers to blue and removes the arrows from the heading texts.

• onReady: calls setTableSortingEvents() to create the event handlers, updates the table heading and calls updateTableRows() to get the initial solar system data.