Shimilbi/StableSortTable.js

## StableSortTable.js
var ascending = true
var lastFieldName = ''
function SortBy(arr, fieldName) {

  if (ascending) {
    arr.sort((p1, p2) => {
      if (p1[fieldName] < p2[fieldName]) return -1
      if (p1[fieldName] > p2[fieldName]) return 1
      return 0
    })
  }

  else if (!ascending) {
    arr.sort((p1, p2) => {
      if (p1[fieldName] > p2[fieldName]) return -1
      if (p1[fieldName] < p2[fieldName]) return 1
      return 0
    })
  }

  if (fieldName==lastFieldName)
  	if (ascending===true) ascending = false
    else ascending =true

  else
  	lastFieldName = fieldName

  return arr
}

function DisplayTable(arr, fieldName) {

  let sortedArray = SortBy(arr, fieldName)
  let line = '<tr><th>Name</th><th>Money</th></tr>'
  sortedArray.forEach(p => {
    line += '<tr><td>' + p.name + '</td><td>' + p.money + '</td></tr>'
  })
  document.querySelector('table').innerHTML = line

  document.querySelector('th').addEventListener('click', e => {
    DisplayTable(arr, e.target.textContent.toLowerCase())
  	e.target.innerHTML += ascending ? ' 🠹' : ' 🠻' // bug: this is skipped
  })

  document.querySelector('th + th').addEventListener('click', e => {
    DisplayTable(arr, e.target.textContent.toLowerCase())
  	e.target.innerHTML += ascending ? ' 🠹' : ' 🠻' // bug: this is skipped
  })
}

/**
For use like this:

<!DOCTYPE html>
<html>
<body>
  <h1>Persons</h1>
  <h2>(Stable Sort)</h2>
  <table></table>
</body>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    DisplayTable(<myArray>, '<myFirstFieldName>')
    document.querySelector('th').innerHTML += ' 🠻'
    document.querySelector('th + th').innerHTML += ''
  })
</script>
</html>
	var ascending = true
	var lastFieldName = ''
	function SortBy(arr, fieldName) {

	if (ascending) {
	arr.sort((p1, p2) => {
	if (p1[fieldName] < p2[fieldName]) return -1
	if (p1[fieldName] > p2[fieldName]) return 1
	return 0
	})
	}

	else if (!ascending) {
	arr.sort((p1, p2) => {
	if (p1[fieldName] > p2[fieldName]) return -1
	if (p1[fieldName] < p2[fieldName]) return 1
	return 0
	})
	}

	if (fieldName==lastFieldName)
	if (ascending===true) ascending = false
	else ascending =true

	else
	lastFieldName = fieldName

	return arr
	}

	function DisplayTable(arr, fieldName) {

	let sortedArray = SortBy(arr, fieldName)
	let line = '<tr><th>Name</th><th>Money</th></tr>'
	sortedArray.forEach(p => {
	line += '<tr><td>' + p.name + '</td><td>' + p.money + '</td></tr>'
	})
	document.querySelector('table').innerHTML = line

	document.querySelector('th').addEventListener('click', e => {
	DisplayTable(arr, e.target.textContent.toLowerCase())
	e.target.innerHTML += ascending ? ' 🠹' : ' 🠻' // bug: this is skipped
	})

	document.querySelector('th + th').addEventListener('click', e => {
	DisplayTable(arr, e.target.textContent.toLowerCase())
	e.target.innerHTML += ascending ? ' 🠹' : ' 🠻' // bug: this is skipped
	})
	}

	/**
	For use like this:

	<!DOCTYPE html>
	<html>
	<body>
	<h1>Persons</h1>
	<h2>(Stable Sort)</h2>
	<table></table>
	</body>
	<script>
	document.addEventListener('DOMContentLoaded', () => {
	DisplayTable(<myArray>, '<myFirstFieldName>')
	document.querySelector('th').innerHTML += ' 🠻'
	document.querySelector('th + th').innerHTML += ''
	})
	</script>
	</html>