Wyświetlanie danych za pomocą <Table>

Dzień dobry,
jak zrobić aby w tabeli na jednej stronie było wyświetlanych 10 pozycji, a następne 10 dopiero jak kliknę np: w ">>""

<Table striped bordered hover>
      <thead>
        <tr width="100%">
          <th width="10%">Rok</th>
          <th width="10%" >Miesiąc</th>
          <th width="10%" >Kwota</th>
          <th width="20%" >Rodzaj operacji</th>
          <th width="30%" >Opis</th>
          <th width="20%">Data Transakcji</th>
        </tr>
      </thead>
      <tbody>
      {tablica.map((dane) => (
        <tr>
        <td>{dane.rok}</td>
        <td>{dane.miesiac}</td>
        <td>{dane.kwota}</td>
        <td>{dane.rodzaj_rach}</td>
        <td>{dane.opis}</td>
        <td>{dane.data_trans}</td>
        </tr>
))}
         
      </tbody>
    </Table>

w projekcie używam: https://react-bootstrap.github.io/components/table/

Zakładając, że mamy tylko frontend. I że w tablicy tablica są zawarte wszystkie dane i nie trzeba nic dociągać z backendu:

To:

• możemy trzymać w stanie Reacta informacje o numerze strony: pageNumber.

• możemy trzymać gdzieś informacje o liczbie elementów na stronę (tutaj: 10).
  Jeśli liczba elementów na stronę będzie stała, to możemy zrobić zwykłą stałą. Jeśli ma być dynamiczne (np. użytkownik będzie mógł wybrać, czy ma się pokazać naraz 10 czy np. 20 elementów), to też w stanie Reacta.

• zamiast robić tablica.map możemy robić wycinek tablicy np.:

tablica.slice(pageNumber * elementsPerPage, pageNumber * elementsPerPage + elementsPerPage).map

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

• no i podpinamy pod przyciski zdarzenie, które zmieni stan pageNumber

No i to wszystko zakładając, że całe dane masz po stronie frontendu.

Jednak jeśli masz dane na backendzie w bazie, to zwykle nie powinieneś pobierać wszystkich danych z bazy naraz (szczególnie jeśli masz dużo danych w bazie). Wtedy mógłbyś po prostu pobierać odpowiednią porcję danych z backendu i wyświetlać tylko te pobrane dane (mógłbyś też cache'ować sobie pobrane elementy, żeby później nie pobierać drugi raz). Ale już logikę pobierania wycinka danych z bazy trzeba byłoby zrealizować na backendzie.