How to render tag as a link when nested within extra div?

[nkoder]

Here is a simplified excerpt from my dataviewjs code, which renders tags as expected – they are links you can click in order to open search showing all occurrences of that page across all notes:

const groups = dv.pages('"pixel art"')
	.map(page => ({
		...page,
		paletteTag: paletteTagFrom(page),
	}))
	// …
	.groupBy(p => p.paletteTag);

dv.table(
	[
		"palette",
		"pieces",
	],
	groups.map(group => {
		// …
		const paletteTag = group.key;
		return [
			paletteTag,
			// …
		];
	})
);

function paletteTagFrom(page) {
	const paletteTag = page.file.tags.find(t => t.startsWith('#palette/'));
	return paletteTag ?? null;
}

// …

Result is as expected:

Now, I want to have something more rendered inside table cell, not only a tag, see this dataviewjs excerpt:

const groups = dv.pages('"pixel art"')
	.map(page => ({
		...page,
		paletteTag: paletteTagFrom(page),
	}))
	// …
	.groupBy(p => p.paletteTag);

dv.table(
	[
		"palette",
		"pieces",
	],
	groups.map(group => {
		// …
		return [
			renderPaletteTagAndColors(group.key),
			// …
		];
	})
);


function paletteTagFrom(page) {
	const paletteTag = page.file.tags.find(t => t.startsWith('#palette/'));
	return paletteTag ?? null;
}

function renderPaletteTagAndColors(paletteTag) {
	const paletteId = paletteTag.replace("#palette/", "");
	const lospecPaletteId = paletteId.startsWith("lospec_")
		? paletteId.replace("lospec_", "")
		: null;
	const paletteImage = lospecPaletteId
		? renderLospecPalette(lospecPaletteId)
		: null;

	const containerStyle = `
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	`;
	return `
		<div style="${containerStyle}">
			${paletteTag}
			${paletteImage}
		</div>
	`.trim();
}

function renderLospecPalette(lospecPaletteId) {
	const path = `pixel art/palettes/Lospec palettes/${lospecPaletteId}-32x.png`;
	const abstractFile = app.vault.getAbstractFileByPath(path);
	const resourcePath = abstractFile
		? app.vault.getResourcePath(abstractFile)
		: null;
	return `<img src="${resourcePath}"></img>`;
}

// …

now, sadly, tags are no longer links, just non-clickable plain text:

Any idea how to make them links again?

[blacksmithgu]

You can make the link manually:

<a href="#tag" class="tag" target="_blank" rel="noopener">#tag</a>

[nkoder]

works great, thanks!