Dataviewjs: Create callout with result table for each group

[rbennett00]

I'm trying to use dataviewjs to render individual callouts for each key value in a groupby query, and within each callout have it render the respective dv.table. I'm able to do it if I create my own table by creating one big markdown string and using dv.span, but I'd really like to get the actual dataview table in the callout.

Here's my code that at least creates the individual callouts and markdown tables:

var temp='\n> |Effort|Rank|Status|\n> |--|--|--|';
for (let group of dv.pages('"Efforts"').groupBy(p => p.area)) {
	for (let row of group.rows
		.sort(k => k.rank, 'desc')
		.map(k => ["[[" + k.file.name + "]]", k.rank, k.project_status])) {
			temp +=('\n> |' + row[0] + ' | ' + row[1] + ' | ' + row[2] + '|')
			};
	let mkdw = '> [!globe]+ ### ' + group.key + temp;
	dv.span(mkdw);
	temp='\n> |Effort|Rank|Status|\n> |--|--|--|';
 }

I started going down the path of trying to use dv.container.createEl but that didn't seem to work at all. Here's what that code looked like:

for (let group of dv.pages('"Projects"').groupBy(p => p.area)) {
	// dv.header(3, '> [!globe]+ ' + group.key);
	dv.container.createEl('div', {cls: "callout-title", text: "text"});
	dv.container.createEl('div', {cls: "callout-content", text: 
		await dv.table(["Project", "Rank", "Status"],
			group.rows
				.sort(k => k.rank, 'desc')
				.map(k => [k.file.link, k.rank, k.project_status]))}
		);
 }

Any ideas appreciated!

EDIT: I've got this almost working using the code below - it renders the callout boxes for each group, but puts all of the tables into the first callout-content div. I'm sure it is something obvious that I'm missing, so any ideas appreciated.

function drawCallout(header, entries) {
    header = ">" + header + "\n><p style='height:0px; padding: 0px; margin: 0px;'>";
    let id = (Math.random() + 1).toString(36).substring(14);
    let target = `span.dataview.rbennett${id} span div.callout`;
    dv.span(header, { cls: `dataview rbennett${id}` });
    let div = document.querySelectorAll(target + " div.callout-content")[0];
    dv.api.table(["Effort","Rank","Status"], entries, div, dv.component);
}


for (let group of dv.pages('"Efforts"').groupBy(p => p.area)) {
	drawCallout("[!globe]+ " + group.key, 
              group.rows
                   .sort(k => k.rank, 'desc')
                   .map(k => [k.file.link, k.rank, k.project_status]));
}

[rbennett00]

OK, solved this tonight.

The issue with the tables all being placed in the same callout was because
let id = (Math.random() + 1).toString(36).substring(14); was always returning an empty string - the result of (Math.random() + 1).toString(36) doesn't produce a string long enough for substring(14) to return anything other than an empty string. Changed it to substring(7) and it correctly returned unique values each time.

I had to make my drawCallout function async so I could await the dv.span call to create the callout, otherwise the first time through it would call dv.api.table before the parent callout element had been created. Here's the final working code:

async function drawCallout(header, entries) { 
	header = ">" + header + "\n><p style='height:0px; padding: 0px; margin: 0px;'>";
    	const id = (Math.random() + 1).toString(36).substring(7);
    	const target = `span.dataview.rbennett${id} span div.callout`;
    	await dv.span(header, { cls: `dataview rbennett${id}` });
    	const div = document.querySelectorAll(target + " div.callout-content")[0];
	await dv.api.table(["Effort","Rank","Status"], entries, div, dv.component);
}

for (let group of dv.pages('"Efforts"').groupBy(p => p.area)) {
	await drawCallout("[!globe]+ " + group.key, group.rows.sort(k => k.rank, 'desc').map(k => [k.file.link, k.rank, k.project_status]));
}

Now if I could just get the results count on the same line as the header text, it would be perfect ...

[holroy]

I'm not quite sure what's happening in all of your response, but I'm wondering is there any reason you're not using the markdownTable() and then prepend each of those lines with the quote character? Or would that be the wrong thing in your case?

It kind of seems like you're doing a whole lot of html manipulation, which I don't currently see why you're doing. There could very well be legitimate reasons for them that I just don't see, so sorry if that's the case.

[rbennett00]

Functionally, it would be the same (and agree simpler) to just use a markdown table. In this case, it's more of a design preference to have the dataview table look-and-feel vs. a simple markdown table.

markdownTable:

api.table: