Tanstack 数据表不断重置分页

Question

我有一张来自

@tanstack/react-table

的表格，我想实现分页。到目前为止，我已经有了下面的内容，当我单击下一页时，它会将 1 添加到 pageIndex，但随后立即将其重置回 0。

代码

"use client";

import { memo, useEffect, useMemo, useState } from "react";

import {
  flexRender,
  getCoreRowModel,
  getPaginationRowModel,
  useReactTable,
} from "@tanstack/react-table";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

import PaginationFooter from "./pagination-footer";

import { createClient } from "@/utils/supabase/client";

function DataTable({ columns }) {
  const [mounted, setMounted] = useState(false);
  const [data, setData] = useState([]);
  const [count, setCount] = useState(0);
  const [rowSelection, setRowSelection] = useState({});
  const [pagination, setPagination] = useState({
    pageIndex: 0,
    pageSize: 15,
  });

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    onRowSelectionChange: setRowSelection,
    pageCount: Math.ceil(count / pagination.pageSize),
    onPaginationChange: setPagination,
    getPaginationRowModel: getPaginationRowModel(),
    state: {
      rowSelection,
      pagination,
    },
  });

  const supabase = createClient();

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    async function fetchData() {
      const from = pagination.pageIndex * pagination.pageSize;
      const { data, count, error } = await supabase
        .from("contacts")
        .select("*", { count: "exact" })
        .order("created_at", { ascending: false })
        .range(from, from + pagination.pageSize - 1);

      if (error) {
        return;
      } else {
        setCount(count);
        setData(data);
      }
    }
    fetchData();
  }, [pagination.pageIndex]);

  useEffect(() => {
    const selectedRows = table.getSelectedRowModel().rows.map((row) => row.original);
    console.log(selectedRows);
  }, [rowSelection]);

  if (!mounted) return null;

  return (
    <div className="h-full flex flex-col flex-1 overflow-x-auto">
      <div className="flex-grow overflow-x-auto min-h-0">
        {...table}
      </div>
      <div className="select-none bg-background">
        <PaginationFooter table={table} />
      </div>
    </div>
  );
}

export default memo(DataTable);

Answer 1

要管理 @tanstack/react-table 中的分页值，您必须使用 Setter 和 Getters。

因此从具有首选值的 InitialState 对象开始，然后使用 getter 和 setter 通过代码来管理它

所以你的分页代码将是这样的

const { getState, setPageSize } = table;

// Destructure pageIndex and pageSize from the table's state
const { pageIndex, pageSize } = getState();

// Handler function to update the page size
const pageSizeHandler = (n: number) => {
  setPageSize(n);
};