```datacorejsx
const imported = await dc.require("ui/utils.jsx");
const {useSortedQuery} = imported;
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;
}
return function View() {
	const rows = useSortedQuery(`@task and startswith($file, "data/02 - ") and $parentLine < 0 and !#folder-note and regexreplace($cleantext, "^\\s+|\\s+$", "") != ""`, "$cleantext");
	const props = ({
		columns: [
			{
				id: "check",
				title: "completed",
				value: x => x.$completed,
				width: "minimum",
				render: (v, o) => <dc.Checkbox defaultChecked={v} onCheckChange={async (n) => await dc.setTaskCompletion(n, o)} />
			},
			{
				id: "text",
				title: "text",
				value: (x) => x.$cleantext,
				editable: true,
				render: (v, o) => <div><dc.Markdown content={v} inline={false} sourcePath={dc.path} /></div>,
				editor: dc.VanillaTextBox,
				editorProps: {
					markdown: true,
					inline: false	
				},
				onUpdate: async (v, o) => await dc.setTaskText(v, o),
				width: "maximum"
			},
			{
				id: "one",
				title: "tasks",
				value: (x) => x.$elements,
				render: (v, o) => {
					return <dc.TaskList 
						rows={v} 
						states={["/", "x", " "]} />
				}
			},
			{
				id: "progress",
				title: "% done",
				value: (x) => tprogress(x) * 100,
				render: (v, o) => <progress value={v} min={0} max={100}/>,
				width: "minimum"	
			}
		],
		paging: 8
	})
	return (<>
		<dc.VanillaTable {...props} rows={rows}/>
	</>)
}
```