AisPagination

AisPagination is a custom input component that provides a current page number input control. The value should be bound via v-model in your app. Page numbers are indexed from 1. The number of pages is computed from the provided prop values for total-rows and per-page.

Selected Page = [5]

<template>
  <div>
    <AisPagination v-model="page"
                   :total-rows="100"
                   :per-page="10"
                   :limit="5"
                   :variant="'secondary'"
                   :size="'sm'"
                   :align="'fill'"
                   :disabled="false"
    >
    </AisPagination>

    <div class="mt-3">Selected Page = [{{ page }}]</div>
  </div>
</template>

<script setup>
  import {ref} from 'vue';
  import { AisPagination } from '@ais-public/ais-components';

  const page = ref(5)
</script>

Size

Selected Page = [5]

<template>
  <div>
    <div class="space-y-3">
      <div>
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'xs'"
                       :align="'start'"
        >
        </AisPagination>
      </div>
      <div>
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       :align="'start'"
        >
        </AisPagination>
      </div>
      <div>
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'md'"
                       :align="'start'"
        >
        </AisPagination>
      </div>
      <div>
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'lg'"
                       :align="'start'"
        >
        </AisPagination>
      </div>
      <div>
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'xl'"
                       :align="'start'"
        >
        </AisPagination>
      </div>
    </div>


    <div class="mt-3">Selected Page = [{{ page }}]</div>
  </div>
</template>

<script setup>
    import {ref} from 'vue';
    import { AisPagination } from '@ais-public/ais-components';

    const page = ref(5)
</script>

Align

start

center

end

fill

Selected Page = [5]

<template>
  <div>
    <div class="flex flex-col gap-4">
      <div>
        <div class="font-bold">start</div>
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       :align="'start'"
        >
        </AisPagination>
      </div>
      <div>
        <div class="text-center font-bold">center</div>
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       :align="'center'"
        >
        </AisPagination>
      </div>
      <div>
        <div class="text-right font-bold">end</div>
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       :align="'end'"
        >
        </AisPagination>
      </div>
      <div>
        <div class="font-bold">fill</div>
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       :align="'fill'"
        >
        </AisPagination>
      </div>
    </div>


    <div class="mt-3">Selected Page = [{{ page }}]</div>
  </div>
</template>

<script setup>
    import {ref} from 'vue';
    import { AisPagination } from '@ais-public/ais-components';

    const page = ref(5)
</script>

Custom Text

Selected Page = [5]

<template>
  <div>
    <div class="space-y-3">
      <div>
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       firstText="First"
                       prevText="Prev"
                       nextText="Next"
                       lastText="Last"
        >
        </AisPagination>
      </div>
    </div>


    <div class="mt-3 text-center">Selected Page = [{{ page }}]</div>
  </div>
</template>

<script setup>
    import {ref} from 'vue';
    import { AisPagination } from '@ais-public/ais-components';

    const page = ref(5)
</script>

Hide Ellipsis

Selected Page = [5]

<template>
  <div>
    <div class="space-y-3">
      <div>
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       :hideEllipsis="true"
        >
        </AisPagination>
      </div>
    </div>


    <div class="mt-3 text-center">Selected Page = [{{ page }}]</div>
  </div>
</template>

<script setup>
    import {ref} from 'vue';
    import { AisPagination } from '@ais-public/ais-components';

    const page = ref(5)
</script>

Goto First/Last Buttons

Selected Page = [5]

<template>
  <div>
    <div class="space-y-3">
      <div>
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       :firstNumber="true"
                       :lastNumber="true"
        >
        </AisPagination>
      </div>
    </div>


    <div class="mt-3 text-center">Selected Page = [{{ page }}]</div>
  </div>
</template>

<script setup>
    import {ref} from 'vue';
    import { AisPagination } from '@ais-public/ais-components';

    const page = ref(5)
</script>

Slots

Selected Page = [5]

<template>
  <div>
    <div class="space-y-3">
      <div>
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
        >
          <template #first-text>
            <AisIcon icon="first" class="icon-only"/>
          </template>
          <template #prev-text>
            <AisIcon icon="left" class="icon-only"/>
          </template>
          <template #ellipsis-text>
            <AisIcon :icon="faEllipsisH" class="icon-only"/>
          </template>
          <template #next-text>
            <AisIcon icon="right" class="icon-only"/>
          </template>
          <template #last-text>
            <AisIcon icon="last" class="icon-only"/>
          </template>
        </AisPagination>
      </div>
    </div>


    <div class="mt-3 text-center">Selected Page = [{{ page }}]</div>
  </div>
</template>

<script setup>
    import {ref} from 'vue';
    import { AisPagination } from '@ais-public/ais-components';
    import { AisIcon } from '@ais-public/ais-components';
    import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
    import { library } from '@fortawesome/fontawesome-svg-core'
    library.add( faEllipsisH)


    const page = ref(5)
</script>

Rounded

rounded-none

rounded-sm

rounded

rounded-md

rounded-xl

rounded-2xl

rounded-3xl

rounded-full

Selected Page = [5]

<template>
  <div class="grid gap-4 text-center">
    <div class="grid grid-cols-2 gap-4">
      <div class="grid gap-4">
        <Example label="rounded-none">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         rounded="none"
          >
          </AisPagination>
        </Example>
        <Example label="rounded-sm">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         rounded="sm"
          >
          </AisPagination>
        </Example>
        <Example label="rounded">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         rounded
          >
          </AisPagination>
        </Example>
        <Example label="rounded-md">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         rounded="md"
          >
          </AisPagination>
        </Example>
      </div>
      <div class="grid gap-4">
        <Example label="rounded-xl">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         rounded="xl"
          >
          </AisPagination>
        </Example>
        <Example label="rounded-2xl">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         rounded="2xl"
          >
          </AisPagination>
        </Example>
        <Example label="rounded-3xl">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         rounded="3xl"
          >
          </AisPagination>
        </Example>
        <Example label="rounded-full">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         rounded="full"
          >
          </AisPagination>
        </Example>
      </div>
    </div>


    <div>Selected Page = [{{ page }}]</div>
  </div>
</template>

<script setup>
    import {ref} from 'vue';
    import { AisPagination } from '@ais-public/ais-components';
    import Example from "@/components/docs/ComponentExample.vue";

    const page = ref(5)
</script>

Variants

primary

secondary

default

info

success

warning

danger

primary outline

secondary outline

default outline

info outline

success outline

warning outline

danger outline

Selected Page = [5]

<template>
  <div class="flex flex-col gap-4 text-center">
    <div class="grid grid-cols-2">
      <div class="flex flex-col gap-4">
        <Example label="primary">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="primary"
          >
          </AisPagination>
        </Example>
        <Example label="secondary">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="secondary"
          >
          </AisPagination>
        </Example>
        <Example label="default">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="default"
          >
          </AisPagination>
        </Example>
        <Example label="info">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="info"
          >
          </AisPagination>
        </Example>
        <Example label="success">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="success"
          >
          </AisPagination>
        </Example>
        <Example label="warning">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="warning"
          >
          </AisPagination>
        </Example>
        <Example label="danger">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="danger"
          >
          </AisPagination>
        </Example>
      </div>

      <div class="flex flex-col gap-4">
        <Example label="primary outline">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="primary"
                         outline
          >
          </AisPagination>
        </Example>
        <Example label="secondary outline">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="secondary"
                         outline
          >
          </AisPagination>
        </Example>
        <Example label="default outline">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="default"
                         outline
          >
          </AisPagination>
        </Example>
        <Example label="info outline">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="info"
                         outline
          >
          </AisPagination>
        </Example>
        <Example label="success outline">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="success"
                         outline
          >
          </AisPagination>
        </Example>
        <Example label="warning outline">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="warning"
                         outline
          >
          </AisPagination>
        </Example>
        <Example label="danger outline">
          <AisPagination v-model="page"
                         :total-rows="100"
                         :per-page="10"
                         :size="'sm'"
                         variant="danger"
                         outline
          >
          </AisPagination>
        </Example>
      </div>

    </div>

    <div>Selected Page = [{{ page }}]</div>
  </div>
</template>

<script setup>
    import {ref} from 'vue';
    import { AisPagination } from '@ais-public/ais-components';
    import Example from "@/components/docs/ComponentExample.vue"

    const page = ref(5)
</script>

Component Reference

Props

Property	Type(s)	Required	Default	Description	Deprecated
align	String		'center'	Alignment of the pagination buttons Valid values: start, left, center, end, right, fill	false
ariaControls	String		''	ID of the element or component that this controls. Value is placed in the aria-controls attribute	false
ariaLabel	String		'Pagination'	Value to place in the aria-label attribute of the pagination control	false
disabled	Boolean		false	When set to true, disables the component's functionality and places it in a disabled state	false
ellipsisClass	Array, Object, String		''	Class(es) to apply to the 'ellipsis' placeholders	false
ellipsisText	String		undefined	Content to place in the ellipsis placeholder	false
firstClass	Array, Object, String		null	Class(es) to apply to the 'Go to first page' button	false
firstNumber	Boolean		false	Display first page number instead of Goto First button	false
firstText	String		undefined	Content to place in the goto first page button	false
hideEllipsis	Boolean		false	Do not show ellipsis buttons	false
hideGotoEndButtons	Boolean		false	Hides the goto first and goto last page buttons	false
labelFirstPage	String		'Go to first page'	Value to place in the aria-label attribute of the goto first page button	false
labelLastPage	String		'Go to last page'	Value to place in the aria-label attribute of the goto last page button	false
labelNextPage	String		'Go to next page'	Value to place in the aria-label attribute of the goto next page button	false
labelPage	Func, String		'Go to page'	Value to place in the aria-label attribute of the goto page button. Page number will be appended automatically	false
labelPrevPage	String		'Go to previous page'	Value to place in the aria-label attribute of the goto previous page button	false
lastClass	Array, Object, String		''	Class(es) to apply to the 'Go to last page' button	false
lastNumber	Boolean		false	Display last page number instead of 'Goto Last' button	false
lastText	String		undefined	Content to place in the goto last page button	false
limit	Number, String		5	Maximum number of buttons to show (including ellipsis if shown, but excluding the bookend buttons)	false
modelValue	Number		1	The current page number	false
nextClass	Array, Object, String		''	Class(es) to apply to the 'Go to next page' button	false
nextText	String		undefined	Content to place in the goto next page button	false
outline	Boolean		false	Applies one of the theme color variants to the border instead of the background. This replaces the deprecated alternate prop	false
pageClass	Array, Object, String		''	Class(es) to apply to the 'Go to page #' buttons	false
perPage	Number, String		10	Number of rows per page	false
pills	Boolean		false	Applies pill styling to the pagination buttons	false
prevClass	Array, Object, String		null	Class(es) to apply to the 'Go to previous page' button	false
prevText	String		undefined	Content to place in the goto previous page button	false
rounded	Boolean, String		undefined	Applies rounded corners using TailwindCSS's rounded classes	false
size	String		'sm'	Size of the rendered buttons Valid values: xs, sm, md, lg, xl	false
totalRows	Number, String		0	Total number of rows in the dataset	false
variant	String		'default'	Applies one of the theme color variants to the component.	false

Slots

Name	Scoped	Description
ellipsis-text	No	The '...' indicator content
first-text	No	The "go to first page" button content
last-text	No	The "go to last page" button content
next-text	No	The "go to next page" button content
prev-text	No	The "go to previous page" button content

Events

Event	Arguments	Description
change	page number - The current page	Emitted when the page changes
input	page number - The current page	Emitted when the page changes
update:modelValue	page number - The current page	Emitted when the page changes