V8: Default Pagination (Not controlled) Example

[Gusis93]

Currently planning a migration to V8 so I started checking the examples.

In the pagination example you set this 3 things:

• state: { pagination }
• onPaginationChage
• getPaginationRowModel

...
 const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10,
    pageCount: undefined, // allows the table to calculate the page count for us via instance.getPageCount()
    // If we wanted to control the pageCount, we could provide it here (eg. if we were doing server-side pagination)
  })

 const instance = useTableInstance(table, {
    data,
    columns,
    state: { pagination },
    onPaginationChange: setPagination,
    // Pipeline
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    //
    debugTable: true,
  })
...

Though this confuses me because from what I could test only setting getPaginationRowModel makes the pagination work (I'm guessing controlling the state internally and this is sort of like the usePagination from v7) so why does the example "controls" the pagination with a state?

This behavior seems strange to me, whats the reason behind it? Is this some error in the example or is it a desired behavior?

My assumption is that the example should look like this:

const instance = useTableInstance(table, {
    data,
    columns,
    initialState: {
      pagination: { // Custom initial state to modify the defaults
         pageIndex: 0,
         pageSize: 4,
         pageCount: undefined,
      },
    },
    // Pipeline
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    //
    debugTable: true,
  })

[tannerlinsley]

It’s controlled in this example to illustrate that you can hoist the state of the pageation up out of the table instance and manage it yourself. Yes, this is a trivial example, but there are used cases where you would want to control the pagination outside of the instance for instance if you were controlling pagination through a different UA element instead of the table, or maybe your pagination API is token-based instead of indexed based Tanner Linsley

…

On Jun 1, 2022, 10:02 AM -0600, Gustavo ***@***.***>, wrote: Currently planning a migration to V8 so I started checking the examples. In the pagination example you set this 3 things: • state: { pagination } • onPaginationChage • getPaginationRowModel ... const [pagination, setPagination] = useState<PaginationState>({ pageIndex: 0, pageSize: 10, pageCount: undefined, // allows the table to calculate the page count for us via instance.getPageCount() // If we wanted to control the pageCount, we could provide it here (eg. if we were doing server-side pagination) }) const instance = useTableInstance(table, { data, columns, state: { pagination }, onPaginationChange: setPagination, // Pipeline getCoreRowModel: getCoreRowModel(), getPaginationRowModel: getPaginationRowModel(), // debugTable: true, }) ... Though this confuses me because from what I could test only setting getPaginationRowModel makes the pagination work (I'm guessing controlling the state internally) so why does the example "controls" the pagination with a state? This behavior seems strange to me, whats the reason behind it? Is this some error in the example or is it a desired behavior? My assumption is that the example should look like this: const instance = useTableInstance(table, { data, columns, initialState: { pagination: { // Custom initial state to modify the defaults pageIndex: 0, pageSize: 4, pageCount: undefined, }, }, // Pipeline getCoreRowModel: getCoreRowModel(), getPaginationRowModel: getPaginationRowModel(), // debugTable: true, }) — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[Gusis93]

But wouldn't that essentially be what manualPagination is for? Controlling the state yourself? As soon as you set the state, getPaginationRowModel stops working so you need to control it. Or is there more things that manualPagination does internally?

Thanks for the answer!

[tannerlinsley]

manualPagination tells the table that the data you’re passing it has already been trimmed to just the current pages rows. Tanner Linsley

…

On Jun 2, 2022, 1:11 AM -0600, Gustavo ***@***.***>, wrote: But wouldn't that essentially be what manualPagination is for? Controlling the state yourself? As soon as you set the state, getPaginationRowModel stops working so you need to control it. Or is there more things that manualPagination does internally? Thanks for the answer! — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>

[Gusis93]

Aha, okay, that makes sense then.

Thanks a lot for the explanation and the library in general.

[Schmell]

Sorry if this is slightly off topic, but its the closest discussion to my problem.
I cannot seem to change the initial number of rows to be more than 10

const instance = useTableInstance(table, {
    data,
    columns,
    state: {
      sorting,
      pageIndex: 0,
      pageSize: 30,
    },
    initialState: {
      pagination: {
        // Custom initial state to modify the defaults
        pageIndex: 0,
        pageSize: 30,
        // pageCount: undefined,
      },
    },

    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    debugTable: true,
  });