@ea-lab/reactive-json-docs/public/rjbuild/docs/core/element/special/PageControls.yaml

Complete documentation for Reactive-JSON - Components, examples and LLM-parsable guides

renderView:
  - type: Markdown
    content: |
      # PageControls

      The `PageControls` component displays the pagination controls provided by the current `PaginationContext`. It is useful for rendering navigation controls (such as next/previous buttons or page numbers) in paginated lists or tables.

      ## Properties

      None.

      ## Behavior
      - Renders the pagination controls from the current `PaginationContext` if available.
      - If no pagination controls are present in the context, renders nothing.
      - Intended to be used inside paginated views or lists.

      ## Pagination Context
      The pagination context is provided by components like `Switch` when the `paginated` property is set to `true`.

  - type: RjBuildDescriber
    title: Interactive Example with Switch
    description:
      - type: div
        content: This example shows how PageControls works with a paginated Switch component to display a list of users.
    toDescribe:
      renderView:
        - type: div
          attributes:
            class: container-fluid p-3
          content:
            - type: h3
              content: Paginated User List
            
            - type: div
              attributes:
                class: mb-3
              content:
                - type: strong
                  content: "Total number of users: "
                - type: Count
                  context: global
                  count: ~.users
                  
            - type: Switch
              content: ~.users
              singleOption:
                load: userItem
              paginated: true
              paginationProps:
                pageMaxItemCount: 3
                maxPageButtonsCount: 5
              before:
                type: div
                attributes:
                  class: alert alert-info
                content: "Here are the users (3 per page):"
              after:
                - type: div
                  attributes:
                    class: d-flex justify-content-center mt-3
                  content:
                    type: PageControls
                - type: div
                  attributes:
                    class: text-center mt-2 text-muted
                  content: "Use the controls above to navigate between pages"

      templates:
        userItem:
          type: div
          attributes:
            class: card mb-2
          content:
            type: div
            attributes:
              class: card-body
            content:
              - type: h5
                attributes:
                  class: card-title
                content: ~.name
              - type: div
                attributes:
                  class: card-text
                content:
                  - type: div
                    content: ["Email: ", ~.email]
                  - type: div
                    content: ["Department: ", ~.department]

      data:
        users:
          - name: "Alice Martin"
            email: "alice.martin@example.com"
            department: "Development"
          - name: "Bob Dupont"
            email: "bob.dupont@example.com"
            department: "Design"
          - name: "Claire Bernard"
            email: "claire.bernard@example.com"
            department: "Marketing"
          - name: "David Rousseau"
            email: "david.rousseau@example.com"
            department: "Development"
          - name: "Emma Leroy"
            email: "emma.leroy@example.com"
            department: "Support"
          - name: "François Moreau"
            email: "francois.moreau@example.com"
            department: "Design"
          - name: "Gabrielle Petit"
            email: "gabrielle.petit@example.com"
            department: "Marketing"
          - name: "Henri Blanc"
            email: "henri.blanc@example.com"
            department: "Development"
          - name: "Isabelle Roux"
            email: "isabelle.roux@example.com"
            department: "Support"
          - name: "Julien Vincent"
            email: "julien.vincent@example.com"
            department: "Design"

  - type: Markdown
    content: |
      ## Limitations
      - Only works if a `PaginationContext` is present and provides controls.
      - Does not manage pagination state itself; only renders controls from the context.
      - No customization of the controls via props.
      - Entirely depends on the parent component (like Switch) for pagination logic.

templates:

data: {}