JSFiddle - React, Tailwind, and code Playground

by letanure

HTML

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Lista ordenável</title>

</head>
<body>
    
   
    
    <div id="coluna">
        
        <div id="minhaLista" class="box_lista">
            <div class="box_lista_cabecalho">
                <div>Nome</div>
                <div>Assunto</div>
                <div>Quando</div>
            </div>
            <ol class="box_lista_conteudo">
                <li>
                    <a href="#">
                        <span>Tenderloin</span>
                        <span>Bresaola sirloin andouille shoulder pig bacon ground round jowl</span>
                        <span>09/02/2012 01:07</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>Capicola shoulder</span>
                        <span>Tip ground round pork chop cow</span>
                        <span>08/02/2012 18:34</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>Beef ribs</span>
                        <span>Beef ribs. Bresaola meatloaf chicken, flank shank kielbasa filet mignon </span>
                        <span>08/02/2012 17:50</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>Fatback short ribs/span>
                        <span>Sirloin pork loin.</span>
                        <span>07/02/2012 14:39</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>Pork chop boudin meatball</span>
                        <span>Sirloin strip steak shank, tri-tip ball tip prosciutto corned</span>
                        <span>06/02/2012 13:19</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>Shankle...

CSS

/**
 * CSS geral
 *
 */

* {
    font-family: inherit;
    font-size: 100%;
    background: transparent;
    outline: 0;
    margin: 0;
    padding: 0;
}
body{
    font-family: Arial, Helvetica, sans-serif;
    background-color: #fff;
    background-image: -webkit-linear-gradient(45deg, #dfdfdf 25%, transparent 25%, transparent 75%, #dfdfdf 75%, #dfdfdf), -webkit-linear-gradient(45deg, #dfdfdf 25%, transparent 25%, transparent 75%, #dfdfdf 75%, #dfdfdf);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}
#coluna{
    width:600px;
    margin:70px auto 20px auto;
    
    
}

#coluna  .desc{
    margin:30px 0 10px 0;
}

#testes{
    width:960px;
    margin: 0 auto;
    padding:20px;
    overflow:hidden;
    background:#999;
}
#testes .teste{
    width:200px;
    float:left;
    margin:0 20px;
}

/**
 * CSS da lista ordenavel    
 *
 */

.box_lista{
    color:#333;
    border:1px solid #ddd;
    border-top:none;
    -webkit-border-radius:3px; 
    -moz-border-radius:3px; 
    border-radius:3px;
    background-color:#fff;
    abackground-image:url(../instrucoes/maislidas.png);
    abackground-position:-9px -13px;
    abackground-repeat:no-repeat;
}
.box_lista_cabecalho{
    border-top:2px solid #ddd;
    border-bottom:1px solid #ddd;
    border-top-color:inherit;
    color:#333;
    text-transform:lowercase;
    font-size:17px;
    line-height:30px;
    padding:4px;
    margin:0;
    overflow:hidden;
}
.box_lista_cabecalho div{
    float:left;
    border-right:1px solid #ddd;
    width:100px;
    text-indent:10px;
    position:relative;
    cursor:pointer;
}
.box_lista_cabecalho div::after,
.box_lista_cabecalho .ordem_asc::after,
.box_lista_cabecalho .ordem_desc::after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    right: 10px;
    border: 8px solid transparent;
}
.box_lista_cabecalho div:hover::after        { top: 10px; border-color: #333 transparent transparent transparent; }
.box_lista_cabecalho .ordem_desc::after...

JavaScript

(function( $ ) {

    var listaOrdenavel = window.listaOrdenavel || {};
    
    listaOrdenavel = {
        
        config : {
            quantidade : 10,
            total : 0,
            quanPaginas : 0,
            elem: null,
            lista: null,
            cabecalho: null,
            dataHoje: new Date()
        }, // config
        
        dados : [],
        
        ordemAtual : [],
        
        init : function(elem){
            
            // Armazena o elemento
            this.config.elem = $(elem);
            this.config.lista = $(elem).find('.box_lista_conteudo');
            this.config.cabecalho = $(elem).find('.box_lista_cabecalho');
            
            //Armazena os dados da lista
            var item = [];
            var dataHoje = new Date();
            this.config.lista.find('li').each(function(i, e){
                listaOrdenavel.config.total++;
                $dadosSpan = $(e).find('span');
                // Data no formato js
                data = $dadosSpan.eq(2).text().replace(/^(\d{2})[\/\- ](\d{2})[\/\- ](\d{4})[\/\- ](\d{2})[:](\d{2})/, '$3 $2 $1 $4 $5').split(' ');                
                dataJS = new Date(data[0], data[1]-1, data[2], data[3], data[4]);
                item = {
                    'nome' : $dadosSpan.eq(0).text(),
                    'assunto' : $dadosSpan.eq(1).text(),
                    'data' : dataJS,
                }
                listaOrdenavel.dados.push( item );
                
            });
            
            // Armazena quantidade de paginas
            listaOrdenavel.config.quanPaginas = Math.ceil(listaOrdenavel.config.total/listaOrdenavel.config.quantidade);
            
            //Armazena a ordem inicial (paginação)
            listaOrdenavel.ordemAtual = listaOrdenavel.dados.slice(0);
            
            // Inicia ordenando por data
            listaOrdenavel.met.pagina(0)
        
            // Insere rodape
            this.config.elem.append(...