fix(Table): expose $el instead of rootRef

Related to #5230, partial revert of #5162

Author: benjamincanac

docs/app/components/content/examples/table/TableInfiniteScrollExample.vue

@@ -63,8 +63,7 @@ execute()
 const table = useTemplateRef('table')
 
 onMounted(() => {
-  // `rootRef` has been added in https://github.com/nuxt/ui/pull/5162 and will be available in v4.1.0, use `table.value?.$el` for older versions
-  useInfiniteScroll(table.value?.rootRef, () => {
+  useInfiniteScroll(table.value?.$el, () => {
     skip.value += 10
   }, {
     distance: 200,

docs/content/docs/2.components/table.md

@@ -677,7 +677,6 @@ This will give you access to the following:
 
 | Name | Type |
 | ---- | ---- |
-| `rootRef`{lang="ts-type"} | `Ref<HTMLDivElement \| null>`{lang="ts-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) |
 

src/runtime/components/Table.vue

@@ -322,7 +322,7 @@ const groupingState = defineModel<GroupingState>('grouping', { default: [] })
 const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
 const paginationState = defineModel<PaginationState>('pagination', { default: {} })
 
-const rootRef = ref()
+const rootRef = ref<InstanceType<typeof Primitive>>()
 const tableRef = ref<HTMLTableElement | null>(null)
 
 const tableApi = useVueTable({
@@ -473,7 +473,9 @@ watch(() => props.data, () => {
 }, props.watchOptions)
 
 defineExpose({
-  rootRef,
+  get $el() {
+    return rootRef.value?.$el
+  },
   tableRef,
   tableApi
 })