Dataview with Auto Class - highlighting table rows based on tags in notes

Help
1

Things I have tried

In Dataviewjs, exposing the tags field so that tags are visible in the table in reading mode:

let year = DateTime.now().year
let month = DateTime.now().toFormat("MM")
let day = DateTime.now().toFormat("dd")

let today = year + "-" + month + "-" + day

console.log(today)

dv.table(
	["Hour", "Work/Play", "Activity", "Tags"],
	dv.pages('"SPACE-TIME/Chronicle"')
		//.forEach(p => console.log("Date: " + p.date.toFormat("yyyy-MM-dd")))
		.where(p => p.date?.toFormat("yyyy-MM-dd") == today)
		.sort(p => p.file.name, 'asc')
		.map(p => [p.file.link, p.workplay, p.worktype || p.playtype, p.tags])
)

CSS snippet, trying to target the Auto Class-generated class .work-task along with the Dataview table class and row :

.work-task.table-view-table > tbody > tr {
    background-color: rgb(45, 50, 40) !important;
}

What I’m trying to do

I’m trying to find a way to highlight Dataview table rows based on tags that are in the notes included in the Dataviewjs query.

In Auto Class settings I’ve set up a .work-task class based on the tag #work-task. The class does appear to be functional; it turns the background of the note I’ve put the tag into the color I’ve specified, provided of course I remove the .table-view-table selector in the above snippet. But when I try both .work-task.table-view-table selectors to try to target the Dataview table row for that note, no dice.

Any ideas? I’m not at all married to Auto Class; if you know of another way I can accomplish what I’m trying to do, ie. highlight the Dataview table row based on data in the note, I’m all ears.

2

I’m not sure how to target a specific row except by number in sequence. Don’t think CSS alone can target content, it has to be an element or data associated with an element.

However, dataviewjs can add a specifc class to tables (or other queries) by setting dv.container.classNames += " clsname". See Specify CSS class for Dataview tables and lists · Issue #675 · blacksmithgu/obsidian-dataview · GitHub

In addition, in theory, it should be possible to add another column in your table having a span element where one could add the tags you wanted in a data attribute and then use :has to enable targeting of the row. That column could then of course be hidden in the final presentation. Does this sound interesting?

How familiar are you with CSS? And/or the Developers Tool by the way? Are you able to do something based on what I just said, or what do you need?

1 Like
3

A lead to chase down is all I can ask for, I’m reasonably familiar with CSS and the dev tools. I’ll likely be back in a bit with what I’ve cooked up, thanks!

4

Thanks for the tip! This worked for me:

.table-view-table > tbody > tr:has(span):has(.sample) {
    background-color: rgb(45, 50, 40) !important;
}

And in the note I put:

Span :: <span class="sample"></span>
1 Like
5

It should be enough to do :has(span.sample), and not double up on it. And I reckon you could add a display: none on the element it self, and no one would know of your trickery… :smiley:

2 Likes
6

Gotcha, thanks!