init
This commit is contained in:
alsaze
parent
ddd8b7df71
commit
7adecb81aa
@ -1,10 +0,0 @@
|
|||||||
<template>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
|
|
||||||
</style>
|
|
||||||
201
components/UiTable.vue
Normal file
201
components/UiTable.vue
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
ref="tableContainerRef"
|
||||||
|
class="table-wrapper"
|
||||||
|
>
|
||||||
|
<div :style="{ height: `${totalSize}px` }">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr
|
||||||
|
v-for="headerGroup in table?.getHeaderGroups()"
|
||||||
|
:key="headerGroup?.id"
|
||||||
|
>
|
||||||
|
<th
|
||||||
|
v-for="header in headerGroup?.headers"
|
||||||
|
:key="header.id"
|
||||||
|
:colspan="header?.colSpan"
|
||||||
|
:style="[
|
||||||
|
header?.column?.columnDef?.meta?.style,
|
||||||
|
isMobile
|
||||||
|
? { width: '100%' }
|
||||||
|
: { width: `${header?.getSize()}px` },
|
||||||
|
]"
|
||||||
|
@click="header?.column?.getToggleSortingHandler()?.($event)"
|
||||||
|
>
|
||||||
|
<FlexRender
|
||||||
|
v-if="!header?.isPlaceholder"
|
||||||
|
:render="header?.column?.columnDef?.header"
|
||||||
|
:props="header?.getContext()"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{{ { asc: ' 🔼', desc: ' 🔽' }[header.column.getIsSorted() as string] }}
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody :style="{ height: `${totalSize}px` }">
|
||||||
|
<tr
|
||||||
|
v-for="vRow in virtualRows"
|
||||||
|
:ref="measureElement"
|
||||||
|
:key="rows[vRow?.index]?.id"
|
||||||
|
:data-index=" vRow?.index"
|
||||||
|
:style="{ transform: `translateY(${vRow?.start}px)` }"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
v-for="cell in rows[vRow?.index]?.getVisibleCells()"
|
||||||
|
:key="cell?.id"
|
||||||
|
:style="[
|
||||||
|
cell?.column?.columnDef.meta?.style,
|
||||||
|
isMobile
|
||||||
|
? { width: '100%' }
|
||||||
|
: { width: `${cell?.column?.getSize()}px` },
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<FlexRender
|
||||||
|
:render="cell?.column?.columnDef?.cell"
|
||||||
|
:props="cell?.getContext()"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { ColumnDef } from '@tanstack/vue-table'
|
||||||
|
import { FlexRender, getCoreRowModel, getSortedRowModel, useVueTable } from '@tanstack/vue-table'
|
||||||
|
import { useVirtualizer } from '@tanstack/vue-virtual'
|
||||||
|
import { useMediaQuery } from '@vueuse/core'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
tableData: any[]
|
||||||
|
columns: ColumnDef<any>[]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const isMobile = useMediaQuery('(max-width: 1280px)')
|
||||||
|
|
||||||
|
const table = useVueTable({
|
||||||
|
get data() {
|
||||||
|
return props?.tableData
|
||||||
|
},
|
||||||
|
columns: props?.columns,
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
getSortedRowModel: getSortedRowModel(),
|
||||||
|
})
|
||||||
|
|
||||||
|
const rows = computed(() => table?.getRowModel()?.rows)
|
||||||
|
const tableContainerRef = ref<HTMLDivElement | null>(null)
|
||||||
|
|
||||||
|
const rowVirtualizerOptions = computed(() => {
|
||||||
|
return {
|
||||||
|
count: rows?.value?.length,
|
||||||
|
estimateSize: () => 50,
|
||||||
|
getScrollElement: () => tableContainerRef?.value,
|
||||||
|
overscan: 5,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const rowVirtualizer = useVirtualizer(rowVirtualizerOptions)
|
||||||
|
|
||||||
|
const virtualRows = computed(() => rowVirtualizer?.value?.getVirtualItems())
|
||||||
|
const totalSize = computed(() => rowVirtualizer?.value?.getTotalSize())
|
||||||
|
|
||||||
|
function measureElement(el?: Element) {
|
||||||
|
if (!el) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
rowVirtualizer?.value?.measureElement(el)
|
||||||
|
|
||||||
|
return undefined
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
/* -------------------- TABLE WRAPPER -------------------- */
|
||||||
|
.table-wrapper {
|
||||||
|
position: relative;
|
||||||
|
margin-top: calc(40px + 10px);
|
||||||
|
border-radius: 14px;
|
||||||
|
overflow-y: auto;
|
||||||
|
height: 600px;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
min-width: 100%;
|
||||||
|
border-collapse: separate;
|
||||||
|
border-spacing: 0;
|
||||||
|
|
||||||
|
background: var(--ui-bg-elevated);
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------- HEADER -------------------- */
|
||||||
|
|
||||||
|
thead {
|
||||||
|
display: grid;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead tr {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead th {
|
||||||
|
background: var(--ui-bg-accented);
|
||||||
|
color: var(--ui-text);
|
||||||
|
padding: 12px 14px;
|
||||||
|
|
||||||
|
border-bottom: 1px solid var(--ui-border);
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
transition: background 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead th:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------- BODY -------------------- */
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
display: grid;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr:nth-child(odd) {
|
||||||
|
background: var(--ui-bg-subtle);
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr:hover {
|
||||||
|
background: var(--ui-bg-accented);
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody td {
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-bottom: 1px solid var(--ui-border-subtle);
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr:last-child td {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
205
pages/index.vue
205
pages/index.vue
@ -11,68 +11,7 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<UiTable :table-data="tableData" :columns="columns" />
|
||||||
ref="tableContainerRef"
|
|
||||||
class="table-wrapper"
|
|
||||||
>
|
|
||||||
<div :style="{ height: `${totalSize}px` }">
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr
|
|
||||||
v-for="headerGroup in table?.getHeaderGroups()"
|
|
||||||
:key="headerGroup?.id"
|
|
||||||
>
|
|
||||||
<th
|
|
||||||
v-for="header in headerGroup.headers"
|
|
||||||
:key="header.id"
|
|
||||||
:colspan="header.colSpan"
|
|
||||||
:style="[
|
|
||||||
header.column.columnDef.meta?.style,
|
|
||||||
isMobile
|
|
||||||
? { width: '100%' }
|
|
||||||
: { width: `${header.getSize()}px` },
|
|
||||||
]"
|
|
||||||
@click="header?.column?.getToggleSortingHandler()?.($event)"
|
|
||||||
>
|
|
||||||
<FlexRender
|
|
||||||
v-if="!header?.isPlaceholder"
|
|
||||||
:render="header?.column?.columnDef?.header"
|
|
||||||
:props="header?.getContext()"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{{ { asc: ' 🔼', desc: ' 🔽' }[header.column.getIsSorted() as string] }}
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody :style="{ height: `${totalSize}px` }">
|
|
||||||
<tr
|
|
||||||
v-for="vRow in virtualRows"
|
|
||||||
:ref="measureElement"
|
|
||||||
:key="rows[vRow?.index]?.id"
|
|
||||||
:data-index=" vRow?.index"
|
|
||||||
:style="{ transform: `translateY(${vRow?.start}px)` }"
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
v-for="cell in rows[vRow?.index]?.getVisibleCells()"
|
|
||||||
:key="cell?.id"
|
|
||||||
:style="[
|
|
||||||
cell.column.columnDef.meta?.style,
|
|
||||||
isMobile
|
|
||||||
? { width: '100%' }
|
|
||||||
: { width: `${cell.column.getSize()}px` },
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
<FlexRender
|
|
||||||
:render="cell?.column?.columnDef?.cell"
|
|
||||||
:props="cell?.getContext()"
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<UModal v-model:open="open" :title="selectedUser?.email">
|
<UModal v-model:open="open" :title="selectedUser?.email">
|
||||||
<template #body>
|
<template #body>
|
||||||
@ -94,14 +33,10 @@
|
|||||||
import { UTooltip } from '#components'
|
import { UTooltip } from '#components'
|
||||||
import {
|
import {
|
||||||
createColumnHelper,
|
createColumnHelper,
|
||||||
FlexRender,
|
|
||||||
getCoreRowModel,
|
|
||||||
getSortedRowModel,
|
|
||||||
useVueTable,
|
|
||||||
} from '@tanstack/vue-table'
|
} from '@tanstack/vue-table'
|
||||||
import { useVirtualizer } from '@tanstack/vue-virtual'
|
|
||||||
import { useDebounceFn, useMediaQuery } from '@vueuse/core'
|
import { useDebounceFn, useMediaQuery } from '@vueuse/core'
|
||||||
import { useGetPosts, useGetUsers } from '~/api/queries'
|
import { useGetPosts, useGetUsers } from '~/api/queries'
|
||||||
|
import UiTable from '~/components/UiTable.vue'
|
||||||
|
|
||||||
const isMobile = useMediaQuery('(max-width: 1280px)')
|
const isMobile = useMediaQuery('(max-width: 1280px)')
|
||||||
const open = ref(false)
|
const open = ref(false)
|
||||||
@ -113,14 +48,13 @@ const updateSearch = useDebounceFn((value: string) => {
|
|||||||
const { data: posts, isLoading: postsIsLoading } = useGetPosts(search)
|
const { data: posts, isLoading: postsIsLoading } = useGetPosts(search)
|
||||||
const { data: users, isLoading: usersIsLoading } = useGetUsers()
|
const { data: users, isLoading: usersIsLoading } = useGetUsers()
|
||||||
|
|
||||||
const tableData = computed(() =>
|
const tableData = computed(() => (posts?.value ?? []).map(post => ({
|
||||||
posts?.value?.map(post => ({
|
userId: post?.userId,
|
||||||
userId: post?.userId,
|
userEmail: users?.value?.find(user => user?.id === post?.userId)?.email,
|
||||||
userEmail: users?.value?.find(user => user?.id === post?.userId)?.email,
|
id: post?.id,
|
||||||
id: post?.id,
|
title: post?.title,
|
||||||
title: post?.title,
|
body: post?.body,
|
||||||
body: post?.body,
|
})))
|
||||||
})))
|
|
||||||
|
|
||||||
const columnHelper = createColumnHelper<Posts>()
|
const columnHelper = createColumnHelper<Posts>()
|
||||||
const columns = [
|
const columns = [
|
||||||
@ -178,42 +112,6 @@ const columns = [
|
|||||||
}),
|
}),
|
||||||
]
|
]
|
||||||
|
|
||||||
const table = useVueTable({
|
|
||||||
get data() {
|
|
||||||
return tableData
|
|
||||||
},
|
|
||||||
columns,
|
|
||||||
getCoreRowModel: getCoreRowModel(),
|
|
||||||
getSortedRowModel: getSortedRowModel(),
|
|
||||||
})
|
|
||||||
|
|
||||||
const rows = computed(() => table?.getRowModel()?.rows)
|
|
||||||
const tableContainerRef = ref<HTMLDivElement | null>(null)
|
|
||||||
|
|
||||||
const rowVirtualizerOptions = computed(() => {
|
|
||||||
return {
|
|
||||||
count: rows.value.length,
|
|
||||||
estimateSize: () => 50,
|
|
||||||
getScrollElement: () => tableContainerRef.value,
|
|
||||||
overscan: 5,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const rowVirtualizer = useVirtualizer(rowVirtualizerOptions)
|
|
||||||
|
|
||||||
const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems())
|
|
||||||
const totalSize = computed(() => rowVirtualizer.value.getTotalSize())
|
|
||||||
|
|
||||||
function measureElement(el?: Element) {
|
|
||||||
if (!el) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
rowVirtualizer.value.measureElement(el)
|
|
||||||
|
|
||||||
return undefined
|
|
||||||
}
|
|
||||||
|
|
||||||
function openPost(post: Post) {
|
function openPost(post: Post) {
|
||||||
selectedUser.value = users?.value?.find(user => user?.id === post?.userId)
|
selectedUser.value = users?.value?.find(user => user?.id === post?.userId)
|
||||||
open.value = true
|
open.value = true
|
||||||
@ -251,91 +149,6 @@ function truncate(text: string, max = 15) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* -------------------- TABLE WRAPPER -------------------- */
|
|
||||||
.table-wrapper {
|
|
||||||
position: relative;
|
|
||||||
margin-top: calc(40px + 10px);
|
|
||||||
border-radius: 14px;
|
|
||||||
overflow-y: auto;
|
|
||||||
height: 600px;
|
|
||||||
scrollbar-width: thin;
|
|
||||||
|
|
||||||
@include mobile {
|
|
||||||
height: 500px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
min-width: 100%;
|
|
||||||
border-collapse: separate;
|
|
||||||
border-spacing: 0;
|
|
||||||
|
|
||||||
background: var(--ui-bg-elevated);
|
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* -------------------- HEADER -------------------- */
|
|
||||||
|
|
||||||
thead {
|
|
||||||
display: grid;
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead tr {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead th {
|
|
||||||
background: var(--ui-bg-accented);
|
|
||||||
color: var(--ui-text);
|
|
||||||
padding: 12px 14px;
|
|
||||||
|
|
||||||
border-bottom: 1px solid var(--ui-border);
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
transition: background 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead th:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* -------------------- BODY -------------------- */
|
|
||||||
|
|
||||||
tbody {
|
|
||||||
display: grid;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr {
|
|
||||||
display: flex;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 50px;
|
|
||||||
transition: background 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr:nth-child(odd) {
|
|
||||||
background: var(--ui-bg-subtle);
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr:hover {
|
|
||||||
background: var(--ui-bg-accented);
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody td {
|
|
||||||
padding: 10px 12px;
|
|
||||||
border-bottom: 1px solid var(--ui-border-subtle);
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr:last-child td {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* -------------------- CLICKABLE USER EMAIL CELL -------------------- */
|
/* -------------------- CLICKABLE USER EMAIL CELL -------------------- */
|
||||||
|
|
||||||
.title-cell {
|
.title-cell {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user