如何取得TantStack表的目前Page Index

Question

我正在使用 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>

Answer 1

您需要將頁面索引儲存在狀態變數中，並將 setState 方法傳遞給 tanstack 表以設定目前頁面索引。您可以嘗試以下程式碼：

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)
  }));