arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +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

2
docs/content/3.components/accordion.md
View File

@@ -251,8 +251,6 @@ When `type="multiple"`, ensure to pass an array to the `default-value` prop or t
Use the [`useSortable`](https://vueuse.org/integrations/useSortable/) composable from [`@vueuse/integrations`](https://vueuse.org/integrations/README.html) to enable drag and drop functionality on the Accordion. This integration wraps [Sortable.js](https://sortablejs.github.io/Sortable/) to provide a seamless drag and drop experience.
The `useSortable` composable accepts various options, see the [useSortable](https://vueuse.org/integrations/useSortable/#usage) documentation for more examples.
::component-example
---
name: 'accordion-drag-and-drop-example'

17
docs/content/3.components/table.md
View File

@@ -444,12 +444,24 @@ class: '!p-0'
---
::
### With infinite scroll
If you use server-side pagination, you can use the [`useInfiniteScroll`](https://vueuse.org/core/useInfiniteScroll/#useinfinitescroll) composable to load more data when scrolling.
::component-example
---
prettier: true
collapse: true
overflowHidden: true
name: 'table-infinite-scroll-example'
class: '!p-0'
---
::
### With drag and drop
Use the [`useSortable`](https://vueuse.org/integrations/useSortable/) composable from [`@vueuse/integrations`](https://vueuse.org/integrations/README.html) to enable drag and drop functionality on the Table. This integration wraps [Sortable.js](https://sortablejs.github.io/Sortable/) to provide a seamless drag and drop experience.
The `useSortable` composable accepts various options, see the [useSortable](https://vueuse.org/integrations/useSortable/#usage) documentation for more examples.
::note
Since the table ref doesn't expose the tbody element, add a unique class to it via the `:ui` prop to target it with `useSortable` (e.g. `:ui="{ tbody: 'my-table-tbody' }"`).
::
@@ -508,6 +520,7 @@ This will give you access to the following:
| Name | Type |
| ---- | ---- |
| `tableRef`{lang="ts-type"} | `Ref<HTMLTableElement \| null>`{lang="ts-type"} |
| `tableApi`{lang="ts-type"} | [`Ref<Table \| null>`{lang="ts-type"}](https://tanstack.com/table/latest/docs/api/core/table#table-api) |
## Theme