Add css classes to specific dataview tables

[garlicxd]

I’m looking for a way to add css classes to content containing some dataview tables.

I tried putting my dataviewjs block inbetween html tags but it just ends up rendering the script.

What I have

A little <Promise> shows up.

        let abilities = dv.array(dv.current().abilities.map(link => dv.page(link.path)));
        dv.el(
            "div", 
            dv.table(
                ["Ability", "Description", "Cast"],
                abilities
                .sort(p => p.file.name)
                .map(p => [
                    p.file.link, 
                    "llol", 
                    this.create_button(dv, "cast", this.spell_button_func, {msg: p.file.name})
                ])
            ),
            {cls: "my-class"}
        );

[holroy]

I’ve written a somewhat lengthy post on this topic in the thread below:

How to target Dataview queries for CSS styling

This thread will show some of the options available for styling the result of your Dataview queries by providing you with CSS selectors which targets the outer elements of the query results. The specific styling within each is left up to the reader. After first covering the basics, I’ll show a nifty hack using #tags to single out specific queries. The basic options for styling The three most common options to target every query of the various query types are: TABLE queries and dv.table(): tab…

Hopefully it should target your needs, so try it out, and if there is something unclear show us how far you’ve gotten based on the post above, and we’ll look into a little further.