📚 Obsidian Library

A sexy, interactive book table for your Obsidian vault.

Search, sort, drag, resize — all inside a single DataviewJS block. No plugins beyond Dataview, no build step, no dependencies.

---

✨ Features

🔍 Live search	Filter as you type across title, author, genre, ISBN, place and summary (debounced, so it stays snappy on big shelves).
↕️ Smart sorting	Click any header to sort. Pages and Rating sort numerically, Start/End sort chronologically, everything else alphabetically. Click again to reverse.
↔️ Drag & drop columns	Grab a header and drop it wherever you want.
📐 Resizable columns	Drag the right edge of any header to resize.
🖼️ Cover art	Renders cover images straight from a URL, lazy-loaded and privacy-friendly (no-referrer).
🔗 Real Obsidian links	Titles open the note. Cmd/Ctrl + click opens it in a new pane.
🗓️ Forgiving dates	Understands YYYY-MM-DD, DD.MM.YYYY, ISO 8601, and native Dataview dates.
🎨 Theme-native	Uses Obsidian's own CSS variables, so it looks right in light and dark mode.

---

🚀 Getting started

1. Requirements

• Obsidian
• The Dataview plugin
• JavaScript Queries enabled: Settings → Community plugins → Dataview → Enable JavaScript Queries

⚠️ Without JavaScript Queries turned on, the block will render as plain text.

2. Install

Create a new note in your vault (e.g. Library.md), then copy the entire contents of Library.md into it — including the ```dataviewjs fences.

3. Point it at your books

Open the block and change the first line to the folder where your book notes live:

const SOURCE = '"📚 My Bookshelf"'; // ← your folder, in nested quotes

The nested quotes are not a typo — Dataview needs the folder name wrapped in quotes inside the JavaScript string.

You can also target a tag instead of a folder:

const SOURCE = '#book';

4. Add a book

Every book is a normal note with frontmatter. The example template gets you started:

---
title: The Left Hand of Darkness
author: Ursula K. Le Guin
pages: 304
genre: Science Fiction
coverUrl: https://covers.openlibrary.org/b/isbn/9780441478125-L.jpg
Start 📅: 2026-01-14
End 🏁: 2026-02-02
rating: 5
place: Karhide
isbn: 9780441478125
summary: An envoy from a galactic federation visits a planet where gender is fluid.
---

That's it. The table picks it up immediately.

---

🧩 Supported properties

Every property is optional, and each one accepts several spellings so it fits whatever naming convention your vault already uses.

Column	Property (any of these)	Notes
Autor	author, Author
Titel	title, Title	Falls back to the file name
Seiten	pages, Pages	Sorted numerically
Genre	genre, Genre
Cover	coverUrl, CoverUrl, coverURL, cover	Image URL, capped at 110×110 px
📅 Start	Start 📅, start, started, start_date, Start Date	Sorted chronologically
🏁 End	End 🏁, end, finished, end_date, End Date	Sorted chronologically
Summary	summary, Summary	Truncated at 200 chars; full text on hover
★	rating, Rating	Sorted numerically
Place	place, Place
ISBN	isbn, ISBN, isbn10, ISBN10, isbn13, ISBN13

---

🛠️ Customising

Rename or reorder the columns — edit the columns array near the top. The order there is the order you see on load:

{ key: "Rating", label: "★", get: p => getFirst(p, ["rating","Rating"]) },

Add your own column — one line, same shape:

{ key: "Publisher", label: "Verlag", get: p => getFirst(p, ["publisher","Publisher"]) },

Change the date format — formatDate() uses Luxon tokens:

return dt ? dt.toFormat("dd.MM.yyyy") : "";  // → 02.02.2026

Change the cover size — search for maxHeight in the render loop.

---

💡 Good to know

• Layout changes are per-session. Column order, widths and the active sort reset when the note is re-rendered. They're deliberately not written back to disk — nothing here touches your vault.
• The Cover column doesn't sort. Sorting images isn't a thing.
• Covers are loaded from the internet. If you'd rather keep everything local, point coverUrl at a vault-relative path instead.
• Source comments are in German. The code works the same in any language; translations welcome.

---

🐛 Troubleshooting

Symptom	Fix
The block shows as raw code	Enable JavaScript Queries in the Dataview settings.
Table renders but is empty	Check SOURCE — the folder name must match exactly, emoji and all, and stay wrapped in nested quotes.
Covers don't show	Make sure the URL is a direct link to an image file, not to a web page showing one.
Dates are blank	Use YYYY-MM-DD (e.g. 2026-02-02). Quote the value if Obsidian reformats it.

---

🤝 Contributing

Issues and pull requests are very welcome — see CONTRIBUTING.md.

📄 License

MIT © Emely Marie Junker

_{Built with 🌻 for people with too many books.}