Dataview Tabs

Language:: Dataview
Program:: Obsidian
Link::

Summary

Use Dataview JS to generate tabs and their respective tab pages

Code

const createButton = (name) => {
	const btn = dv.el('button', name)
	btn.addEventListener('click', (event) => {
		event.preventDefault()
		removeTable()
		renderTable(name)
	})
	
	return btn
}

const buttons = ['#📥/🟥', '#📥/🟧', '#📥/🟨', '#📥/🟩']


const renderTable = (name) => {
	const pages = dv.pages('"Sources"').where(page => page.status == name).where(page => page.type != '#📥/🛠').sort(page => page.file.cday, "desc")
	dv.table(
	['Title', 'Summary', 'Rating', 'Type'], 
	pages.map(page => [page.file.link, page.summary, page.rating, '<span class=center-block>' + page.type.slice(4) + '</span>']))
}

const removeTable = () => {
	this.container.lastChild.remove()
}

buttons.forEach(button => createButton(button))

renderTable('#📥/🟥')

Result

[!example]+ Tabs

Evaluation Error: SyntaxError: Unexpected token '>'

at DataviewInlineApi.eval (plugin:dataview:18885:21)

at evalInContext (plugin:dataview:18886:7)

at asyncEvalInContext (plugin:dataview:18896:32)

at DataviewJSRenderer.render (plugin:dataview:18922:19)

at DataviewJSRenderer.onload (plugin:dataview:18464:14)

at e.load (app://obsidian.md/app.js:1:1248334)

at DataviewApi.executeJs (plugin:dataview:19465:18)

at DataviewCompiler.eval (plugin:digitalgarden:10760:23)

at Generator.next (<anonymous>)

at eval (plugin:digitalgarden:90:61)

up:: 🧪 Code Diary