HTML table sort

Question

So basically I am running a mysql query that fetches data from my database and displays it in an easy to read layout for my users.

Name-----Address----Sales          


        

Answer 1

Flexbox-based tables can easily be sorted by using flexbox property "order".

Here's an example:

function sortTable() {
  let table = document.querySelector("#table")
  let children = [...table.children]
  let sortedArr = children.map(e => e.innerText).sort((a, b) => a.localeCompare(b));

  children.forEach(child => {
    child.style.order = sortedArr.indexOf(child.innerText)
  })
}

document.querySelector("#sort").addEventListener("click", sortTable)

#table {
  display: flex;
  flex-direction: column
}

  
Melissa
  
Justin
  
Judy
  
Skipper
  
Alex

 sort 

Explanation

The sortTable function extracts the data of the table into an array, which is then sorted in alphabetic order. After that we loop through the table items and assign the CSS property order equal to index of an item's data in our sorted array.