Cara Membuat Pagination dengan React.js

Pagination merupakan suatu metode yang digunakan menangani data yang besar. Dengan cara memuat potongan data yang diperlukan dari kumpulan data total berdasarkan interaksi pengguna akhir dengan kontrol pagination.

Dengan menerapkan pagination dapat lebih cepat saat memuat halaman web karena tidak semua data akan ditampilkan akan tetapi di bagi menjadi beberapa bagian.

Pada artikel ini kita akan belajar cara membuat komponen pagination dengan menggunakan React.js untuk membuat pagination kumpulan data yang besar. Kita akan membuat tampilan beberapa item beserta quantity dengan menerapkan pagination.

Menyiapkan Proyek

Langkah awal kita membuat proyek react.js dengan menggunakan perintah berikut yang dapat kalian jalankan pada terminal.

npx create-react-app pagination

Setelah berhasil membuat proyek react.js makan silahkan masuk ke folder yang baru saja dibuat dengan perintah berikut.

cd pagination

Langkah selanjutnya kita akan menginstall packagae yang diperlukan yaitu axios dan bootsrap. Untuk menginstal package tersebut kalian bisa jalankan perintah berikut ini di terminal.

npm install [email protected] axios

Tunggu hingga proses instal nya berhasil, Jika proses instal berhasil langkah selanjutnya silahkan buka file index.js yang berada di dalam folder src. Pada line awal di file index.js silahkan tambahkan kode berikut.

import "bootstrap/dist/css/bootstrap.min.css";

kode di atas untuk memanggil style bootstrap. Sekarang kita bisa menggunakan style yang disediakan oleh bootstrap.

Baik, langkah selanjutnya kita akan membuat data dummy. Silahkan buka folder public kemudian silahkan kalian buat file dengan nama items.json dan salin data berikut di file items.json

[
  {
    "id": 1,
    "item": "large box",
    "qty": 20
  },
  {
    "id": 2,
    "item": "small box",
    "qty": 55
  },
  {
    "id": 3,
    "item": "medium box",
    "qty": 30
  },
  {
    "id": 4,
    "item": "envelope",
    "qty": 100
  },
  {
    "id": 5,
    "item": "stamps",
    "qty": 125
  },
  {
    "id": 6,
    "item": "tape",
    "qty": 20
  },
  {
    "id": 7,
    "item": "bubble wrap",
    "qty": 30
  },
  {
    "id": 8,
    "item": "test A",
    "qty": 30
  },
  {
    "id": 9,
    "item": "test B",
    "qty": 34
  },
  {
    "id": 10,
    "item": "test C",
    "qty": 55
  },
  {
    "id": 11,
    "item": "test D",
    "qty": 4
  },
  {
    "id": 12,
    "item": "test E",
    "qty": 23
  },
  {
    "id": 13,
    "item": "test F",
    "qty": 46
  },
  {
    "id": 14,
    "item": "test G",
    "qty": 44
  },
  {
    "id": 15,
    "item": "test H",
    "qty": 56
  },
  {
    "id": 16,
    "item": "asdsa",
    "qty": 90
  }
]

Mengambil Data dengan Axios dan Menerapkan Pagination

Langkah selanjutnya silahkan kalian buka file App.js kemudian kalian salin kode berikut ini.

import React, { useState, useEffect } from "react";
import axios from "axios";
import Items from "./components/Items";
import Pagination from "./components/Pagination";

function App() {
  const [data, setData] = useState([]);
  const [, setLoading] = useState(true);

  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage] = useState(5);

  useEffect(() => {
    axios
      .get("items.json")
      .then((res) => {
        setData(res.data);
        setLoading(false);
      })
      .catch(() => {
        alert("There was an error while retrieving the data");
      });
  }, []);

  const indexOfLastItems = currentPage * itemsPerPage;
  const indexOfFirstItems = indexOfLastItems - itemsPerPage;
  const currentItems = data.slice(indexOfFirstItems, indexOfLastItems);
  const nPages = Math.ceil(data.length / itemsPerPage);

  return (
    <div className="container mt-5">
      <Items data={currentItems} />
      <Pagination
        nPages={nPages}
        currentPage={currentPage}
        setCurrentPage={setCurrentPage}
      />
    </div>
  );
}

export default App;

Membuat Component Items

Langkah selanjutnya kita membuat folder baru di dalam folder src dengan nama components. Di dalam folder components silahkan buat file baru dengan nama Items.jsx dan salin kode berikut ini.

import React from "react";

const Items = ({ data }) => {
  return (
    <table className="table">
      <thead>
        <tr>
          <th scope="col">ID</th>
          <th scope="col">Item Name</th>
          <th scope="col">Quantity</th>
        </tr>
      </thead>
      <tbody>
        {data.map((item) => (
          <tr>
            <td>{item.id} </td>
            <td>{item.item} </td>
            <td>{item.qty} </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default Items;

Kode diatas akan menampilkan tabel dari data dummy yang telah dibuat tadi.

Membuat Component Pagination

Selanjutnya kita buat file baru di dalam folder components dengan nama Pagination.jsx dan copy kode berikut ini.

import React from "react";

const Pagination = ({ nPages, currentPage, setCurrentPage }) => {
  const pageNumbers = [...Array(nPages + 1).keys()].slice(1);

  const nextPage = () => {
    if (currentPage !== nPages) setCurrentPage(currentPage + 1);
  };
  const prevPage = () => {
    if (currentPage !== 1) setCurrentPage(currentPage - 1);
  };
  return (
    <nav>
      <ul className="pagination justify-content-center">
        <li className="page-item">
          <a className="page-link" onClick={prevPage} href={() => false}>
            Previous
          </a>
        </li>
        {pageNumbers.map((pgNumber) => (
          <li
            key={pgNumber}
            className={`page-item ${currentPage === pgNumber ? "active" : ""} `}
          >
            <a
              onClick={() => setCurrentPage(pgNumber)}
              className="page-link"
              href={() => false}
            >
              {pgNumber}
            </a>
          </li>
        ))}
        <li className="page-item">
          <a className="page-link" onClick={nextPage} href={() => false}>
            Next
          </a>
        </li>
      </ul>
    </nav>
  );
};

export default Pagination;

Kode di atas untuk menampilkan next page dan Previous, serta juga menampilkan halaman per page dengan nomor sesuai dengan jumlah page nya.

Kesimpulan

Dalam artikel ini, kita telah membuat pagination dengan menggunakan react.js. Dari menginisialisasi proyek hingga mengambil data dengan menggunakan axios.