Task Checklist Table

<div class='tb'><div class='th'><h4>Tasks</h4><p id='tkc'>1 of 4 done</p></div><table><thead><tr><th></th><th>Task</th><th>Assignee</th><th>Due</th></tr></thead><tbody id='tkb'></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}.th{padding:16px 18px 12px}.th h4{margin:0;font-size:15px;font-weight:600}.th p{margin:3px 0 0;font-size:13px;color:#737373}.tb table{width:100%;border-collapse:collapse}.tb th{padding:11px 14px;font-size:12.5px;font-weight:500;color:#737373;text-align:left;border-top:1px solid #f0f0f0}.tb td{padding:12px 14px;font-size:14px;border-top:1px solid #f4f4f4;vertical-align:middle}.tb td:nth-child(2){font-weight:500}tr.done td:nth-child(2){text-decoration:line-through;color:#8a8a8a}.ck{display:grid;place-items:center;width:17px;height:17px;border:1.5px solid #d4d4d4;border-radius:5px;background:#fff;cursor:pointer;transition:all .15s}tr.done .ck{background:#111;border-color:#111}tr.done .ck:after{content:'';width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}.a{display:flex;align-items:center;gap:8px}.a i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#fff;font:600 9.5px Inter,Arial,sans-serif;font-style:normal}

const T=[['Ship table components','AK','Arun','#fb7185','Today',1],['Review notification polish','RS','Rupam','#6366f1','Tomorrow',0],['Update showcase copy','AC','Ava','#22c55e','Mar 12',0],['Fix mobile layout','SO','Sofia','#f59e0b','Mar 14',0]];const tb=document.getElementById('tkb'),c=document.getElementById('tkc');const draw=()=>{tb.innerHTML=T.map((t,i)=>'<tr class="'+(t[5]?'done':'')+'"><td><span class=ck data-i='+i+' role=checkbox></span></td><td>'+t[0]+'</td><td><div class=a><i style="background:'+t[3]+'">'+t[1]+'</i>'+t[2]+'</div></td><td>'+t[4]+'</td></tr>').join('');c.textContent=T.filter(t=>t[5]).length+' of '+T.length+' done'};tb.addEventListener('click',e=>{const k=e.target.closest('.ck');if(k){T[+k.dataset.i][5]^=1;draw()}});draw();