Testando duas opções para realizar a filtragem da biblioteca

package.json

@@ -17,7 +17,8 @@
     "datatables.net-dt": "^2.1.7",
     "datatables.net-fixedheader-dt": "^4.0.1",
     "datatables.net-responsive-dt": "^3.0.3",
-    "datatables.net-searchbuilder-dt": "^1.8.0",
+    "datatables.net-searchpanes-dt": "^2.3.2",
+    "datatables.net-select-dt": "^2.1.0",
     "jquery": "^3.7.1",
     "papaparse": "^5.4.1",
     "typescript": "^5.6.2"

src/pages/teste/biblioteca-filtro-1.astro

@@ -0,0 +1,194 @@
+---
+import Carregando from '../../components/Carregando.astro';
+import Observacao from '../../components/Observacao.astro';
+import Layout from '../../layouts/Layout.astro';
+---
+<Layout title="Biblioteca IsF - Idiomas sem Fronteiras">
+    <link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jq-3.7.0/dt-2.1.6/b-3.1.2/cr-2.0.4/fh-4.0.1/r-3.0.3/datatables.min.css" slot="head" />
+
+	<Observacao title="Esta é uma biblioteca pública. Compartilhe com quem quiser!">
+		Se você possui algum trabalho sobre ou do IsF que gostaria de compartilhar, colabore enviando-o <a href="https://forms.gle/d4KfCsrDfZC4dnkM6" target="_blank">aqui</a>.
+	</Observacao>
+
+	<Carregando id="data-table-loader" />
+
+	<table id="data">
+	</table>
+</Layout>
+
+<style is:global>
+main {
+	background: #fff;
+    border: 1px solid #bbb;
+    border-radius: 10px;
+    padding: 20px;
+    margin: 30px auto 60px;
+	box-shadow: 0px 2px 8px 2px lightgrey;
+}
+
+div:has(table#data) {
+	overflow-x: auto;
+}
+table#data a {
+    word-break: break-all;
+}
+
+div.dt-button-collection.dtb-collection-closeable div.dtsb-titleRow,
+div.dt-button-collection.dtb-collection-closeable div.dtsb-group {
+    padding-right: 50px;
+}
+div.dt-container div.dt-layout-row:first-child {
+	margin-top: 0;
+}
+div.dt-container div.dt-layout-row:last-child {
+	margin-bottom: 0;
+}
+
+.tag {
+	border-radius: 16px;
+	padding: 4px 8px 5px 8px;
+	font-size: 12px;
+	white-space: nowrap;
+    display: inline-block;
+	max-width: 120px;
+    overflow: hidden;
+	text-overflow: ellipsis;
+}
+</style>
+
+<script>
+import DataTable, { type Api } from 'datatables.net-dt'
+import 'datatables.net-buttons-dt'
+import 'datatables.net-colreorder-dt'
+import 'datatables.net-fixedheader-dt'
+import 'datatables.net-responsive-dt'
+import Papa from 'papaparse'
+
+const ID_DA_PLANILHA = '1zL6CXcemierW0aKoGgYMJ2U0iAn_89QF9EVOPniPk34'
+const ID_DA_ABA = 1622766549
+const URL_DA_PLANILHA = `https://docs.google.com/spreadsheets/d/${ID_DA_PLANILHA}/pub?gid=${ID_DA_ABA}&single=true&output=csv&t=${Date.now()}`
+
+const TAGS = {
+	// [text_color, bg_color]
+
+	// == CATEGORIA ==
+	"Artigo": ['#666666', '#E5E5E5'],
+	"Monografia": ['#437406', '#CAF0CC'],
+	"Dissertação": ['#8F6200', '#FFEBC0'],
+	"Tese": ['#0068B8', '#D4E7F6'],
+	"Entrevista": ['#FFFFFF', '#BE79B3'],
+	"TCC": ['#FFFFFF', '#4F6BED'],
+	"Capítulo": ['#FFFFFF', '#9E6C00'],
+	"Livro": ['#FFFFFF', '#CA5010'],
+	"Palestra": ['#FFFFFF', '#005E50'],
+	// == CATEGORIA ==
+
+	// == IDIOMA ==
+	"alemão": ['#8F6200', '#FFEBC0'],
+	"espanhol": ['#437406', '#CAF0CC'],
+	"francês": ['#FFFFFF', '#0078D4'],
+	"inglês": ['#FFFFFF', '#373277'],
+	"italiano": ['#AA272B', '#F5CCCF'],
+	"japonês": ['#FFFFFF', '#D13438'],
+	"português para estrangeiros": ['#FFFFFF', '#038387'],
+	"TODOS": ['#FFFFFF', '#BE79B3'],
+	// == IDIOMA ==
+}
+
+type LibraryRecord = {
+	Ano: number
+	Categoria: string
+	Idioma: string
+	Referência: string
+	Arquivo: string
+}
+
+Papa.parse<LibraryRecord>(URL_DA_PLANILHA, {
+	download: true,
+	header: true,
+	complete: function(results) {
+		if (results.errors.length) {
+			console.error(results);
+			window.alert("Erro ao carregar dados.")
+		} else {
+			new DataTable('#data', {
+				language: {
+					url: '//cdn.datatables.net/plug-ins/2.1.6/i18n/pt-BR.json',
+				},
+				layout: {
+					topEnd: {
+						search: {
+							processing: true,
+							placeholder: "Buscar na biblioteca"
+						}
+					},
+				},
+				responsive: true,
+				fixedHeader: true,
+				data: results.data,
+				columns: Object.keys(results.data[0]).map((x, i) => ({
+					data: x,
+					title: x,
+					footer: "_",
+					className: ['desktop', 'min-tablet-p', 'min-tablet-l', 'all', 'min-mobile-l'][i],
+					render: (d, t) =>
+						t === 'display' ?
+							['Categoria', 'Idioma'].includes(x) ?
+								createTag(d)
+								: replaceUrlsWithLinks(d, x === 'Arquivo' ? 'Link' : undefined)
+									: d,
+				})),
+				initComplete: function(settings) {
+					document.querySelector("#data-table-loader")?.remove()
+					const api = new DataTable.Api(settings)
+
+					api.columns()
+						.every(function () {
+							const column = this;
+
+							if (!["Ano", "Categoria", "Idioma"].includes(column.title())) {
+								column.footer().replaceChildren("")
+								return
+							}
+
+							const select = document.createElement('select');
+							select.add(new Option(''));
+							column.footer().replaceChildren(select);
+
+							select.addEventListener('change', function () {
+								column
+									.search(select.value, { exact: true })
+									.draw();
+							});
+
+							column
+								.data()
+								.unique()
+								.sort()
+								.each(function (d) {
+									select.add(new Option(d));
+								});
+						});
+				}
+			});
+		}
+	}
+});
+
+function replaceUrlsWithLinks(text: string, label: string | undefined = undefined) {
+	var urlRegex = /((http|https):\/\/[^\s]+)(?=\s|\.|$)/gi;
+	return text.replace(urlRegex, function(url) {
+        const cleanedUrl = url.replace(/[\.,!?;:)>]+$/, '');
+		const trailingPunctuation = url.slice(cleanedUrl.length);
+        return `<a href="${cleanedUrl}" target="_blank" rel="noopener noreferrer">${label || cleanedUrl}</a>${trailingPunctuation}`;
+    });
+}
+
+function createTag(text: string) {
+	return text
+		.split(";")
+		.map(t => t.trim())
+		.map(t => t in TAGS ? `<span class="tag" style="color: ${TAGS[t as keyof typeof TAGS][0]}; background-color: ${TAGS[t as keyof typeof TAGS][1]}" title="${t}">${t}</span>` : t)
+		.join(" ")
+}
+</script>