correct-apricot

getPageCount doesn't return the correct number on the initial load when using manual pagination

Hi, I have a Vue DataTable component that I want to be configured to fit both server & client cases using manual pagination. Everything is good; however, there is an issue with the initial load when the data is empty at first, and the table renders 0 pages. However, when data is fetched, the data is updated, but the total page is not updated. I am using a trick with isMounted ref like this to prevent rendering the table before data is fetched from the server.

<DataTable
    v-if="isMounted"
    :manual-pagination="true"
    :row-count="totalCount"
    :page-size="5"
    @pagination-change="fetchReports"
/>

<DataTable
    v-if="isMounted"
    :manual-pagination="true"
    :row-count="totalCount"
    :page-size="5"
    @pagination-change="fetchReports"
/>

However, I still think there is something wrong in my code that prevents the Tanstack table get the correct page count internally. This is my code

// Tanstack Table setup
const sorting = ref([])
const columnFilters = ref([])
const columnVisibility = ref({})
const rowSelection = ref({})
const globalSearch = ref('')
const pagination = ref({pageIndex: 0, pageSize: props.pageSize})

const totalRows = computed(() => props.manualPagination ? props.rowCount : table.getFilteredRowModel().rows.length)

const table = useVueTable({
  get data() {
    return props.data
  },
  columns: allColumns.value,
  state: {
    get pagination() {
      return pagination.value
    },
  },
  manualPagination: props.manualPagination,
  rowCount: props.manualPagination ? props.rowCount : undefined,
  onPaginationChange: (updaterOrValue) => {
    const newValue = valueUpdater(updaterOrValue, pagination);
    pagination.value = { ...pagination.value, ...newValue };

    if (props.manualPagination) {
      emit('pagination-change', pagination.value)
    }
  },
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
})

// Tanstack Table setup
const sorting = ref([])
const columnFilters = ref([])
const columnVisibility = ref({})
const rowSelection = ref({})
const globalSearch = ref('')
const pagination = ref({pageIndex: 0, pageSize: props.pageSize})

const totalRows = computed(() => props.manualPagination ? props.rowCount : table.getFilteredRowModel().rows.length)

const table = useVueTable({
  get data() {
    return props.data
  },
  columns: allColumns.value,
  state: {
    get pagination() {
      return pagination.value
    },
  },
  manualPagination: props.manualPagination,
  rowCount: props.manualPagination ? props.rowCount : undefined,
  onPaginationChange: (updaterOrValue) => {
    const newValue = valueUpdater(updaterOrValue, pagination);
    pagination.value = { ...pagination.value, ...newValue };

    if (props.manualPagination) {
      emit('pagination-change', pagination.value)
    }
  },
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
})

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

getPageCount doesn't return the correct number on the initial load when using manual pagination

Did you find this page helpful?