Как выглядит простая таблица, которая берет информацию из YAML:

```dataviewjs
const container = this.container;

const allPages = dv.pages('"2. Areas/Сериалы и фильмы/7. Сериалы"')
    .where(p => p.Жанр && p.Рейтинг)
    .sort(p => -Number(p.Рейтинг));

// --- UI блок: Фильтр + Поиск ---
const controls = document.createElement("div");
controls.style.display = "flex";
controls.style.gap = "1rem";
controls.style.marginBottom = "1rem";

// Фильтр по жанрам
const genres = [...new Set(allPages.flatMap(p => Array.isArray(p.Жанр) ? p.Жанр : [p.Жанр]))];
const genreSelect = document.createElement("select");

const allOption = document.createElement("option");
allOption.value = "all";
allOption.textContent = "Все жанры";
genreSelect.appendChild(allOption);

for (let genre of genres.sort()) {
  const option = document.createElement("option");
  option.value = genre;
  option.textContent = genre;
  genreSelect.appendChild(option);
}
controls.appendChild(genreSelect);

// Поле поиска
const searchInput = document.createElement("input");
searchInput.type = "text";
searchInput.placeholder = "🔍 Поиск по названию...";
searchInput.style.flex = "1";
controls.appendChild(searchInput);

container.appendChild(controls);

// --- Таблица ---
const table = document.createElement("table");
table.className = "dataview table-view-table";

const header = table.insertRow();
["🎬 Обложка", "🎞 Название", "🎭 Жанр", "⭐ Рейтинг", "🧠 Инсайт"].forEach(text => {
  const th = document.createElement("th");
  th.textContent = text;
  header.appendChild(th);
});

function renderTable(filterGenre = "all", searchTerm = "") {
  table.querySelectorAll("tr:not(:first-child)").forEach(row => row.remove());

  const filteredPages = allPages.filter(p => {
    const genreMatch = filterGenre === "all" || (Array.isArray(p.Жанр) ? p.Жанр.includes(filterGenre) : p.Жанр === filterGenre);
    const searchMatch = !searchTerm || p.file.name.toLowerCase().includes(searchTerm.toLowerCase());
    return genreMatch && searchMatch;
  });

  for (let p of filteredPages) {
    const row = table.insertRow();

    const cellCover = row.insertCell();
    cellCover.innerHTML = p.Постер
      ? `<img src="${p.Постер}" width="100" style="border-radius: 8px;">`
      : "—";

    const cellTitle = row.insertCell();
    const link = document.createElement("a");
    link.href = p.file.path;
    link.textContent = p.file.name;
    link.className = "internal-link";
    cellTitle.appendChild(link);

    const cellGenre = row.insertCell();
    cellGenre.textContent = Array.isArray(p.Жанр) ? p.Жанр.join(", ") : p.Жанр;

    const cellRating = row.insertCell();
    cellRating.textContent = p.Рейтинг + "/10";

    const cellInsight = row.insertCell();
    cellInsight.textContent = p.Инсайт || "–";
  }
}

// --- Слушатели ---
genreSelect.onchange = () => renderTable(genreSelect.value, searchInput.value);
searchInput.oninput = () => renderTable(genreSelect.value, searchInput.value);

// Первый рендер
renderTable();
container.appendChild(table);```

const allPages = dv.pages(‘“2. Areas/Сериалы и фильмы/7. Сериалы”’) — заменить на свой путь, в котором лежат наши заметки с YAML Последние три символа апострофа перенести на новую строку


🧠 Пояснение для тех, кто хочет глубже понимать о чем этот код:

📁 1. Загружаем заметки из нужной папки

const allPages = dv.pages('"2. Areas/Сериалы и фильмы/7. Сериалы"')
    .where(p => p.Жанр && p.Рейтинг)
    .sort(p => -Number(p.Рейтинг));
  • Здесь загружаются все заметки из папки “Сериалы”.

  • Отбираются только те, где есть Жанр и Рейтинг.

  • Сортировка по убыванию рейтинга — сверху самые топовые.

📌 Замените путь на свою папку, если структура у вас другая.


🎛️ 2. Интерфейс: фильтр по жанру + поиск

const genres = [...new Set(allPages.flatMap(...))];
  • Собираются все уникальные жанры (например: Драма, Комедия, Аниме).

  • Создаётся выпадающий список — можно отфильтровать только “Фантастику” или только “Аниме”.

searchInput.placeholder = "🔍 Поиск по названию...";
  • Поле поиска фильтрует по имени заметки (обычно это и есть название сериала).

  • Работает в реальном времени — удобно!


📋 3. Таблица: как выглядит каждая строка

["🎬 Обложка", "🎞 Название", "🎭 Жанр", "⭐ Рейтинг", "🧠 Инсайт"]

Каждая строка — это один сериал, где отображается:

КолонкаЧто показывает
🎬 ОбложкаКартинка из поля Постер (если есть)
🎞 НазваниеНазвание сериала, как ссылка на заметку
🎭 ЖанрОдин или несколько жанров
⭐ РейтингОценка по 10-балльной шкале (Рейтинг)
🧠 ИнсайтТвоя мысль, вывод или цитата из сериала

🧠 4. Фильтрация и рендеринг

function renderTable(filterGenre = "all", searchTerm = "") { ... }
  • Удаляет старые строки таблицы и перерисовывает только те, что подходят под выбранный жанр или введённый текст.

  • Это делает таблицу живой: реагирует на действия пользователя.


🔁 5. Слушатели событий

genreSelect.onchange = () => renderTable(...)
searchInput.oninput = () => renderTable(...)
  • При смене жанра или вводе в поиск — таблица обновляется.

  • Всё происходит вживую, без перезагрузки.


✅ Что тебе нужно в YAML

Чтобы этот код работал, убедись, что в заметках-сериалах указаны эти поля:

Постер: https://link-to-image.jpg
Жанр: [Фантастика, Драма]
Рейтинг: 8.7
Инсайт: Вдохновляющий взгляд на технологии будущего.

🔥 Результат

Ты получаешь крутой каталог:

  • всё красиво оформлено;

  • можно фильтровать по настроению (жанр);

  • можно быстро находить и пересматривать;

  • можно делиться с друзьями или подписчиками.