Nuxt•3mo ago

Table not showing all pages until sorting

I have a UTable that doesn't properly show all available pages. However once I sort by some column they appear? https://pastes.dev/z6ksxXfEia https://pastes.dev/hMMq0MoDx7

pastes

a simple pastebin.

pastes

a simple pastebin.

6 Replies

kapa.ai•3mo ago

Hi @Just Simeon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This issue—where your UTable does not show all available pages until you sort a column—can occur if the pagination is not correctly synchronized with the filtered or displayed data. Based on the official Nuxt UI Table documentation, a common pitfall is using the total number of items (e.g., data.length) for the pagination component, rather than the number of filtered rows after search/filtering is applied. The recommended approach is to bind the total prop of your UPagination component to the length of the filtered row model, not the raw data. This ensures pagination reflects the actual number of rows currently visible in the table, including after filtering or searching. Here’s how the documentation suggests wiring it up:

<template>
  <div class="w-full space-y-4 pb-4">
    <UTable
      ref="table"
      v-model:pagination="pagination"
      :data="data"
      :columns="columns"
      :pagination-options="{
        getPaginationRowModel: getPaginationRowModel()
      }"
      class="flex-1"
    />

    <div class="flex justify-center border-t border-default pt-4">
      <UPagination
        :default-page="(table?.tableApi?.getState().pagination.pageIndex || 0) + 1"
        :items-per-page="table?.tableApi?.getState().pagination.pageSize"
        :total="table?.tableApi?.getFilteredRowModel().rows.length"
        @update:page="(p) => table?.tableApi?.setPageIndex(p - 1)"
      />
    </div>
  </div>
</template>

<template>
  <div class="w-full space-y-4 pb-4">
    <UTable
      ref="table"
      v-model:pagination="pagination"
      :data="data"
      :columns="columns"
      :pagination-options="{
        getPaginationRowModel: getPaginationRowModel()
      }"
      class="flex-1"
    />

    <div class="flex justify-center border-t border-default pt-4">
      <UPagination
        :default-page="(table?.tableApi?.getState().pagination.pageIndex || 0) + 1"
        :items-per-page="table?.tableApi?.getState().pagination.pageSize"
        :total="table?.tableApi?.getFilteredRowModel().rows.length"
        @update:page="(p) => table?.tableApi?.setPageIndex(p - 1)"
      />
    </div>
  </div>
</template>

Notice the use of table?.tableApi?.getFilteredRowModel().rows.length for the total prop. If you use data.length or a static total, the pagination will not update correctly when the data is filtered or changed, which can cause the issue you described—pages not appearing until a sort triggers a re-computation. Action steps: - Make sure your UPagination's total prop is set to the filtered row count, not the raw data length. - Ensure you are using the correct pagination state from the table API for the current page and items per page. If you follow this pattern and still experience issues, double-check that your data and pagination state are reactive and correctly bound to the table and pagination components. For more details and a working example, see the official documentation: Nuxt UI Table with Pagination. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@294593079812292609> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Just SimeonOP•3mo ago

@kapa.ai it already is:

<UPagination
            :default-page="(table?.tableApi?.getState().pagination.pageIndex || 0) + 1"
            :items-per-page="table?.tableApi?.getState().pagination.pageSize"
            :total="table?.tableApi?.getFilteredRowModel().rows.length"
            @update:page="(p) => table?.tableApi?.setPageIndex(p - 1)"
        />

<UPagination
            :default-page="(table?.tableApi?.getState().pagination.pageIndex || 0) + 1"
            :items-per-page="table?.tableApi?.getState().pagination.pageSize"
            :total="table?.tableApi?.getFilteredRowModel().rows.length"
            @update:page="(p) => table?.tableApi?.setPageIndex(p - 1)"
        />

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for clarifying that you are already using table?.tableApi?.getFilteredRowModel().rows.length for the total prop in your UPagination component. Based on the official Nuxt UI Table documentation, this is the correct approach for synchronizing pagination with the filtered data, and it should ensure that the pagination reflects the actual number of rows after filtering or searching. The documentation does not mention any additional required steps or known issues with this setup that would cause pages to appear only after sorting is triggered Nuxt UI Table: Pagination Example. Since your code matches the documented example and you are still experiencing the issue, the knowledge sources do not provide enough information to explain why this is happening. There may be an edge case or a bug not covered in the documentation. Summary:
- Your usage matches the official example. - The knowledge sources do not explicitly mention this issue or provide further troubleshooting steps for this scenario. If you continue to experience this problem, you may want to check for: - Data reactivity issues (ensure your data and pagination state are reactive). - Any custom logic that might interfere with the table's state. - Updates to the Nuxt UI Table package that might address this behavior. But based on the provided documentation, there is no further guidance or explanation for this specific issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@294593079812292609> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Just SimeonOP•3mo ago

yea that didn't help at all. Maybe a human has an idea

Gaming

Programming

Table not showing all pages until sorting

Did you find this page helpful?