diff --git a/docs/app/components/content/examples/table/TableInfiniteScrollExample.vue b/docs/app/components/content/examples/table/TableInfiniteScrollExample.vue new file mode 100644 index 00000000..facc8240 --- /dev/null +++ b/docs/app/components/content/examples/table/TableInfiniteScrollExample.vue @@ -0,0 +1,88 @@ + + + diff --git a/docs/content/3.components/accordion.md b/docs/content/3.components/accordion.md index 9fcf5d8a..cc83f157 100644 --- a/docs/content/3.components/accordion.md +++ b/docs/content/3.components/accordion.md @@ -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' diff --git a/docs/content/3.components/table.md b/docs/content/3.components/table.md index fcfb3129..01d16047 100644 --- a/docs/content/3.components/table.md +++ b/docs/content/3.components/table.md @@ -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`{lang="ts-type"} | | `tableApi`{lang="ts-type"} | [`Ref`{lang="ts-type"}](https://tanstack.com/table/latest/docs/api/core/table#table-api) | ## Theme diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue index 0c5c5a55..69528589 100644 --- a/src/runtime/components/Table.vue +++ b/src/runtime/components/Table.vue @@ -167,7 +167,7 @@ export type TableSlots = {