table.value.rootRef?

[ValentinOsvaldo]

Context

I'm working with @nuxt/ui@4.0.1 and I encountered an issue

In the official documentation

https://ui.nuxt.com/docs/components/table#with-infinite-scroll

When implementing infinite scroll pagination, the documentation provides this example:

const table = useTemplateRef('table')

onMounted(() => {
  useInfiniteScroll(
    table.value?.rootRef,
    () => {
      skip.value += 10
    },
    {
      distance: 200,
      canLoadMore: () => {
        return status.value !== 'pending'
      }
    }
  )
})

However, the table reference (table) only exposes:

tableRef: Ref<HTMLTableElement | null, HTMLTableElement | null>;
tableApi: Table<Scrap>;

The rootRef property does not exist.

The solution

Use parentElement from tableRef

onMounted(() => {
  useInfiniteScroll(
    table.value?.tableRef?.parentElement,
    () => {
      emit('fetchNextPage');
    },
    {
      distance: 200,
      canLoadMore: () => !loading,
    }
  );
});

My question

Is the documentation outdated?

[benjamincanac]

Oh yes sorry I've added this in #5162 but this hasn't been released yet. You can just use table.value?.$el for now!

I've added a note in the docs.

[benjamincanac]

I found a way to expose $el so I reverted this rootRef in c019f8f. You can just ignore this completely and use $el, this will also avoid a breaking change in the next minor.