JavaScript: Table sorting

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:

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