T
TanStack•3y ago
ugly-tan

PageCount not reactive

When I change the pageCount of my parent component, the tables page count .getPageCount()does not represent the current state: I already tried to explicitly set the page count through an effect but that does not work as well. 
const table = useVueTable({
  get data() {
    return props.items;
  },

  columns: props.columns,
  getCoreRowModel: getCoreRowModel<T>(),
  getSortedRowModel: getSortedRowModel<T>(),
  manualPagination: true, // https://tanstack.com/table/v8/docs/api/features/pagination#table-options
  debugTable: import.meta.env.DEV,
  onPaginationChange: (page) => {
    const next = typeof page === 'function' ? page(paginationState.value) : page;

    paginationState.value.pageIndex = next.pageIndex;
  },
  pageCount: props.pageCount,
});

watchEffect(() => {
  console.log('SETPAGECOUNTCALLED', props.pageCount);
  table.setPageCount(props.pageCount);
});
const table = useVueTable({
  get data() {
    return props.items;
  },

  columns: props.columns,
  getCoreRowModel: getCoreRowModel<T>(),
  getSortedRowModel: getSortedRowModel<T>(),
  manualPagination: true, // https://tanstack.com/table/v8/docs/api/features/pagination#table-options
  debugTable: import.meta.env.DEV,
  onPaginationChange: (page) => {
    const next = typeof page === 'function' ? page(paginationState.value) : page;

    paginationState.value.pageIndex = next.pageIndex;
  },
  pageCount: props.pageCount,
});

watchEffect(() => {
  console.log('SETPAGECOUNTCALLED', props.pageCount);
  table.setPageCount(props.pageCount);
});
Does anyone see a issue in this code?
2 Replies
ugly-tan
ugly-tanOP•3y ago
I know that the props.pageCountcan be tracked by itself so the watchEffectis not necessary, but neither option even works. Hot reloading updates the table state correctly, so there must be some reactivity issue I am overlooking.
evident-indigo
evident-indigo•16mo ago
Any fix on this?

Did you find this page helpful?