Customizing Group Headers in Dataview

[noelle_cd]

Things I have tried

I considered using code snippets, but I’m not even sure what CSS to target to do this.

What I’m trying to do

I have a dataview table that breaks up a list of characters by their role in the story, but the headers that separate the sections are very small and don’t look like headers at all. I was wondering if anyone knows of a way to assign an H1-H6 property to the headers within the javascript?

for (let group of dv.pages("#TFT").where(p => p.Role).groupBy(p => p.Role)) {
	dv.header(4, group.key);
	dv.table(["Name", "Age", "Summary", "Status"],
		group.rows
			.map(k => [k.file.link, k.Age, k.Summary, k.Status]))
}

[mnvwvnm]

@noelle_cd

dv.header(4, group.key);

Hi.
You just need to change this number “4”. In dv.header(level, text), level means the header level. So, you are using a h4 (#### header) with the font-size defined by your theme for heading 4.

https://blacksmithgu.github.io/obsidian-dataview/api/code-reference/#dvheaderlevel-text

[noelle_cd]

Oh wow, so simple. Thank you so much!!! Will read through this documentation more thoroughly!