Bagaimana untuk mendapatkan Indeks Halaman semasa jadual TantStack

Question

Saya sedang membina jadual menggunakan TantStack dan perpustakaan React Table. Saya ingin memaparkan indeks halaman semasa dalam pengaki jadual, seperti "Halaman 1 daripada 8", dengan "1" bermaksud nombor halaman semasa dan "8" ialah jumlah halaman. Saya tidak dapat memikirkan cara untuk mengakses indeks halaman semasa dari keadaan jadual TantStack.

Ia hendaklah diletakkan di antara butang ini:

          disabled={!table.getCanPreviousPage()}
        >
          Sebelumnya
        
        
          disabled={!table.getCanNextPage()}
        >
          Seterusnya
        

Answer 1

Anda perlu menyimpan indeks halaman dalam pembolehubah keadaan dan hantar kaedah setState ke jadual tanstack untuk menetapkan indeks halaman semasa. Anda boleh mencuba kod berikut:

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