Comment obtenir l'index de page actuel de la table TantStack

Question

Je construis une table en utilisant TantStack et la bibliothèque React Table. Je souhaite afficher l'index de la page actuelle dans le pied de page du tableau, comme "Page 1 sur 8", où "1" signifie le numéro de la page actuelle et "8" le nombre total de pages. Je n'arrive pas à comprendre comment accéder à l'index de la page actuelle à partir de l'état de la table TantStack.

Il doit être placé entre ces boutons :

<Bouton
          variante = "contour"
          taille = "sm"
          onClick={() => table.previousPage()}
          désactivé={!table.getCanPreviousPage()}
        >
          Précédent
        </Bouton>
        <Bouton
          variante = "contour"
          taille = "sm"
          onClick={() => table.nextPage()}
          désactivé={!table.getCanNextPage()}
        >
          Suivant
        </Bouton>

Answer 1

Vous devez stocker l'index de la page dans une variable d'état et transmettre la méthode setState à la table tanstack pour définir l'index de la page actuelle. Vous pouvez essayer le code suivant :

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