Radix Vue

Appearance

Pagination ​

Displays data in paged format and provides navigation between pages.

Features ​

  • Enable quick access to first, or last page
  • Enable to show edges constantly, or not

Installation ​

Install the component from your command line.

bash
npm install radix-vue

Anatomy ​

Import all parts and piece them together.

vue
<script setup>
import { PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot } from 'radix-vue'
</script>

<template>
  <PaginationRoot>
    <PaginationList v-slot="{ items }">
      <PaginationFirst />
      <PaginationPrev />
      <template v-for="(page, index) in items">
        <PaginationListItem v-if="page.type === 'page'" :key="index" />
        <PaginationEllipsis v-else :key="page.type" :index="index">
          &#8230;
        </PaginationEllipsis>
      </template>
      <PaginationNext />
      <PaginationLast />
    </PaginationList>
  </PaginationRoot>
</template>

API Reference ​

Root ​

Contains all of the paginations parts.

PropTypeDefault
page
number
defaultPage
number
1
total
number
10
itemsPerPage
number
10
siblingCount
number
3
showEdges
boolean
EmitType
@update:page
(value: number) => void

List ​

Used to show the list of pages. It also makes pagination accessible to assistive technologies.

PropTypeDefault
asChild
boolean
false

Item ​

Used to render the button that changes the current page.

PropTypeDefault
value
number
asChild
boolean
false
Data AttributeValue
[data-selected]"true" | ""
[data-type]"page"

Ellipsis ​

Placeholder element when the list is long, and only a small amount of siblingCount was set and showEdges was set to true.

PropTypeDefault
asChild
boolean
false
Data AttributeValue
[data-type]"ellipsis"

First ​

Triggers that set the page value to 1

PropTypeDefault
asChild
boolean
false

Prev ​

Triggers that set the page value to the previous page

PropTypeDefault
asChild
boolean
false

Next ​

Triggers that set the page value to the next page

PropTypeDefault
asChild
boolean
false

Last ​

Triggers that set the page value to the last page

PropTypeDefault
asChild
boolean
false

Examples ​

With ellipsis ​

You can add PaginationEllipsis as a visual cue for more previous and after items.

vue
<script setup lang="ts">
import { PaginationEllipsis, PaginationList, PaginationListItem, PaginationRoot } from 'radix-vue'
</script>

<template>
  <PaginationRoot>
    <PaginationList v-slot="{ items }">
      <template v-for="(page, index) in items">
        <PaginationListItem v-if="page.type === 'page'" :key="index" />
        <PaginationEllipsis v-else :key="page.type" :index="index">
          &#8230;
        </PaginationEllipsis>
      </template>
    </PaginationList>
  </PaginationRoot>
</template>

With first/last button ​

You can add PaginationFirst to allow user to navigate to first page, or PaginationLast to navigate to last page.

vue
<script setup lang="ts">
import { PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationRoot } from 'radix-vue'
</script>

<template>
  <PaginationRoot>
    <PaginationList>
      <PaginationFirst />
      ...
      <PaginationLast />
    </PaginationList>
  </PaginationRoot>
</template>

Control page programmatically ​

You can control the current page by passing it a reactive value.

vue
<script setup lang="ts">
import { PaginationRoot } from 'radix-vue'
import { Select } from './custom-select'
import { ref } from 'vue'

const currentPage = ref(1)
</script>

<template>
  <Select v-model="currentPage" />
  <PaginationRoot v-model:page="currentPage">
    ...
  </PaginationRoot>
</template>

Keyboard Interactions ​

KeyDescription
Tab
Moves focus to the next focusable element.
Space
When focus is on a any trigger, trigger selected page or arrow navigation
Enter
When focus is on a any trigger, trigger selected page or arrow navigation