Customizing Group Headers in Dataview

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"],
			.map(k => [, k.Age, k.Summary, k.Status]))
1 Like

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.

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

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.