87 lines
2.4 KiB
Vue
87 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
FlexRender,
|
|
getCoreRowModel,
|
|
useVueTable,
|
|
createColumnHelper,
|
|
} from "@tanstack/vue-table"
|
|
|
|
useHead({
|
|
title: "Content creators",
|
|
})
|
|
|
|
type ContentCreator = {
|
|
channelId: string
|
|
name: string
|
|
subscribers: number
|
|
}
|
|
const _contentCreators: ContentCreator[] = [
|
|
{
|
|
channelId: "asdf",
|
|
name: "Channel A",
|
|
subscribers: 9999,
|
|
},
|
|
]
|
|
|
|
const columnHelper = createColumnHelper<ContentCreator>()
|
|
const contentCreators = ref(_contentCreators)
|
|
const t = useVueTable({
|
|
get data() {
|
|
return contentCreators.value
|
|
},
|
|
columns: [
|
|
columnHelper.accessor("name", {
|
|
id: "channelId",
|
|
header: "Name",
|
|
}),
|
|
columnHelper.accessor("subscribers", {
|
|
header: "Subscribers",
|
|
}),
|
|
],
|
|
getCoreRowModel: getCoreRowModel(),
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<h1 class="text-4xl font-black">pomp's biased and opinionated list of Content creators</h1>
|
|
<NuxtLink href="/" class="underline">Back</NuxtLink>
|
|
<div class="p-2">
|
|
<table class="border">
|
|
<thead>
|
|
<tr
|
|
class="border"
|
|
v-for="headerGroup in t.getHeaderGroups()"
|
|
:key="headerGroup.id"
|
|
>
|
|
<th
|
|
class="border p-1"
|
|
v-for="header in headerGroup.headers"
|
|
:key="header.id"
|
|
:colSpan="header.colSpan"
|
|
>
|
|
<FlexRender
|
|
v-if="!header.isPlaceholder"
|
|
:render="header.column.columnDef.header"
|
|
:props="header.getContext()"
|
|
/>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody class="border">
|
|
<tr v-for="row in t.getRowModel().rows" :key="row.id">
|
|
<td
|
|
class="border p-1"
|
|
v-for="cell in row.getVisibleCells()"
|
|
:key="cell.id"
|
|
>
|
|
<FlexRender
|
|
:render="cell.column.columnDef.cell"
|
|
:props="cell.getContext()"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|