[v8]: State updater type

[Moshyfawn]

I'm figuring out a controlled table config (RT + RL, URL state): I'm getting a TS error trying to integrate the state updates via the state change handlers.

This expression is not callable.
  Not all constituents of type 'Updater<PaginationState>' are callable.
    Type 'PaginationState' has no call signatures.ts(2349)

The idea is to update the URL onPaginationChange

const { pagination } = useSearch()
const { pageIndex = 0, pageSize = 10 } = pagination || {}
const navigate = useNavigate()

const instance = useTableInstance(table, {
  state: {
    pagination: {
      pageIndex,
      pageSize,
      pageCount
    }
  },
  onPaginationChange: (setPagination) => {
    navigate({
      search: (currentSearch) => ({
        ...currentSearch,
        // INFO: the TS error occures here
        pagination: setPagination({
          pageIndex,
          pageSize,
          pageCount
        })
      })
    })
  }
})

Any idea on how to correctly go about it?

Here's a codesanbox example(see the onPaginationChange callback)

P.S. I'm currently trying the v8 RT version. It's insanely convenient and I'm loving the UX!

[KevinVandy]

Try this

onPaginationChange: (updater) => setPagination((old) => functionalUpdate(updater, old)),

[GuidovdRiet]

Hi! Thank you. Can this be added to the documentation? Hard one to understand what exactly is going on here.

[nicolasrouanne]

I find the signature of the onPaginationChange callback hard to grasp when not using a classic useState setter. In my case I'm saving the pagination state in a Context (to be able to use it in deeply nested components).

Here is how I got it working:

const [filters, setFilters] = useContext(TableContext);
const { pageIndex, pageSize } = filters;

<DataTable
  onPaginationChange={(updater) =>
    setFilters({
      ...filters,
      ...updater({ pageIndex, pageSize }),
    })
  }
  state={{ pagination: { pageIndex, pageSize } }}
/>;

[nicolasrouanne]

I still have the TS error from the original post though. And I can't wrap my head around it 🙈

This expression is not callable.
  Not all constituents of type 'Updater<PaginationState>' are callable.
    Type 'PaginationState' has no call signatures.ts(2349)

It's because Updater can be either a value or a function

export type Updater<T> = T | ((old: T) => T);

I don't really know how to adapt the following theoretical definition for my usecase:

onPaginationChange: (updater) => setPagination((old) => functionalUpdate(updater, old)),

This (inspired by this StackOverflow comment) fixes it, but feels like a hack:

onPaginationChange={(updater) => {
  if (typeof updater === "function")
    setFilters({
      ...filters,
      ...updater({ pageIndex, pageSize }),
    });
}}