How to sort an HTML table?

Question

I am not at all an HTML expert. I program microcontrollers and got off onto a tangent.

I created an html doc to show a table of microcontroller registers, register addresses and register descriptions. I created a table with 3 columns - and about 120 rows. Some of the register addresses are bit addressable - if their addresses end in 0 or 8.

I wanted to highlight these 'special' register addresses - by showing them in red. So, in the table cells with a register address ending in 0 or 8, I use "" and "" to surround the address value.

My table has 3 columns, Register, Address, and Description. Then one row might look like

"ACC 0xE0 Accumulator".

I got my table all done and it looks great. Then I got the idea that I want to be able to sort the table on any column. For example, if I click on "Address" I want the table to re-display and sort by the values in that column.

I searched, and found a way to do it. It works by having a "sort" button - click on that and it re-displays sort on the first column values. I implemented a simple version of it and got it working. I then changed it to instead sort on the second column when the "sort" button was clicked.

That didn't exactly work .... because of all those "" whatevers.

The example I copied from his here:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table

Is there anything 'simple' I can do to use this method - but still be able have certain entries in the Address column be shown red ?

I should probably stick to programming microcontrollers, but I like a challenge.

Answer 1

sample code for sort on a selected column,
that's free...

const
  myButtonSort  = document.querySelector('#my-button-sort')
, colSelector   = document.querySelector('#sel-col')
, myTable_tBody = document.querySelector('#my-table > tbody')
  ;
myButtonSort.onclick = _ =>
  {
  let col = parseInt(colSelector.value ); 
  [...myTable_tBody.querySelectorAll('tr')]
    .map(row=>({row, str:row.cells[col].textContent }))
    .sort((a,b)=>a.str.localeCompare(b.str))
    .forEach(el=>
      {
      myTable_tBody.appendChild(el.row)
      })
  }

table  {
  border-collapse : collapse;
  margin          : 2em 1em;
  }
td,th  {
  padding    : .2em .8em;
  border     : 1px solid darkblue;
  }
thead {
  background : lightseagreen ;
  }

<select id="sel-col">
  <option value="0">column x</option>
  <option value="1">column y</option>
</select>

<button id="my-button-sort">sort</button>

<table id="my-table">
  <thead>
    <tr> <th>x</th> <th>y</th> </tr>
  </thead>
  <tbody>
    <tr> <td>aa</td><td> 1 </td></tr>
    <tr> <td>zz</td><td> 2 </td></tr>
    <tr> <td>ee</td><td> 3 </td></tr>
    <tr> <td>cc</td><td> 4 </td></tr>
  </tbody>
</table>

Ascending and descending sort example:

const myArray = 
  [ { worth: '100',  name: 'jessca', reason: 'money', email: 'j@gmail.com',  number: '4456',  instagram: 'hvg_ujh', tiktok: 'hhgh.thg' } 
  , { worth: '265',  name: 'e',      reason: 'money', email: 'e@gmail.com',  number: '3456',  instagram: 'hvg_ujh', tiktok: 'hhgh.thg' } 
  , { worth: '6000', name: 'ssica',  reason: 'sex',   email: 's@gmail.com',  number: '0456',  instagram: 'hvg_ujh', tiktok: 'hhgh.thg' } 
  , { worth: '855',  name: 'sica',   reason: 'sex',   email: 'ss@gmail.com', number: '9456',  instagram: 'hvg_ujh', tiktok: 'hhgh.thg' } 
  , { worth: '8679', name: 'ica',    reason: 'sex',   email: 'i@gmail.com',  number: '0756',  instagram: 'hvg_ujh', tiktok: 'hhgh.thg' } 
  , { worth: '1',    name: 'ca',     reason: 'money', email: 'c@gmail.com',  number: '14856', instagram: 'hvg_ujh', tiktok: 'hhgh.thg' } 
  ] 
const
  t_Head      = document.querySelector('#myTable thead')
, t_Head_THs  = document.querySelectorAll('#myTable thead tr th')
, th_list     = [...t_Head_THs].map( TH => TH.dataset.column)
, t_Body      = document.querySelector('#myTable tbody')
, sortOrder   = [ 'none' ,'asc', 'desc' ]
, sortType    = { worth: 'num', name:'str', reason:'str', email:'str', number:'num', instagram:'str', tiktok:'str' }
, sortProcess =
  { 'asc:num'  : (a,b) => +a.str - +b.str
  , 'desc:num' : (a,b) => +b.str - +a.str
  , 'asc:str'  : (a,b) => a.str.localeCompare(b.str)
  , 'desc:str' : (a,b) => b.str.localeCompare(a.str)
  };
myArray.forEach( row =>
  {
  let TR = t_Body.insertRow()
  for (col of th_list)
    TR.insertCell().textContent = row[col] 
  })
t_Head.onclick = ({target}) =>
  {
  if (!target.matches('th')) return
  
  let
    dataOrder = sortOrder[(sortOrder.indexOf(target.dataset.order) +1 )% sortOrder.length]
  , dataType  = sortType[target.dataset.column]
    ;
  t_Head_THs.forEach( TH => { TH.dataset.order = (TH===target) ? dataOrder : 'none' })

  if (dataOrder !== 'none')
    {
    [...t_Body.querySelectorAll('tr')]
    .map     ( row => ({row, str:row.cells[target.cellIndex].textContent }))
    .sort    ( sortProcess[`${dataOrder}:${dataType}`])
    .forEach ( elm => t_Body.appendChild(elm.row ))
    }
  }

body { 
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  }
table {
  border-collapse  : separate;
  border-spacing   : 1px;
  background-color : darkblue;
  margin           : 1em; 
  }
th, td {
  border     : none;
  background : whitesmoke;
  padding    : .3em .4em;
  }
th {
  background-color : #76ced1;
  white-space      : nowrap;
  cursor           : pointer;
  }
th::before {
  content        : attr(data-column) ' ';
  text-transform : capitalize;
  }
th[data-order=asc]::after  { content : '\25B2'; }
th[data-order=desc]::after { content : '\25BC'; }
th[data-order=none]::after { content : '\25B2'; color:transparent; }  /* get the same width */

<table  id="myTable">
  <thead>
    <tr>
      <th data-column="worth"     data-order="none"></th>
      <th data-column="name"      data-order="none"></th>
      <th data-column="reason"    data-order="none"></th>
      <th data-column="email"     data-order="none"></th>
      <th data-column="number"    data-order="none"></th>
      <th data-column="instagram" data-order="none"></th>
      <th data-column="tiktok"    data-order="none"></th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Answer 2

This might get you started:

const table = document.getElementById("test"),
      th = test.querySelectorAll("th"),
      sortDefault = 0, //default sorted column number
      orderDefault = 0; //default order: 0 = ascending, 1 = descending

table.dataset.sort = sortDefault;
table.dataset.order = orderDefault;

/* add click listeners on table headers */
for(let i = 0; i < th.length; i++)
{
  th[i].addEventListener("click", e =>
  {
    /* if this column was sorted, change it's order */
    if (+table.dataset.sort == e.target.cellIndex)
      table.dataset.order = +table.dataset.order ? 0 : 1;

    /* tell table which column is currently sorted */
    table.dataset.sort = e.target.cellIndex;

    sortColumn();
  });
}

populateTable(); //fill table with random data
sortColumn(); //initial sort of the table

function sortColumn()
{
  const rows = Array.from(table.children);
  rows.splice(0, 1); //remove header from the list
  rows.sort((a, b) => 
  {
    a = a.children[table.dataset.sort].textContent;
    b = b.children[table.dataset.sort].textContent;

    a = a.replace(/\W/g, ""); //remove non alphanumerical characters
    b = b.replace(/\W/g, ""); //remove non alphanumerical characters

    a = a.replace(/0x[a-fA-F0-9]+/, n => Number(n)); //convert 0xHEX to decimal
    b = b.replace(/0x[a-fA-F0-9]+/, n => Number(n)); //convert 0xHEX to decimal

    return a.localeCompare(b, undefined, {numeric: true, sensitivity: 'base'})
  });

  if (+table.dataset.order)
    rows.reverse();

  for(let i = 0; i < rows.length; i++)
  {
    table.appendChild(rows[i]);
  }
}


function populateTable()
{
  for(let i = 0, _tr = document.createElement("tr"), _td = document.createElement("td"); i < 10; i++)
  {
    const tr = _tr.cloneNode(true);
    let td = _td.cloneNode(true);
    td.textContent = "reg " + rand(0, 199);
    tr.appendChild(td);

    td = _td.cloneNode(true);
    td.textContent = "address 0x" + rand(0, 255).toString(16);
    if (rand(0,1))
      td.textContent = td.textContent.replace(/ (.*)/, ' "$1"');
    tr.appendChild(td);

    td = _td.cloneNode(true);
    td.textContent = "desc " + rand(0, 99999).toString(16);
    tr.appendChild(td);
    table.appendChild(tr);
  }
  function rand(min, max)
  {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
}

#test
{
  border-collapse: collapse;
}
#test tr td
{
  border: 1px solid black;
}
#test td
{
  padding: 0.5em 1em;
}
#test th
{
  user-select: none;
  cursor: pointer;
}
#test th:after
{
  visibility: hidden;
}
#test[data-order="0"] th:after
{
  content: "▲";
}
#test[data-order="1"] th:after
{
  content: "▼";
}
#test[data-sort="0"] th:nth-child(1):after,
#test[data-sort="1"] th:nth-child(2):after,
#test[data-sort="2"] th:nth-child(3):after
{
  visibility: visible;
}

<table id="test">
  <tr>
    <th>Register</th>
    <th>Address</th>
    <th>Description</th>
  </tr>
</table>