T
TanStack•2y ago
unwilling-turquoise

Manual pagination

I have a table that i want to be configured to fit both manual and not manual managed cases. i have something like this 
 const table = useReactTable({
    data: tableData,
    columns: tableColumns,
    state: manual ? manualState : state,
    pageCount: manual ? props.pageCount : undefined,
    initialState: {
      pagination: {
        pageIndex: 0,
        pageSize: 15,
      },
    },
    enableRowSelection: true,
    onRowSelectionChange: setRowSelection,
    onColumnFiltersChange: setColumnFilters,
    onColumnVisibilityChange: setColumnVisibility,
    onSortingChange: manual ? props.onSortingChange : undefined,
    onPaginationChange: manual ? props.onPaginationChange : undefined,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFacetedRowModel: getFacetedRowModel(),
    getFacetedUniqueValues: getFacetedUniqueValues(),
    manualFiltering: manual,
    manualPagination: manual,
    manualSorting: manual,
    getRowId: (row, _index, parent) => {
      return parent ? [parent.id, row[uniqueId]].join('.') : row[uniqueId];
    },
});
 const table = useReactTable({
    data: tableData,
    columns: tableColumns,
    state: manual ? manualState : state,
    pageCount: manual ? props.pageCount : undefined,
    initialState: {
      pagination: {
        pageIndex: 0,
        pageSize: 15,
      },
    },
    enableRowSelection: true,
    onRowSelectionChange: setRowSelection,
    onColumnFiltersChange: setColumnFilters,
    onColumnVisibilityChange: setColumnVisibility,
    onSortingChange: manual ? props.onSortingChange : undefined,
    onPaginationChange: manual ? props.onPaginationChange : undefined,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFacetedRowModel: getFacetedRowModel(),
    getFacetedUniqueValues: getFacetedUniqueValues(),
    manualFiltering: manual,
    manualPagination: manual,
    manualSorting: manual,
    getRowId: (row, _index, parent) => {
      return parent ? [parent.id, row[uniqueId]].join('.') : row[uniqueId];
    },
});
The problem lies on this line: onPaginationChange: manual ? props.onPaginationChange : undefined How to set the default onPaginationChange when the table is not manually hanlded?
2 Replies
unwilling-turquoise
unwilling-turquoiseOP•2y ago
When manual is false I cannot change pages
robust-apricot
robust-apricot•2y ago
If you provide onPaginationChange, you must also provide state.pagination

Did you find this page helpful?