MrSphay/Modrinth-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: table component updates (#6042)

Browse Source 
* feat: implement table header slot, empty state, and virtualization

* refactor: pnpm prepr
This commit is contained in:
Truman Gao
2026-05-08 15:29:06 -06:00
committed by GitHub
parent 384556a810
commit cba4550be4
2 changed files with 291 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
packages/ui/src/components/base/Table.vue
View File

@@ -1,5 +1,11 @@
<template>
<div class="overflow-hidden rounded-2xl border border-solid border-surface-5">
<div
v-if="hasHeaderSlot"
class="border-solid border-0 border-b border-surface-5 bg-surface-3 p-4"
>
<slot name="header" />
</div>
<table class="w-full table-fixed border-separate border-spacing-0 border-surface-5">
<thead class="">
<tr class="bg-surface-3">
@@ -44,37 +50,62 @@
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(row, rowIndex) in data"
:key="rowIndex"
:class="rowIndex % 2 === 0 ? 'bg-surface-2' : 'bg-surface-1.5'"
>
<td v-if="showSelection" class="w-10 border-solid border-0 border-t border-surface-5">
<Checkbox
:model-value="isSelected(row)"
class="shrink-0 p-4"
@update:model-value="toggleSelection(row)"
/>
</td>
<td
v-for="column in columns"
:key="column.key"
class="text-secondary h-14 overflow-hidden first:pl-4 last:pr-4 border-solid border-0 border-t border-surface-5"
:class="`text-${column.align ?? 'left'}`"
:style="column.width ? { width: column.width } : undefined"
>
<slot
:name="`cell-${column.key}`"
:row="row"
:value="row[column.key]"
:column="column"
:index="rowIndex"
>
{{ row[column.key] ?? '' }}
<tbody :ref="setListContainer">
<tr v-if="data.length === 0" class="bg-surface-2">
<td :colspan="columnSpan" class="border-solid border-0 border-t border-surface-5 p-0">
<slot name="empty-state">
<div class="text-secondary flex h-64 items-center justify-center">
No data available.
</div>
</slot>
</td>
</tr>
<template v-else>
<tr v-if="virtualized && topSpacerHeight > 0" aria-hidden="true">
<td
:colspan="columnSpan"
class="border-0 p-0"
:style="{ height: `${topSpacerHeight}px` }"
></td>
</tr>
<tr
v-for="(row, rowIndex) in renderedRows"
:key="getRowRenderKey(row, getAbsoluteRowIndex(rowIndex))"
:class="getAbsoluteRowIndex(rowIndex) % 2 === 0 ? 'bg-surface-2' : 'bg-surface-1.5'"
>
<td v-if="showSelection" class="w-10 border-solid border-0 border-t border-surface-5">
<Checkbox
:model-value="isSelected(row)"
class="shrink-0 p-4"
@update:model-value="toggleSelection(row)"
/>
</td>
<td
v-for="column in columns"
:key="column.key"
class="text-secondary h-14 overflow-hidden first:pl-4 last:pr-4 border-solid border-0 border-t border-surface-5"
:class="`text-${column.align ?? 'left'}`"
:style="column.width ? { width: column.width } : undefined"
>
<slot
:name="`cell-${column.key}`"
:row="row"
:value="row[column.key]"
:column="column"
:index="getAbsoluteRowIndex(rowIndex)"
>
{{ row[column.key] ?? '' }}
</slot>
</td>
</tr>
<tr v-if="virtualized && bottomSpacerHeight > 0" aria-hidden="true">
<td
:colspan="columnSpan"
class="border-0 p-0"
:style="{ height: `${bottomSpacerHeight}px` }"
></td>
</tr>
</template>
</tbody>
</table>
</div>
@@ -86,8 +117,9 @@
generic="K extends string = string, T extends Record<string, unknown> = Record<K, unknown>"
>
import { ChevronDownIcon, ChevronUpIcon } from '@modrinth/assets'
import { computed } from 'vue'
import { computed, toRef, useSlots } from 'vue'
import { useVirtualScroll } from '../../composables/virtual-scroll'
import Checkbox from './Checkbox.vue'
export type TableColumnAlign = 'left' | 'center' | 'right'
@@ -115,16 +147,49 @@ const props = withDefaults(
data: T[] /* Row data for table */
showSelection?: boolean
rowKey?: keyof T /* The key used to uniquely identify each row */
virtualized?: boolean
virtualRowHeight?: number
virtualBufferSize?: number /* The number of extra rows rendered above and below the visible viewport */
}>(),
{
showSelection: false,
rowKey: 'id' as keyof T,
virtualized: false,
virtualRowHeight: 56,
virtualBufferSize: 5,
},
)
const selectedIds = defineModel<unknown[]>('selectedIds', { default: () => [] })
const sortColumn = defineModel<string | undefined>('sortColumn')
const sortDirection = defineModel<SortDirection>('sortDirection', { default: 'asc' })
const slots = useSlots()
const hasHeaderSlot = computed(() => Boolean(slots.header))
const columnSpan = computed(() => Math.max(props.columns.length + (props.showSelection ? 1 : 0), 1))
const {
listContainer,
totalHeight,
visibleRange,
visibleTop: topSpacerHeight,
visibleItems,
} = useVirtualScroll(toRef(props, 'data'), {
itemHeight: props.virtualRowHeight,
bufferSize: props.virtualBufferSize,
enabled: toRef(props, 'virtualized'),
})
const renderedRows = computed(() => (props.virtualized ? visibleItems.value : props.data))
const bottomSpacerHeight = computed(() => {
if (!props.virtualized) {
return 0
}
return Math.max(
0,
totalHeight.value - topSpacerHeight.value - renderedRows.value.length * props.virtualRowHeight,
)
})
const emit = defineEmits<{
sort: [column: string, direction: SortDirection]
@@ -141,6 +206,23 @@ function getRowId(row: T): unknown {
return row[props.rowKey as keyof T]
}
function setListContainer(element: unknown) {
listContainer.value = props.virtualized ? (element as HTMLElement | null) : null
}
function getAbsoluteRowIndex(rowIndex: number): number {
return props.virtualized ? visibleRange.value.start + rowIndex : rowIndex
}
function getRowRenderKey(row: T, rowIndex: number): PropertyKey {
const rowId = getRowId(row)
if (typeof rowId === 'string' || typeof rowId === 'number' || typeof rowId === 'symbol') {
return rowId
}
return rowIndex
}
function isSelected(row: T): boolean {
return selectedIds.value.includes(getRowId(row))
}