Specify CSS class for Dataview tables and lists

[kepano]

Similar to the cssClasses YAML tag for Obsidian files, it would be useful if CSS classes could be specified on Dataview blocks. This would enable individual tables and lists to be styled differently within a single Obsidian file.

You can see examples of how CSS helper classes are used to style tables in Minimal Theme 4.1.7 — however these can only be applied to an entire file, not specific Dataview blocks.

The syntax could be something like:

table 
from #tag
style("highlight-rows")

Which would produce something like

<table class="dataview table-view-table highlight-rows">
  <thead class="table-view-thead">
  ...

[blacksmithgu]

This use case is possible in DataviewJS as of very recently (0.4.21) by manually adding the relevant classes; I think for Dataview queries it will likely be implemented as a CONFIGURE or STYLE command like

TABLE FROM #228
STYLE "highlight-rows"

[MugenLee]

hi~ May I ask if this function has been added? I need this function very much. With the mini theme, increase the width of the table rendered by the dataview. thanks

[anvimea]

Just wanted to say I'm eagerly hoping this feature will be implemented soon, Dataview is already awesome but this would be an incredible QoL addition.

[wagle]

Nudge. I would like to css a dataview table one at a time instead of an entire .md file.

[holroy]

This use case is possible in DataviewJS as of very recently (0.4.21) by manually adding the relevant classes;

I had to investigate a little, but I found that if you do dv.container.className += " clsname", it does indeed add clsname to css classes (two times?!) of that dvjs query. See https://github.com/blacksmithgu/obsidian-dataview/issues/925#issuecomment-1309269687

I've not found anything suggesting it's possible in a normal query, just yet. (I'm on DV 0.5.53 )

[holroy]

I think for Dataview queries it will likely be implemented as a CONFIGURE or STYLE command like

Before finding these mentions of adding classes in both normal queries and js queries, I was contemplating on creating a new feature request on this topic. What I wanted to suggest however, would be to extend the code block syntax a little, like in the following snippet:

```dataview cssClass: clsname, clsname2
...

Since I now found the `dv.container.className += " clsname"` variant for dataviewjs, this syntax addition would potentially be an alternative to using `STYLE` or `CONFIGURE` in a normal query.

[TangentFoxy]

@holroy Doing that is more likely to interfere with other plugins that examine the (I don't know what it's called, but the first line defining the type of code block). I think it's a bad idea because it encourages more potential conflicts. Something like the STYLE directive suggested earlier seems to be fit better.

[holroy]

While we're waiting for someone (possibly me?) to implement something like this, I'd like to point your attention to the forum post below, where I'm using tags to uniquely target any given table. This provides effectively to allow us to target a unique table by adding a tag (which can be hidden), and apply whatever CSS we want to the table.

The same technique can be used on lists/tasks, but due to the quirks of live preview it requires a little more fiddling.

https://forum.obsidian.md/t/how-to-target-dataview-queries-for-css-styling/76525?u=holroy