Have checkboxes clickable in Dataview

[louis71]

What I’m trying to do

I’m trying to make the checkboxes clickable in Dataview

I have made a report in DataviewJS to collect all the tasks and filtered them by a tag (#esselunga).
I works and displays me all the tasks with an empty check box.
I would like to have the status displayed too in Dataview and I Would to check a task in the Dataview report and it should check it in the original note too.

I am not confident with Javascript.
Here below is my code:

dataviewjs

// Required to run DataviewJS

const header = "Primo_LUN";
const specificFile = "👤 Magda_prove"; // Replace with your specific file name, without the .md extension
const pages = dv.pages().where(p => p.file.name === specificFile);

// Create a map to group tasks by tags
const tagGroups = {};

// Loop through the specific page and its tasks
for (let page of pages) {
    const tasks = page.file.tasks.filter(t => t.section.subpath === header);
    
    tasks.forEach(task => {
        const tags = task.text.match(/#[^\s#]+/g) || ['#esselunga'];
        tags.forEach(tag => {
            if (!tagGroups[tag]) {
                tagGroups[tag] = [];
            }
            tagGroups[tag].push({
                text: task.text,
                file: page.file.name
            });
        });
    });
}

// Display the tasks grouped by tags
for (const [tag, tasks] of Object.entries(tagGroups)) {
    dv.header(3, tag);
// Render tasks as checkboxes using Markdown
    dv.paragraph( tasks.map(task => 
	    `- [${task.completed ? 'x' : ' '}] ${task.text} (from [[${task.file}]])` ).join('\n') ); 
}

Things I have tried

I tried to ask to ChatGPT, but it gave me some solutions not working in DataviewJS.

Checkboxes clickable.

Anyone can halp me to modify this workin code with checkboxes clickable ?

Thanks in advance.

[anon45210282]

Could you use TASK queries? The sample text below gives an example of a clickable checkbox in a Dataview task query.

- [ ] #esselunga this is a task

The task is above.

This it the Dataview query:

````
```dataview
TASK
FROM #esselunga 
```
````

Which produces:

```dataview
TASK
FROM #esselunga 
```

If the checkbox in the Dataview query is clicked in either live-preview mode or reading mode, the original task is also marked as completed.

[nickap]

Hi,

You can achieve this in a simple way using dataviewjs.
Examples:

Get all incomplete tasks tagged with #asselunga

dv.taskList(dv.pages("#asselunga").file.tasks
    .where(t => !t.completed))

In your Notes:

* [ ] test #asselunga

Get all incomplete tagged with #asselunga under “Projects” directory

let asselungaTaggedTasks = dv.pages('"Projects" and #asselunga').file.tasks
    .where(t => !t.completed);


// Render the task list
dv.taskList(asselungaTaggedTasks);

Get all incomplete tasks under specified directory

let featureFileTasks = dv.pages('"Projects"')
    .where(p => p.file.name.includes("Feature")) // Filter pages by name
    .file.tasks
    .where(t => !t.completed);

// Render the task list
dv.taskList(featureFileTasks);