Interactive dataview table view task with subtask

[bearlongnight]

What I’m trying to do

I been looking around to use obsidian as some of the task management system. I came across some post regrading using both tasks and dataview plugin to accomplish a nice workflow. However, for querying the tasks, I love the way that table display the task but the downside is that it cannot directly interact with the task item, which adds another lay of friction. On the other hand, the dataview task query allow for direct interaction with it but I do not like the way it displays the tasks. Is there a way to marry the two methods? (i.e., either allow the table to interact with the task items directly or with some formatting for the dataview task query using css or something).

Things I have tried

I have mainly enjoying the look of this layout of the table (Creating a dataview table Tasks and Subtasks from certain headers - #9 by Deflator4228). I also read through this post regarding the dataview table for task. Additionally, I read more about it and know that table by itself has no way to interact with the task directly, but I am wondering if there is a way to circumvent that. Additionally, I have been looking through the dataview and task documentation. However, I am not familiar with JS in general.

Thank you for the help in advance.

[holroy]

In that other thread I think we decided that the task functionality (or interactivity) wasn’t needed, and currently that can’t be added into a table. So neither ticking off tasks, or the task backlinks are possible from within a table. You might be able to kind of circumvent ticking off tasks using buttons to some extent. I don’t know any method to keep the backlinks.

On a related note, within a TASK query you’re able to reformat the task text into visual and dataview will preserve both the task backlink and the option to tick off the tasks. So one potential question then becomes how much of your wanted formatting are you able to recreate using that trick.

A crude example:

```dataview
TASK
WHERE tags
SORT file.mday
LIMIT 20
FLATTEN regexreplace(regexreplace(text, 
  " .{1,2} ?\d{4}-\d{2}-\d{2}", ""),
  "#[a-zA-Z0-0\/]*", "")
  + choice(due, " <span style='background-color: green'>Due: " + due + "</span>", "")
  + "<span style='float: right;'> TAGS: " + join(tags) + "</span>" as visual
```

Which in my test vault displays as:

This is not supposed to look like the pretty variant from that other post, it’s just a little show case of somethings which can be done using FLATTEN ... as visual in a TASK query.

I’m imagening you could get something a little closer to your wanted output using <div>'s and some flex layout. But it won’t be a nice query, and I’m not sure how far (or equal) you’re able to get it.

All in all, I’m thinking you might be better of having two representations of your task list. One in a tabular form using something like the query from the other thread, and one more for day-to-day use where you strip away all or most of the extra information using the FLATTEN ... as visual trick like shown above where I use regexreplace() to strip away the extra information so that the leftmost part is mostly text.