arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-19 22:41:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(table): add infinite scroll example (#3656)

Browse Source 
Co-authored-by: Hadrien Hartstein <hadrien@emagma.fr>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Kheuval
2025-04-22 16:14:59 +02:00
committed by GitHub
parent 122e8ac8f4
commit e25aa78050
4 changed files with 108 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/runtime/components/Table.vue
View File

@@ -167,7 +167,7 @@ export type TableSlots<T> = {
</script>
<script setup lang="ts" generic="T extends TableData">
import { computed } from 'vue'
import { computed, ref } from 'vue'
import { Primitive } from 'reka-ui'
import { upperFirst } from 'scule'
import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, useVueTable } from '@tanstack/vue-table'
@@ -206,6 +206,8 @@ const groupingState = defineModel<GroupingState>('grouping', { default: [] })
const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
const paginationState = defineModel<PaginationState>('pagination', { default: {} })
const tableRef = ref<HTMLTableElement>()
const tableApi = useVueTable({
...reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui'),
data,
@@ -303,13 +305,14 @@ function handleRowSelect(row: TableRow<T>, e: Event) {
}
defineExpose({
tableRef,
tableApi
})
</script>
<template>
<Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
<table :class="ui.base({ class: [props.ui?.base] })">
<table ref="tableRef" :class="ui.base({ class: [props.ui?.base] })">
<caption v-if="caption || !!slots.caption" :class="ui.caption({ class: [props.ui?.caption] })">
<slot name="caption">
{{ caption }}