TanStackT
TanStack2y ago
3 replies
slow-yellow

documentation about onPaginationChange with Vue

Is there someone using manualPagination in vue?

How would you implement something like this?
const { data } = useQuery({
  queryKey: [...clientQueries.all(), 'get', filters],
  queryFn: () => clientService.get({ queries: { filters: filters.value }}),
  initialData: { data: [] },
  placeholderData: keepPreviousData
})

const onPaginationChange = async (updater: Updater<PaginationState>) => {
  if (typeof updater !== "function") return;

  const newPageInfo = updater(table.getState().pagination);
  filters.value.page = newPageInfo.pageIndex
}
const columns = []

const table = useVueTable({
  data: data.value.data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  manualPagination: true,
  pageCount: data.value.pagination?.last_page ?? 0,
  state: {
    pagination: {
      pageIndex: data.value.pagination?.current_page ?? 0,
      pageSize: data.value.pagination?.per_page ?? 0,
    }
  },
  onPaginationChange: onPaginationChange
})
Was this page helpful?