JSFiddle - React, Tailwind, and code Playground

by Igor Schnaider

HTML

<table>
    <thead>
        <tr>
            <th data-sort="string">Имя</th>
            <th data-sort="string">Фамилия</th>
            <th data-sort="number">Возраст</th>
            <th data-sort="string">Женат/Замужем</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Элла</td>
            <td>Журавель</td>
            <td>17</td>
            <td>нет</td>
        </tr>

        <tr>
            <td>Орест</td>
            <td>Мамедов</td>
            <td>52</td>
            <td>да</td>
        </tr>

        <tr>
            <td>Степан</td>
            <td>Шмидт</td>
            <td>30</td>
            <td>да</td>
        </tr>

        <tr>
            <td>Александр</td>
            <td>Соколов</td>
            <td>48</td>
            <td>да</td>
        </tr>

        <tr>
            <td>Карл</td>
            <td>Дидиченко</td>
            <td>24</td>
            <td>нет</td>
        </tr>

        <tr>
            <td>Серафима</td>
            <td>Куколевская</td>
            <td>27</td>
            <td>да</td>
        </tr>

        <tr>
            <td>Сусанна</td>
            <td>Борисова</td>
            <td>28</td>
            <td>нет</td>
        </tr>

        <tr>
            <td>Артур</td>
            <td>Баландин</td>
            <td>32</td>
            <td>нет</td>
        </tr>

        <tr>
            <td>Мария</td>
            <td>Савельева</td>
            <td>37</td>
            <td>да</td>
        </tr>

        <tr>
            <td>Мария</td>
            <td>Журавель</td>
            <td>34</td>
            <td>нет</td>
        </tr>

        <tr>
            <td>Трифон</td>
            <td>Трифонов</td>
            <td>19</td>
            <td>нет</td>
        </tr>

        <tr>
            <td>Трифон</td>
            <td>Трифонов</td>
            <td>19</td>
            <td>нет</td>
        </tr>

        <tr>
            <td>Ганна</td>
            <td>Фёдорова</td>
            <td>42</td>
           ...

CSS

:root {
    font-size: 16px;
}

table {
    width: 30rem;
}

thead {
    height: 2rem;
}

th {
    cursor: pointer;
}

th.up:after {
    content: '↑';
    margin-left: .25rem;
}

th.down:after {
    content: '↓';
    margin-left: .25rem;
}

td {
    padding: .25rem;
    border: 1px solid;
}

.b-paginator {
    margin-top: .5rem;
}

.b-paginator a {
    margin: 0 .15em;
}

.b-paginator .active {
    font-weight: bold;
}

JavaScript

var tableElem = document.querySelector('table');

var mySortTable = new SortTable();

mySortTable.init({
    table: tableElem,
    paginator: true,
    views: [5, 10],
    isReverseSort: false
});


/* SortTable */

// JSFiddle issue (?)
// var SortTable = function() {
function SortTable() {
    'use strict';

    var self = this
            , settings = { }
            , currentPage = 1
            , lastSortetPage
            , select
            , currentSelectOption
            , cachedTable = [ ]
            , cachedRows
            , sortType = 'string'
            , isReverseSort
            , lastColumnSorted
            , paginatorWrapper
            ;

    /**
     * Default settings */

    var defaults = {
        table: null,
        paginator: false,
        views: [2, 5, 10],
        columnSort: 0,
        isReverseSort: false
    };


    /**
     * Utility functions */

    var _cacheTable = function () {
        var _rows = settings.table.tBodies[0].rows;

        // IE8 not supported slice on NodeList
        // cachedTable = Array.prototype.slice.call( _rows );

        for (var i = 0, l = _rows.length; i < l; i++) {
            cachedTable.push( _rows[i] );
        }
    };


    var _getTableSlice = function () {
        if ( ! settings.paginator ) {
            return cachedTable;
        }

        var _rows = []
                , _pointer = (currentPage - 1) * currentSelectOption
                , _high = currentPage * currentSelectOption
                ;

        if ( _high > cachedTable.length ) _high = cachedTable.length;

        while ( _pointer < _high ) {
            _rows.push( cachedTable[_pointer].cloneNode(true) );
            _pointer++;
        }

        return _rows;
    };


    var _makeHead = function () {
        var _th = settings.table.tHead.rows[0].children;

        // Toggle
        // TODO (!)

        for (var i = 0, l = _th.length; i < l; i++) {
            if (i === lastColumnSorted) {
               ...