T
TanStack•9mo ago
rare-sapphire

autoResetPageIndex in useVueTable

Hi there I'm currently in the progress of creating an editable Table with useVueTable but I'm struggling with the autoResetPageIndex. As soon as I edit something the pageIndex gets reseted. Here's my implementation which is inspired by the react example in the docs. 
file: skipper.ts

export function useSkipper() {
  const autoResetPageIndex = ref(true)

  function skipAutoResetPageIndex() {
    autoResetPageIndex.value = false

    nextTick().then(() => {
      autoResetPageIndex.value = true
    })
  }

  return {
    autoResetPageIndex,
    skipAutoResetPageIndex,
  }
}
file: skipper.ts

export function useSkipper() {
  const autoResetPageIndex = ref(true)

  function skipAutoResetPageIndex() {
    autoResetPageIndex.value = false

    nextTick().then(() => {
      autoResetPageIndex.value = true
    })
  }

  return {
    autoResetPageIndex,
    skipAutoResetPageIndex,
  }
}
file: table component

const { autoResetPageIndex } = useSkipper();
const table = useVueTable({
  get data() {
    return props.data
  },
  get columns() {
    return props.columns
  },
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  autoResetPageIndex: autoResetPageIndex.value,
  getSortedscriptel: getSortedRowModel(),
  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),
  getFilteredRowModel: getFilteredRowModel(),
  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),
  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),
  globalFilterFn: 'auto',
  state: {
    get sorting() { return sorting.value },
    get columnFilters() { return columnFilters.value },
    get columnVisibility() { return columnVisibility.value },
    get rowSelection() { return rowSelection.value },
  },
  initialState: {
    pagination: {
      pageSize: 20,
    },
  },
})
file: table component

const { autoResetPageIndex } = useSkipper();
const table = useVueTable({
  get data() {
    return props.data
  },
  get columns() {
    return props.columns
  },
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  autoResetPageIndex: autoResetPageIndex.value,
  getSortedscriptel: getSortedRowModel(),
  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),
  getFilteredRowModel: getFilteredRowModel(),
  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),
  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),
  globalFilterFn: 'auto',
  state: {
    get sorting() { return sorting.value },
    get columnFilters() { return columnFilters.value },
    get columnVisibility() { return columnVisibility.value },
    get rowSelection() { return rowSelection.value },
  },
  initialState: {
    pagination: {
      pageSize: 20,
    },
  },
})
Before I update the data I call the function skipAutoResetPageIndex from skipper.ts. I've also tried to make the autoResetPageIndex a getter but no luck. It seems that the value is being ignored. Would be great if anyone here can help me out 🙂
1 Reply
rare-sapphire
rare-sapphireOP•9mo ago
Anyone here who can help me with this?

Did you find this page helpful?