1
resposta

Como eu poderia fazer para ordenar a tabela?

Eu gostaria de saber como eu poderia ordenar a tabela, de forma de que o click captura posso ser usado para saber por qual coluna quero ordenar? poderia exemplificar essa situação?

1 resposta

Fala Felipe, tudo bem ?

Você poderia pensar em algo assim ... ter suas colunas de título com alguma forma de identificação, bem como o corpo de uma tabela. Exemplo:

<table>
    <thead>
        <tr>
            <th class="titleColumn">Id</th>
            <th class="titleColumn">Nome</th>
        </tr>
    </thead>
    <tbody class="tableBody">
        <tr>
            <td>1</td>
            <td>Felipe</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Rafael</td>
        </tr>
    </tbody>
</table>

A partir daí adicionar o evento de click em cada um dos títulos de coluna. Exemplo de evento de clique que mostra no console o conteudo textual de cada elemento de th:

<script>
    var columns = document.querySelectorAll('.titleColumn');

    columns.forEach(c => c.addEventListener("click", (event) => {
        console.log(event.target.textContent)
    }))
</script>

A partir daí ao invés de imprimir a informação das ths no console, você poderia chamar uma função que ordena passando o título da coluna selecionada.

<script>
    // ordena dado um criterio
    var sortBy = (criteria) => {

        // aqui você seleciona as trs do tableBody
        // var trs = document.querySelectorAll('.tableBody tr');

        // e pode applicar qualquer algoritmo de ordenação no array de trs retornado, inclusive o proprio .sort() do Array JavaScript
        // Dê uma olhada aqui https://www.w3schools.com/js/js_array_sort.asp

        // apos ter o array ordenado você pode selecionar novamente o tableBody e adicionar as trs em ordem na propriedade .innerHTML do tbody
        // algo como tbody.innerHTML = seu conteúdo html (trs ordenadas) 
    }

    var columns = document.querySelectorAll('.titleColumn');

    columns.forEach(c => c.addEventListener("click", (event) => {
        var columnTitle = event.target.textContent;
        sortBy(columnTitle);
    }))

</script>

Dê uma pesquisada em ordenação. Isso se você quiser escrever totalmente essa lógica. Na prática em projetos utilizaríamos alguma lib JavaScript que já trouxesse o componente pronto, como por exemplo a lib: http://tablesorter.com/docs/

Espero ter ajudado no pensamento.

Abraço!