Javascript: Table sorting

JS: Frontend architecture
Last update: 22 Jan 23:20
0
Students

In this exercise, you will implement the grid. In interfaces, this is the name of a list displayed in a tabular form and allowing you to perform various actions on it, for example, sorting.

As data, you need to take the document.location object, which contains information about the browser. Incomplete output example:

Name (Asc) Value (Unsorted)
host localhost
pathname /

You only need to display those properties that satisfy the conditions:

  • Not functions
  • Not objects
  • Not empty

By default, the output is in alphabetical order by property name. This order can be changed by clicking on the heading. If there is a click on another column, then sorting by it occurs (in ascending order). Clicking again changes the sort order. If the comparison reveals that the values are the same, the order of the rows is determined by sorting by the next colum.

<div class="container m-3">
    <table class="table">
        <tbody>
            <tr>
                <th><a href="">Name (Asc)</a></th>
                <th><a href="">Value (Unsorted)</a></th>
            </tr>
            <tr>
                <td>host</td>
                <td>localhost</td>
            </tr>
            <tr>
                <td>hostname</td>
                <td>localhost</td>
            </tr>
            <tr>
                <td>href</td>
                <td>http://localhost/</td>
            </tr>
            <tr>
                <td>origin</td>
                <td>http://localhost</td>
            </tr>
            <tr>
                <td>pathname</td>
                <td>/</td>
            </tr>
            <tr>
                <td>protocol</td>
                <td>http:</td>
            </tr>
        </tbody>
    </table>
</div>

Next to each heading, in brackets, is the status of the column. There are three in total:

  • Not sorted
  • Direct
  • Reverse

Sorting can only be done on one column at a time.

src/application.js

Export the default function that implements all the required logic. Texts must be provided through the i18next library.

Hints

  • String comparison localeCompare
  • Translations can be nested: I18n.t('key', { value: I18n.t('another key') })
  • All the properties of an object (including inherited) can be got through a loop for..in

For full access to the challenge you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests