```datacorejsx const tprogress = (t) => { if(t.$completed) return 1; let completed = t.$elements.filter(x => x.$completed).length; let total = Math.max(t.$elements.length, 1); let a = 0; t.$elements.forEach(e => { a += tprogress(e) / total; }) return a; } function TaskTable({path}) { let q = dc.useQuery(`childof (@block-list) and $parentLine < 0 and @task and path("${path}") and !#folder-note`); const uniq = dc.useMemo(() => q.map(x => x.$parent).filter((b, i, a) => i === a.findIndex(y => y.$file === b.$file)), [q]); const groups = dc.useMemo(() => uniq .map((p) => ({key: p, rows: q.filter(b => b.$parent.$id === p.$id)})) .sort((a, b) => { let aa = a.key.$file.split("/").toReversed()[0]; let bb = b.key.$file.split("/").toReversed()[0]; return aa > bb ? 1 : aa < bb ? -1 : 0; }), [uniq, q]); return dc.useMemo(() => { const tprops = { groupings: [ { render: (k, r) => { let kk = k.$file.split("/"); let block = kk.pop(); let name = kk[kk.length - 1]; name = name.substr(0, name.lastIndexOf(".")); let link = k.$parent.$link.withDisplay(name) return (<h4 style={{ "--link-color": "var(--h4-color)", }}> <dc.Link link={link} style={{color: "var(--h4-color) !important"}}/> </h4>) } } ], rows: groups, columns: [ { id: "one", title: "task", value: (x) => x, render: (v, o) => { return <dc.TaskList rows={[o]} states={["/", "x", " "]} /> } }, { id: "progress", title: "% done", value: (x) => x, render: (v, o) => <progress value={tprogress(o) * 100} min={0} max={100}/> } ], paging: 7 } return <dc.VanillaTable {...tprops}/> }, [q, groups, uniq]) } function Type({path}) { } return {TaskTable} ``` v83LpIbHQ5