Aquí hay un código de ejemplo para la clasificación de tablas tomado de javascript.info: https://plnkr.co/edit/5xHStBMfV5AVtoxR?p=preview&preview=
let sortedRows = Array.from(table.tBodies[0].rows).sort((rowA, rowB) => rowA.cells[0].innerHTML.localeCompare(rowB.cells[0].innerHTML));
table.tBodies[0].append(...sortedRows);
Mi pregunta es: Array.from(table.tBodies[0].rows) produce una matriz. Pero cells[0] no están definidas para matrices. ¿Cómo funciona el código?
La propiedad .rows de una tabla le proporciona una HTMLCollection de las filas de la tabla. Array.from convierte la HTMLCollection de filas en una matriz de filas.
Con
.sort((rowA, rowB) => rowA.cells[0] ...
Cada parámetro es uno de los elementos de la matriz que se itera, una fila, ni la fila A ni la fila rowB son la matriz que se Array.from rowA Son los elementos de la matriz, que son filas.
Los elementos de la matriz (que originalmente eran los elementos HTMLCollection) siguen siendo filas, y las filas tienen una propiedad .cells .
Su filaA es un TR, por lo que tendrá que usar celdas de búsqueda de él. Array.from simplemente convierte una colección HTML/NodeList en una matriz de elementos para que pueda usar métodos de matriz
let sortedRows = Array.from(table.tBodies[0].rows)
.sort((rowA, rowB) => {
const cellsA = rowA.querySelectorAll('td')
const cellsB = rowB.querySelectorAll('td')
return cellsA[0].innerHTML.localeCompare(cellsB[0].innerHTML)
});
table.tBodies[0].append(...sortedRows);
<table id="table">
<thead>
<tr><th>Name</th><th>Surname</th><th>Age</th></tr>
</thead>
<tbody>
<tr><td>John</td><td>Smith</td><td>10</td></tr>
<tr><td>Pete</td><td>Brown</td><td>15</td></tr>
<tr><td>Ann</td><td>Lee</td><td>5</td></tr>
<tr><td>...</td><td>...</td><td>...</td></tr>
</tbody>
</table>
Enfoque basado en datos:
const data = [
{ name: "John", surname: "Smith", age: 10},
{ name: "Pete", surname: "Brown", age: 15},
{ name: "Ann", surname: "Lee", age: 5},
]
const sortData = (key) => {
return data
.slice()
.sort((a,b) => {
return typeof a[key] === "string"
? a[key].localeCompare(b[key])
: a[key] - b[key]
});
}
const createTable = (data) => {
return data.map((item) => {
return `<tr>${
Object.values(item)
.map((value) => `<td>${value}</td>`)
.join("")
}</tr>`
}).join("").concat("<tr><td>...</td><td>...</td><td>...</td></tr>")
}
const renderTable = (data) => {
document
.getElementById('table')
.querySelector('tbody').innerHTML = createTable(data)
}
document
.querySelector('.actionPanel')
.addEventListener('click', (e) => {
const text = e.target.textContent.toLowerCase();
renderTable(sortData(text))
})
renderTable(data)
<div class='actionPanel'>
<button>Name</button>
<button>Surname</button>
<button>Age</button>
</div>
<table id="table">
<thead>
<tr><th>Name</th><th>Surname</th><th>Age</th></tr>
</thead>
<tbody></tbody>
</table>