pad-bis/client/components/PadTable.js

export default {
	setup() {
		const { ref, computed } = Vue;

		const pads = ref([]);

		const currentSort = ref("date");
		const currentSortDir = ref("asc");

		const sortedPads = computed(() => {
			return pads.value.sort((a, b) => {
				let modifier = 1;
				if (currentSortDir.value === "desc") modifier = -1;
				if (a[currentSort.value] < b[currentSort.value]) return -1 * modifier;
				if (a[currentSort.value] > b[currentSort.value]) return 1 * modifier;
				return 0;
			});
		});

		const sort = function (s) {
			if (s == currentSort.value) {
				currentSortDir.value = currentSortDir.value === "asc" ? "desc" : "asc";
			}
			currentSort.value = s;
		};

		const columns = ["title", "overview", "categories", "date"];

		fetch("https://hub.xpub.nl/soupboat/padliography/")
			.then((res) => res.json())
			.then((data) => (pads.value = data));

		return { pads, columns, sortedPads, sort };
	},
	template: `
       <table>
            <tr class="header">
                <th v-for="column in columns" @click='sort(column)'>{{column }}</th>
			</tr>
            <tr v-for="(pad, index) in sortedPads" key="pad.title, index" :class="pad.category">

          
				<td class="title">
					<a :href="pad.link" target="_blank"> {{pad.title}} </a>
				</td>
				<td class="overview">{{pad.overview}}</td>
				<td class="categories">{{pad.category}}</td>
				<td class="date">{{pad.date}}</td>

            </tr>
       </table>
    `,
};