reactjs 如何获取TantStack表的当前页索引

sbtkgmzw 于 2023-08-04 发布在 React

关注(0)|答案(1)|浏览(91)

我正在使用TantStack和React Table库构建一个表。我想在页脚中显示当前的页面索引，类似于“第1页，共8页”，其中“1”表示当前页码，“8”表示总页数。我在弄清楚如何从TantStack表状态访问当前页索引时遇到了麻烦。
它应该放在这些按钮之间：

<Button
          variant="outline"
          size="sm"
          onClick={() => table.previousPage()}
          disabled={!table.getCanPreviousPage()}
        >
          Previous
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => table.nextPage()}
          disabled={!table.getCanNextPage()}
        >
          Next
        </Button>

字符串

reactjs

来源：https://stackoverflow.com/questions/76698239/how-to-get-the-current-page-index-of-tantstack-table

1条答案

按热度按时间

6l7fqoea1#

您需要将页面索引存储在状态变量中，并将setState方法传递给tanstack table以设置当前页面索引。您可以尝试以下代码：

const [state, setState] = useState(table.initialState);

  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10
  });

  const pagination = useMemo(
    () => ({
      pageIndex,
      pageSize
    }),
    [pageIndex, pageSize]
  );

  // override the state managers for the table
  table.setOptions(prev => ({
    ...prev,
    onStateChange: setState,
    state: {
      ...state,
      pagination,
    },
    onPaginationChange: setPagination,
    pageCount: Math.ceil(numOfRows / pageSize)
  }));

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

reactjs 如何获取TantStack表的当前页索引

1条答案

相关问题

热门标签

最新问答