F1 component kit/Tables and lists/PaginationPhone

Pagination

F1 variant06 · pagination

Server pagination with totals: “51–100 of 1,284”, a 25 / 50 / 100 page size, page and size in the URL, jump to page, and “Load more” for append-only logs.

Covers: pagination primitive, pagination designer. Exports: Pagination.

Whole page:CompactComfortableLaravel · navyDTC · midnight green

Anatomy States Density EN · 中文 Edge cases Contract

Anatomy

The component as it sits in the product: English, compact, real data shapes.

51–100 of 1,284Newest first · order # ↓ (fixed sort)Times in Asia/Shanghai (UTC+8)Rows50Page 2 / 26

States

8 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.

middle page

51–100 of 1,284Newest first · order # ↓ (fixed sort)Times in Asia/Shanghai (UTC+8)Rows50Page 2 / 26

first page

1–50 of 1,284Newest first · order # ↓ (fixed sort)Times in Asia/Shanghai (UTC+8)Rows50Page 1 / 26

last page

1251–1284 of 1,284Newest first · order # ↓ (fixed sort)Times in Asia/Shanghai (UTC+8)Rows50Page 26 / 26

page size menu

1–50 of 1,284Newest first · order # ↓ (fixed sort)Times in Asia/Shanghai (UTC+8)Rows50Page 1 / 26

jump to page

51–100 of 1,284Go to page17/ 26

load more (logs)

Showing 200 of 18,412 API request logs

loading next page

Loading page 3…

0 results

0 results

Density

Compact (2b ultra, the default) and comfortable, side by side. Same markup, only the density tokens change.

compact · default · data-density=compact

51–100 of 1,284Newest first · order # ↓ (fixed sort)Times in Asia/Shanghai (UTC+8)Rows50Page 2 / 26

comfortable · data-density=comfortable

51–100 of 1,284Newest first · order # ↓ (fixed sort)Times in Asia/Shanghai (UTC+8)Rows50Page 2 / 26

English · 中文

Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.

51–100 of 1,284Newest first · order # ↓ (fixed sort)Times in Asia/Shanghai (UTC+8)Rows50Page 2 / 26

中文 · lang=zh-Hans

51–100 共 1,284最新在前 · 订单号 ↓（固定排序）时间按 Asia/Shanghai (UTC+8)每页50页 2 / 26

Long string · permission denied

The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).

long string

123451–123500 of 1,234,567Newest first · order # ↓ (fixed sort)Times in Asia/Shanghai (UTC+8)Rows50Page 2470 / 24692

permission denied

1–25 of 84Newest first · order # ↓ (fixed sort)Times in Asia/Shanghai (UTC+8)Rows25Page 1 / 4

Totals count only rows your role can see (server-scoped).

Both apps

One @rj/admin-kit component, two themes: the Laravel admin (navy pinned) and the DTC admin (kit v4 Midnight green), by token swap only.

Laravel admin · :root

51–100 of 1,284Newest first · order # ↓ (fixed sort)Times in Asia/Shanghai (UTC+8)Rows50Page 2 / 26

DTC admin · data-theme=dtc

51–100 of 1,284Newest first · order # ↓ (fixed sort)Times in Asia/Shanghai (UTC+8)Rows50Page 2 / 26

Contract

The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.

Export: Pagination · @rj/admin-kit
Props: page · perPage 25|50|100 · total · lastPage · mode pages|loadMore
States: first · middle · last · loading · empty
shadcn / Radix: Select (page size) · Button
Package underneath: nuqs (page, per_page)
Accessibility: nav aria-label=Pagination; disabled arrows are aria-disabled, not removed
API operations: any list with page / per_page (69 GETs), e.g. admin.api-request-logs.index
Phone variant: “Load 25 more” button under the cards