Tailwind CSS Pagination - Nuanxa

Komponen pagination digunakan untuk berpindah antar halaman dari data yang dipaginasi. Komponen ini mendukung berbagai gaya dan mudah dikustomisasi menggunakan Tailwind CSS.

Requires Nuanxa JS

Default pagination

Komponen pagination standar dengan tombol nomor halaman.

            
<div
  class="inline-flex rounded-md shadow-sm border border-gray-300 dark:border-gray-700 overflow-hidden divide-x divide-gray-300 dark:divide-gray-700"
  role="group"
>
  <!-- Left -->
  <button
    type="button"
    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
  >
    Prev
  </button>

  <!-- Middle -->
  <button
    type="button"
    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
  >
    1
  </button>
  <button
    type="button"
    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
  >
    2
  </button>
  <button
    type="button"
    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
  >
    3
  </button>
  <button
    type="button"
    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
  >
    4
  </button>
  <button
    type="button"
    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
  >
    5
  </button>

  <!-- Right -->
  <button
    type="button"
    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
  >
    Next
  </button>
</div>

Pagination with icon

Pagination dengan tombol navigasi berbasis ikon seperti sebelumnya dan berikutnya.

            
<div
  class="inline-flex rounded-md shadow-sm border border-gray-300 dark:border-gray-700 overflow-hidden divide-x divide-gray-300 dark:divide-gray-700"
  role="group"
>
  <!-- Left -->
  <button
    type="button"
    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
  >
    <i class="fas fa-chevron-left"></i>
  </button>

  <!-- Middle -->
  <button
    type="button"
    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
  >
    1
  </button>
  <button
    type="button"
    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
  >
    2
  </button>
  <button
    type="button"
    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
  >
    3
  </button>
  <button
    type="button"
    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
  >
    4
  </button>
  <button
    type="button"
    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
  >
    5
  </button>

  <!-- Right -->
  <button
    type="button"
    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
  >
    <i class="fas fa-chevron-right"></i>
  </button>
</div>

Simple pagination

Komponen pagination dasar tanpa elemen tambahan.

            
<div
  class="inline-flex rounded-md shadow-sm border border-gray-300 dark:border-gray-700 divide-x divide-gray-300 dark:divide-gray-700 overflow-hidden"
  role="group"
>
  <!-- Left -->
  <button
    type="button"
    class="px-4 py-2 text-sm font-medium flex items-center text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-400"
  >
    Prev
  </button>

  <!-- Right -->
  <button
    type="button"
    class="px-4 py-2 text-sm font-medium flex items-center text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-400"
  >
    Next
  </button>
</div>

Simple pagination icon

Komponen pagination sederhana dengan ikon navigasi.

            
<div
  class="inline-flex rounded-md shadow-sm border border-gray-300 dark:border-gray-700 divide-x divide-gray-300 dark:divide-gray-700 overflow-hidden"
  role="group"
>
  <!-- Left -->
  <button
    type="button"
    class="px-4 py-2 text-sm font-medium flex items-center text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-400"
  >
    <i class="fa-solid fa-arrow-left"></i>
  </button>

  <!-- Right -->
  <button
    type="button"
    class="px-4 py-2 text-sm font-medium flex items-center text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-400"
  >
    <i class="fa-solid fa-arrow-right"></i>
  </button>
</div>

Pagination with text

Komponen pagination sederhana dengan ikon navigasi.

Showing 1-5 of 30

Previous 1 2 3 ... 6 Next

            
<div
  class="flex lg:flex-row flex-col items-center lg:justify-between justify-center lg:space-y-0 space-y-3"
>
  <p class="text-sm text-gray-600 dark:text-gray-400">Showing 1-5 of 30</p>

  <div class="flex items-center gap-1">
    <!-- Previous (disabled) -->
    <a
      href="#previous"
      class="px-3 py-1 text-sm border border-gray-200 dark:border-gray-700 rounded text-gray-400 cursor-not-allowed pointer-events-none"
      aria-disabled="true"
    >
      Previous
    </a>

    <!-- Active page -->
    <a
      href="#1"
      aria-current="page"
      class="px-3 py-1 text-sm border border-gray-200 dark:border-gray-700 rounded bg-blue-400 text-white dark:bg-gray-700"
    >
      1
    </a>

    <!-- Page numbers -->
    <a
      href="#2"
      class="px-3 py-1 text-sm border border-gray-200 dark:border-gray-700 rounded hover:bg-blue-200 dark:hover:bg-gray-700"
    >
      2
    </a>

    <a
      href="#3"
      class="px-3 py-1 text-sm border border-gray-200 dark:border-gray-700 rounded hover:bg-blue-200 dark:hover:bg-gray-700"
    >
      3
    </a>

    <span class="px-2 text-sm text-gray-500">...</span>

    <a
      href="#6"
      class="px-3 py-1 text-sm border border-gray-200 dark:border-gray-700 rounded hover:bg-blue-200 dark:hover:bg-gray-700"
    >
      6
    </a>

    <!-- Next -->
    <a
      href="#next"
      class="px-3 py-1 text-sm border border-gray-200 dark:border-gray-700 rounded hover:bg-blue-200 dark:hover:bg-gray-700"
    >
      Next
    </a>
  </div>
</div>

Navbar

Progress