docs(Table): add infinite scroll example

[Kheuval]

🔗 Linked issue

Possibly resolves #1644

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Hello,
I needed to implement an infinite scroll functionality for the table component, so I thought I would share my (naive) implementation.

A couple of things here :

I added a ref on the <Primitive> wrapper element and then exposed it in the Table.vue component, but it might not be necessary as we can just do something like that to grab the wrapper in the component/page that uses the Table (that's what I'm using right now) :

<script setup lang="ts">
const tableWrapper = ref<HTMLElement | null | undefined>();

onMounted(
  () => (tableWrapper.value = document.getElementById("table-wrapper")),
);
</script>

<template>
  <UTable
    id="table-wrapper"
    // ...
  />
</template>

In the docs, I left a TODO in the Type part of the Expose section (line 510). I really don't know what to put in here sadly 😞

This might need 2 PR's, one for the actual change on the Table component and one for the docs update, don't really know.

And finally, my implementation might be imperfect or flat out wrong as I'm not very experienced... Feel free to let me know what I can improve and if possible why (so I keep on learning 😃 )
If the whole thing is trash it's okay to tell me too !

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@3656

commit: 4d32334

[benjamincanac]

Isn't it enough to just add a ref to the UTable? 🤔 tableRef.value?.$el

Also, would it be possible to demonstrate this example using https://vueuse.org/core/useInfiniteScroll/#useinfinitescroll?

[Kheuval]

I'll work on that, thanks !

[Kheuval]

@benjamincanac I managed to get rid of the exposed element in Table.vue and I updated the example.

There's still some things that bothers me but I couldn't figure out how to handle them:

• in the example I have to get the ref like that const table = useTemplateRef<ComponentPublicInstance>('table') because otherwise there is a Typescript error saying that $el doesn't exist, this hacks fixes it but I lose the typing for the exposed tableApi in the process...
• using the useInfiniteScroll composable outside of the onMounted hook didn't seem to work here, even though it should according to the docs

I might need a little help to wrap this up, if you or someone else can take a look 😃