PaginationIconsOnly() — ui Function Reference

Architecture documentation for the PaginationIconsOnly() function in pagination-icons-only.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ PaginationIconsOnly() — ui Function Reference

Dependency Diagram

graph TD
  11db7ea7_3d22_3fdf_ffa2_826d156e3d78["PaginationIconsOnly()"]
  91fa31e0_1ee2_b94c_f10f_3025ea839f66["pagination-icons-only.tsx"]
  11db7ea7_3d22_3fdf_ffa2_826d156e3d78 -->|defined in| 91fa31e0_1ee2_b94c_f10f_3025ea839f66
  style 11db7ea7_3d22_3fdf_ffa2_826d156e3d78 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/pagination-icons-only.tsx lines 18–49

export function PaginationIconsOnly() {
  return (
    <div className="flex items-center justify-between gap-4">
      <Field orientation="horizontal" className="w-fit">
        <FieldLabel htmlFor="select-rows-per-page">Rows per page</FieldLabel>
        <Select defaultValue="25">
          <SelectTrigger className="w-20" id="select-rows-per-page">
            <SelectValue />
          </SelectTrigger>
          <SelectContent align="start">
            <SelectGroup>
              <SelectItem value="10">10</SelectItem>
              <SelectItem value="25">25</SelectItem>
              <SelectItem value="50">50</SelectItem>
              <SelectItem value="100">100</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
      </Field>
      <Pagination className="mx-0 w-auto">
        <PaginationContent>
          <PaginationItem>
            <PaginationPrevious href="#" />
          </PaginationItem>
          <PaginationItem>
            <PaginationNext href="#" />
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    </div>
  )
}