Sort table by two columns vanilla js

Question

How can i sort my table by two columns ( Name, Available) on page load? I can use vanilla js

        <table class="table_sort">
    <thead>
    <tr>
        <th class="sorted-asc">Name</th>
        <th>Genre</th>
        <th>Publish year</th>
        <th>Quanity</th>
        <th class="available">Available</th>
    </tr>
    </thead>

    <tbody id="tbody">
    <tr>
        <td>aname1</td>

        <td>genre1</td>

        <td>year1</td>
        <td>quantity1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>name1</td>

        <td>genre1</td>

        <td>year1</td>
        <td>quantity1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>aname1</td>

        <td>genre1</td>

        <td>year1</td>
        <td>quantity1</td>
        <td>10</td>
    </tr>
    <tr>
        <td>aname1</td>

        <td>genre1</td>

        <td>year1</td>
        <td>quantity1</td>
        <td>6</td>
    </tr>

    </tbody>
</table>

I try to sort my table by two columns: Name, Available but it does not work.

    document.addEventListener('DOMContentLoaded', () => {
const table = document.querySelector('.table_sort');
const indexToSorting = [...table.tHead.rows[0].cells].findIndex(cell => cell.classList.contains('sorted-asc'));
const availableIndexes = [...table.tHead.rows[0].cells].findIndex(cell => cell.classList.contains('available'));
const sortedRows = [...table.tBodies[0].rows].sort((rowA, rowB) => {
    let cellC;
    let cellD;
    const sortedRowsByAvailable = [...table.tBodies[0].rows].sort((rowC, rowD) => {
        cellC = rowC.cells[availableIndexes].innerText;
        cellD = rowD.cells[availableIndexes].innerText;
        const availableComparison = cellC.localeCompare(cellD);
        return availableComparison;

    });
    const cellA = rowA.cells[indexToSorting].innerText;
    const cellB = rowB.cells[indexToSorting].innerText;
    const nameComparison = cellA.localeCompare(cellB);
    return nameComparison !== 0 ? nameComparison : sortedRowsByAvailable
});

table.tBodies[0].append(...sortedRows);

});

My table is sorted by name, but i need to sort it by columns: name, available. Where is my mistake? I don't understand, please, help me

Does this answer your question? [Sorting an Array of Objects by two Properties](https://stackoverflow.com/questions/10153846/sorting-an-array-of-objects-by-two-properties) — jabaa, Jan 23 '22 at 20:30

Alikhan Oitan · Answer 1 · 2022-01-24T16:10:07.620

0

TBH, I didn't understand why you did cellA - cellB, but you need to add a comparison for Available cells in case cellA and cellB are equal.


const rowAAvailable = rowA.cells[indexToSorting].innerText;
const rowBAbailable = rowB.cells[indexToSorting].innerText;
const nameComparison = cellA.localeCompare(cellB);
const availableComparison = rowAAvailable.localeCompare(rowBAbailable); // sorry for terrible naming, but you get the idea
return nameComparison !== 0 ? nameComparison : availableComparison

This will sort your table by name as the first priority and available the second one.

edited Jan 24 '22 at 16:10

answered Jan 23 '22 at 20:35

Alikhan Oitan

53
10

I edited question. Can you please check if this is correct – kmj Jan 23 '22 at 20:54
i have error: "condition is always true since type this and number have no overlap" const sortedRows=sortedRowsByName !== 0 ? sortedRowsByName : sortedRowsByAvailable – kmj Jan 23 '22 at 20:55
@kmj you have to use the comparison I wrote in the same sort, not in a separate one. – Alikhan Oitan Jan 24 '22 at 07:12
i edited question, but it does not work – kmj Jan 24 '22 at 09:06
it sorts by name – kmj Jan 24 '22 at 09:11
you don't need another sort. just change the return in your sort to the one I wrote – Alikhan Oitan Jan 24 '22 at 13:18
but how can i get cellC and cellD? – kmj Jan 24 '22 at 15:12
edited the answer. Pls look to the code part. – Alikhan Oitan Jan 24 '22 at 16:10

Sort table by two columns vanilla js

1 Answers1