So erhalten Sie den aktuellen Seitenindex der TantStack-Tabelle

Question

Ich erstelle eine Tabelle mit TantStack und der React Table-Bibliothek. Ich möchte den aktuellen Seitenindex in der Tabellenfußzeile anzeigen, etwa „Seite 1 von 8“, wobei „1“ die aktuelle Seitennummer und „8“ die Gesamtzahl der Seiten bedeutet. Ich kann nicht herausfinden, wie ich über den TantStack-Tabellenstatus auf den aktuellen Seitenindex zugreifen kann.

Es sollte zwischen diesen Schaltflächen platziert werden:

<Button
          Variante="Umriss"
          Größe="sm"
          onClick={() => table. previousPage()}
          deaktiviert={!table.getCanPreviousPage()}
        >
          Vorherige
        </Button>
        <Schaltfläche
          Variante="Umriss"
          Größe="sm"
          onClick={() => table.nextPage()}
          deaktiviert={!table.getCanNextPage()}
        >
          Nächste
        </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)
  }));