app/components/ui/paginationControlSize (xs, sm, md, lg)

Pagination

Thành phần phân trang cao cấp được đồng bộ kích thước chuẩn mực với hệ thống Input và Button thông qua ControlSize. Tích hợp tính năng nhảy trang tương tác qua ellipsis (click để nhập hoặc dùng stepper), chọn số dòng hiển thị và tự động co giãn tỷ lệ font/icon theo từng kích thước.

1. Đồng bộ kích thước với Input và Button

Minh họa trực quan sự thẳng hàng tuyệt đối (100% khớp pixel chiều cao) giữa Input, Button và Pagination ở cả 4 cỡ.

Pixel Perfect

xsXS (Extra Small)

Height: 24px (1.5rem)

smSM (Small)

Height: 28px (1.75rem)

mdMD (Medium - Mặc định)

Height: 34px (2.125rem)

lgLG (Large)

Height: 40px (2.5rem)

2. Trình thử nghiệm tương tác (Interactive Playground)

Tùy chỉnh thông số trực tiếp để quan sát phản hồi động của component.

Kích thước (size)

Tổng bản ghi150

Mục / trang

Tùy chọn hiển thị

LoadingẨn toolbarẨn chọn số dòng

Danh sách dữ liệu mẫu (10 mục hiển thị)

#21Bản ghi dữ liệu mẫu #21

Bài viếtĐã duyệt

#22Bản ghi dữ liệu mẫu #22

Sản phẩmĐang xử lý

#23Bản ghi dữ liệu mẫu #23

Tài liệuHoàn tất

#24Bản ghi dữ liệu mẫu #24

Hóa đơnĐã duyệt

#25Bản ghi dữ liệu mẫu #25

Bài viếtĐang xử lý

#26Bản ghi dữ liệu mẫu #26

Sản phẩmHoàn tất

#27Bản ghi dữ liệu mẫu #27

Tài liệuĐã duyệt

#28Bản ghi dữ liệu mẫu #28

Hóa đơnĐang xử lý

#29Bản ghi dữ liệu mẫu #29

Bài viếtHoàn tất

#30Bản ghi dữ liệu mẫu #30

Sản phẩmĐã duyệt

Showing 21 to 30 of 150

Mẹo sử dụng: Bạn có thể click trực tiếp vào nút dấu ba chấm ... để nhập số trang bất kỳ và nhấn Enter hoặc dùng phím mũi tên lên/xuống để nhảy trang siêu nhanh!

3. Sử dụng độc lập từng thành phần con

Khi bạn chỉ cần thanh nút trang PaginationLinks hoặc thanh thông tin PaginationToolbar riêng rẽ.

Chỉ PaginationLinksTrang hiện tại: 7/20

Chỉ PaginationToolbarĐộc lập với links

Showing 21 to 30 of 84

4. Các trường hợp giới hạn (Edge Cases)

Kiểm tra hành vi của Pagination trong các trường hợp đặc biệt.

Trường hợp 1: Chỉ có 1 trang

Thành phần links tự động ẩn khi tổng số trang ≤ 1 để giao diện gọn gàng.

Showing 1 to 5 of 5

Trường hợp 2: Ít trang (≤ 5)

Không xuất hiện dấu ba chấm ellipsis, tất cả các số trang đều hiển thị trực tiếp.

Showing 11 to 20 of 30

Trường hợp 3: Rất nhiều trang (> 100)

Xuất hiện cả hai đầu ellipsis, nút trang co giãn tự động theo độ dài ký tự số.

Showing 491 to 500 of 1000

5. Hướng dẫn tích hợp mã nguồn

Mẫu mã nguồn chuẩn để import và sử dụng trong component hoặc route.

import { Pagination } from '~/components/ui/pagination';

// 1. Cách dùng trực tiếp dạng flat props (tiện lợi, ngắn gọn):
<Pagination
  size="sm" // 'xs' | 'sm' | 'md' | 'lg' (mặc định 'md')
  page={currentPage}
  totalSize={totalRecords}
  sizePerPage={pageSize}
  sizePerPageList={[
    { text: '10 / trang', value: 10 },
    { text: '25 / trang', value: 25 },
  ]}
  onPageChange={(page) => setPage(page)}
  onSizePerPageChange={(size) => setPageSize(size)}
  isLoading={isLoading}
/>

// 2. Cách dùng dạng paginationProps (tương thích 100% với TablePagination cũ):
<Pagination
  size="md"
  isLoading={isLoading}
  paginationProps={{
    page,
    totalSize,
    sizePerPage,
    sizePerPageList,
    onPageChange,
    onSizePerPageChange,
  }}
>
  {/* children nếu cần hiển thị bảng hoặc danh sách bên trong */}
</Pagination>

Notifications