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>
|
||||
193
pages/index.vue
193
pages/index.vue
@ -11,68 +11,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<UiTable :table-data="tableData" :columns="columns" />
|
||||
|
||||
<UModal v-model:open="open" :title="selectedUser?.email">
|
||||
<template #body>
|
||||
@ -94,14 +33,10 @@
|
||||
import { UTooltip } from '#components'
|
||||
import {
|
||||
createColumnHelper,
|
||||
FlexRender,
|
||||
getCoreRowModel,
|
||||
getSortedRowModel,
|
||||
useVueTable,
|
||||
} from '@tanstack/vue-table'
|
||||
import { useVirtualizer } from '@tanstack/vue-virtual'
|
||||
import { useDebounceFn, useMediaQuery } from '@vueuse/core'
|
||||
import { useGetPosts, useGetUsers } from '~/api/queries'
|
||||
import UiTable from '~/components/UiTable.vue'
|
||||
|
||||
const isMobile = useMediaQuery('(max-width: 1280px)')
|
||||
const open = ref(false)
|
||||
@ -113,8 +48,7 @@ const updateSearch = useDebounceFn((value: string) => {
|
||||
const { data: posts, isLoading: postsIsLoading } = useGetPosts(search)
|
||||
const { data: users, isLoading: usersIsLoading } = useGetUsers()
|
||||
|
||||
const tableData = computed(() =>
|
||||
posts?.value?.map(post => ({
|
||||
const tableData = computed(() => (posts?.value ?? []).map(post => ({
|
||||
userId: post?.userId,
|
||||
userEmail: users?.value?.find(user => user?.id === post?.userId)?.email,
|
||||
id: post?.id,
|
||||
@ -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) {
|
||||
selectedUser.value = users?.value?.find(user => user?.id === post?.userId)
|
||||
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 -------------------- */
|
||||
|
||||
.title-cell {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user