Sortable Orders Table

<div class='tb'><div class='th'><h4>Recent orders</h4><p>Last 7 days</p></div><table><thead><tr><th>Order</th><th>Customer</th><th><button data-k='1'>Date <i></i></button></th><th class='r'><button data-k='2'>Total <i></i></button></th><th>Status</th></tr></thead><tbody id='otb'></tbody></table></div>

.tb{width:min(560px,96%);margin:auto;background:#fff;border:1px solid #e8e8e8;border-radius:16px;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#111}.tb table{width:100%;border-collapse:collapse}.tb th{padding:12px 18px;font-size:12.5px;font-weight:500;color:#737373;text-align:left;border-bottom:1px solid #f0f0f0}.tb td{padding:13px 18px;font-size:14px;border-top:1px solid #f4f4f4}.tb tbody tr:first-child td{border-top:0}.r{text-align:right!important}.th{padding:16px 18px 14px}.th h4{margin:0;font-size:15px;font-weight:600}.th p{margin:3px 0 0;font-size:13px;color:#737373}.tb th button{all:unset;cursor:pointer;display:inline-flex;gap:4px;align-items:center}.tb th button i{font-style:normal;opacity:.35;font-size:11px}.tb th button.on i{opacity:1}.tb td:first-child{font-weight:600}.tb td:nth-child(3){color:#737373}.tb td:last-child{font-size:13px}

const D=[['#3210','Northwind Studio','Mar 8',248,'Fulfilled'],['#3209','Harbor Labs','Mar 8',92,'Processing'],['#3208','Elm & Co.','Mar 7',156,'Fulfilled'],['#3207','Papertrail','Mar 6',64,'Cancelled'],['#3206','Studio Nine','Mar 5',312,'Fulfilled']];let k=1,d=-1;const tb=document.getElementById('otb'),bs=document.querySelectorAll('.tb th button');const draw=()=>{const r=[...D].sort((a,b)=>k===2?(a[3]-b[3])*d:(a[0]<b[0]?-1:1)*d*-1*(k===1?-1:1));tb.innerHTML=r.map(x=>'<tr><td>'+x[0]+'</td><td>'+x[1]+'</td><td>'+x[2]+'</td><td class=r>$'+x[3].toFixed(2)+'</td><td>'+x[4]+'</td></tr>').join('');bs.forEach(b=>{const on=+b.dataset.k===k;b.classList.toggle('on',on);b.lastElementChild.textContent=on?(d<0?'↓':'↑'):'⇅'})};bs.forEach(b=>b.addEventListener('click',()=>{const n=+b.dataset.k;if(k===n)d=-d;else{k=n;d=-1}draw()}));draw();