{
    "id": "bhaskar/sortable-orders-table",
    "kind": "component",
    "title": "Sortable Orders Table",
    "summary": "A recent orders table with click-to-sort Date and Total columns and status labels.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/sortable-orders-table/",
    "stack": [],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "beginner",
    "license": "mit",
    "version": "1.0",
    "overview": "Order id, customer, date, total and status. Click Date or Total to sort ascending or descending with an arrow indicator.",
    "steps": [],
    "files": [],
    "install": "",
    "how_to_use": "Use the component code (html, css, js, or react) directly, or run the install command.",
    "component": {
        "category": "Cards",
        "html": "<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>",
        "css": ".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}",
        "js": "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();",
        "react": "",
        "dependencies": [],
        "install": "",
        "licence_notice": ""
    }
}