Cannot Set PageSize for Pagination

[gmartin1965]

No matter what I try, I cannot get pagination to work if I try to set something other than the default 10 rows.

I can pass in a different value (15, for example) and it works. But, when I do that, the Previous and Next buttons cease to function as expected and I remain stuck on the first page forever.

Also, I get an error if I try to add PaginationState to my initial import from @tanstack/react-table.

import { useMemo, useState } from "react";
import GlobalTableFilter from "./GlobalTableFilter";
import {
    flexRender,
    getCoreRowModel,
    getFilteredRowModel,
    useReactTable,
    getPaginationRowModel,
} from "@tanstack/react-table";

export const DataTable = ({ options }) => {
    const [globalFilter, setGlobalFilter] = useState("");
    if (options.subData){
        var { [options.subData]: thisData } = options.data;
    } else {
        var thisData = options.data.data
    }
    const myPageSize = options.pageSize ? options.pageSize : 10
    const data = thisData
    const headers = options.headers;
    const columns = useMemo(() => headers, []);

    const myPagination = {pageIndex: 0, pageSize: myPageSize}
    const pagination = myPagination

    const table = useReactTable({
        data,
        columns,
        state: { 
            globalFilter,
            pagination
        },
        getFilteredRowModel: getFilteredRowModel(),
        onGlobalFilterChange: setGlobalFilter,
        getCoreRowModel: getCoreRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
        manualPagination: !options.pagination,
        autoResetPageIndex: true,
        debugTable: false,
    });

    const [{ pageIndex, pageSize }, setPagination] =
        useState({
            pageIndex: 0,
            pageSize: myPageSize,
        })

    if (!options.editFunction) {
        options.editFunction = () => {
            console.log("hello");
        };
    }

    return (
        <>
            {/* Table Tools */}
            <div className="dataTable--tools | d-flex align-items-end mb-3">
                <div className="me-auto"><h4 className="dataTable--title | text-secondary">{options.title}</h4></div>
                <div className="d-flex align-items-end">
                    {options.filterable && (
                        <GlobalTableFilter
                            filter={globalFilter}
                            setFilter={setGlobalFilter}
                        />
                    )}
                    <div>
                        <button
                            className="btn btn-primary ms-3"
                            onClick={() => options.refetch()}
                        >
                            <i className="bi bi-arrow-clockwise"></i>
                        </button>
                    </div>
                </div>
            </div>

            {/* Data Table */}
            <table className={options.classList}>
                <thead>
                    {table.getHeaderGroups().map((headerGroup) => (
                        <tr key={headerGroup.id}>
                            {headerGroup.headers.map((header) => (
                                <th key={header.id}>
                                    {header.isPlaceholder
                                        ? null
                                        : flexRender(
                                              header.column.columnDef.header,
                                              header.getContext()
                                          )}
                                </th>
                            ))}
                        </tr>
                    ))}
                </thead>
                <tbody>
                    {table.getRowModel().rows.map((row) => (
                        <tr
                            key={row.id}
                            onClick={() => {
                                options.editFunction(row);
                            }}
                        >
                            {row.getVisibleCells().map((cell) => (
                                <td key={cell.id}>
                                    {flexRender(
                                        cell.column.columnDef.cell,
                                        cell.getContext()
                                    )}
                                </td>
                            ))}
                        </tr>
                    ))}
                </tbody>
            </table>

            {/* Pagination */}
            {options.pagination &&
                <nav
                    aria-label="dataTable--navigation"
                    className="d-flex justify-content-between align-items-center"
                >
                    <div className="dataTable--info">
                        <p>
                            Page:
                            <strong className="ms-2">
                                {table.getState().pagination.pageIndex + 1} of{" "}
                                {table.getPageCount()}
                            </strong>
                        </p>
                    </div>
                    <ul className="pagination">
                        <li className={table.getCanPreviousPage() ? "page-item" : "page-item disabled" }>
                            <button
                                className="page-link"
                                onClick={() => table.previousPage()}
                            >
                                Previous
                            </button>
                        </li>
                        <li className={table.getCanNextPage() ? "page-item" : "page-item disabled" }>
                            <button
                                className="page-link"
                                onClick={() => table.nextPage()}
                            >
                                Next
                            </button>
                        </li>
                    </ul>
                </nav>
            }
        </>
    );
};
export default DataTable;