jsSortableTable

<!DOCTYPE html>
<html lang="en" id="html">

<head>
    <meta charset="UTF-8">
    <title>SortableTable</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: antiquewhite;
            font-family: sans-serif;
        }

        #container {
            display: flex;
            margin: auto;
            margin-top: 80px;
            align-items: center;
            justify-content: center;
            line-height: 40px;
            font-size: 26px;
            max-width: 50%;
        }

        table,
        th,
        td {
            border: 1px solid black;
        }

        table {
            border-collapse: collapse;
        }

        td,
        th {
            padding: 10px 30px;
        }
    </style>
</head>
<body>
    <div id="container" class="container">
    </div>

    <script>
        'use strict'

        class SortableTable {
            constructor(arr, containerId) {
                this._containerId = containerId;
                this._arr = arr
            }

            render() {
                let container = document.querySelector(`#${this._containerId}`);
                let table = document.createElement('table');
                table.id = `${this._containerId}Table`;
                let tbody = document.createElement('tbody');

                // create header
                let tr = document.createElement("tr");
                tr.addEventListener('click', this.onClick);
                tbody.append(tr);
                let columnId = 0;

                for (let headerName of this._arr[0]) {
                    let th = document.createElement("th");
                    th.textContent = headerName;
                    th.setAttribute('data-columnId', columnId++);
                    tr.append(th);
                }

                // create rows
                for (let i = 1; i < this._arr.length; ++i) {
                    tr = document.createElement("tr");
                    tbody.append(tr);

                    for (let it of this._arr[i]) {
                        let td = document.createElement("td");
                        td.textContent = it;
                        tr.append(td);
                    }
                }

                table.append(tbody);
                container.append(table);
            }

            onClick(event) {
                this.dir = !this.dir;
                const sortPos = this.dir ? 1 : -1;
                const sortNeg = this.dir ? -1 : 1;

                let table = event.target.closest('table')
                let rowsArr = Array.from(table.rows);
                let idx = event.target.dataset.columnid;

                let sortTable = rowsArr.slice(1).sort((a, b) => a.cells[idx].textContent > b.cells[idx].textContent ? sortPos : sortNeg);

                table.tBodies[0].append(...sortTable);
            }
        }

        {
            let itPersons = [
                ["Firstname", "Lastname", "Age", "Company"],
                ["Mark", "Zuckerberg", "41", "Facebook"],
                ["Larry", "Page", "38", "Google"],
                ["Timothy", "Cook", "57", "Apple"],
                ["Bill", "Gates", "62", "Microsoft"]
            ];

            let itPersonsTable = new SortableTable(itPersons, 'container');
            itPersonsTable.render();
        }
    </script>
</body>

</html>