opensource/rustfs-console
3
0
Fork 0
mirror of https://github.com/rustfs/console.git synced 2026-09-21 06:06:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

wip: object list fixed

Browse Source
This commit is contained in:
overtrue
2025-10-29 22:37:28 +08:00
parent 4ef8fa6347
commit dfc9340193
12 changed files with 451 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/data-table/data-table.vue
+17 -7
View File
@@ -11,7 +11,7 @@ import {
Table as UiTable,
} from '@/components/ui/table'
import { cn } from '@/lib/utils'
import type { Table } from '@tanstack/vue-table'
import type { Column, Table } from '@tanstack/vue-table'
import { FlexRender } from '@tanstack/vue-table'
import { computed } from 'vue'
@@ -40,6 +40,16 @@ const props = withDefaults(
const visibleColumnCount = computed(() => props.table.getVisibleLeafColumns().length)
const hasRows = computed(() => props.table.getRowModel().rows.length > 0)
const resolveMaxWidth = (value?: string | number) => {
if (value == null) return undefined
return typeof value === 'number' ? `${value}px` : value
}
const getColumnStyles = (column: Column<TData, unknown>) => {
const maxWidth = resolveMaxWidth(column.columnDef.meta?.maxWidth)
return maxWidth ? { maxWidth } : undefined
}
</script>
<template>
@@ -48,7 +58,7 @@ const hasRows = computed(() => props.table.getRowModel().rows.length > 0)
<UiTable :class="tableClass">
<TableHeader :class="stickyHeader ? 'sticky top-0 z-10 bg-muted/40 backdrop-blur' : ''">
<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id" :class="stickyHeader ? 'bg-muted/40 backdrop-blur' : undefined">
<TableHead v-for="header in headerGroup.headers" :key="header.id">
<TableHead v-for="header in headerGroup.headers" :key="header.id" :style="getColumnStyles(header.column)">
<template v-if="!header.isPlaceholder">
<FlexRender :render="header.column.columnDef.header" :props="header.getContext()" />
</template>
@@ -58,7 +68,7 @@ const hasRows = computed(() => props.table.getRowModel().rows.length > 0)
<TableBody>
<template v-if="isLoading">
<TableRow>
<TableCell :colspan="visibleColumnCount" class="h-32 text-center align-middle">
<TableCell :colspan="visibleColumnCount" class="h-48 text-center align-middle">
<div class="flex flex-col items-center gap-2">
<Spinner class="size-6" />
<span class="text-sm text-muted-foreground">Loading...</span>
@@ -68,7 +78,7 @@ const hasRows = computed(() => props.table.getRowModel().rows.length > 0)
</template>
<template v-else-if="hasRows">
<TableRow v-for="row in table.getRowModel().rows" :key="row.id" :data-state="row.getIsSelected() ? 'selected' : undefined" class="transition-colors hover:bg-muted/40">
<TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
<TableCell v-for="cell in row.getVisibleCells()" :key="cell.id" :style="getColumnStyles(cell.column)">
<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
</TableCell>
</TableRow>
@@ -90,7 +100,7 @@ const hasRows = computed(() => props.table.getRowModel().rows.length > 0)
<UiTable :class="cn('border rounded-md', tableClass)">
<TableHeader>
<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
<TableHead v-for="header in headerGroup.headers" :key="header.id" class="py-2">
<TableHead v-for="header in headerGroup.headers" :key="header.id" class="py-2" :style="getColumnStyles(header.column)">
<template v-if="!header.isPlaceholder">
<FlexRender :render="header.column.columnDef.header" :props="header.getContext()" />
</template>
@@ -100,7 +110,7 @@ const hasRows = computed(() => props.table.getRowModel().rows.length > 0)
<TableBody>
<template v-if="isLoading">
<TableRow>
<TableCell :colspan="visibleColumnCount" class="h-32 text-center align-middle">
<TableCell :colspan="visibleColumnCount" class="h-48 text-center align-middle">
<div class="flex flex-col items-center gap-2">
<Spinner class="size-6" />
<span class="text-sm text-muted-foreground">Loading...</span>
@@ -110,7 +120,7 @@ const hasRows = computed(() => props.table.getRowModel().rows.length > 0)
</template>
<template v-else-if="hasRows">
<TableRow v-for="row in table.getRowModel().rows" :key="row.id" :data-state="row.getIsSelected() ? 'selected' : undefined" class="transition-colors hover:bg-muted/40">
<TableCell v-for="cell in row.getVisibleCells()" :key="cell.id" class="py-2">
<TableCell v-for="cell in row.getVisibleCells()" :key="cell.id" class="py-2" :style="getColumnStyles(cell.column)">
<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
</TableCell>
</TableRow>