Components

Simple pagination

A minimal pagination component displaying results text with previous and next navigation buttons.

ButtonPagination

SimplePagination

Component

View code

Show playground

Demo with table

Column 1	Column 2	Column 3
John Doe	johndoe@example.com	Active
Jane Smith	janesmith@example.com	Inactive
Alice Johnson	alice.j@example.com	Pending
Bob Brown	bob.brown@example.com	Active
Charlie Davis	charlie.davis@example.com	Inactive
Emma Wilson	emma.wilson@example.com	Pending
Liam Taylor	liam.taylor@example.com	Active
Olivia Moore	olivia.moore@example.com	Inactive
Noah Miller	noah.miller@example.com	Active
Ava Martin	ava.martin@example.com	Pending

 <template>
    <TableWrapper>
        <Table>
            <TableHeader>
                <TableHeaderCell>Column 1</TableHeaderCell>
                <TableHeaderCell>Column 2</TableHeaderCell>
                <TableHeaderCell>Column 3</TableHeaderCell>
            </TableHeader>
            <TableBody>
                <TableRow v-for="(item, index) in paginatedData" :key="index">
                    <TableCell>{{ item.col1 }}</TableCell>
                    <TableCell>{{ item.col2 }}</TableCell>
                    <TableCell>{{ item.col3 }}</TableCell>
                </TableRow>
            </TableBody>
        </Table>
        <SimplePagination 
            v-model="currentPage"
            :itemsPerPage="currentItemsPerPage"
            :totalItems="exampleTableData.length"
        />
    </TableWrapper>
</template>

<script setup lang="ts">
// States
const currentPage = ref(1)
const currentItemsPerPage = ref(10)

// Static example data
const exampleTableData = [
    ....
]

// Computed
const paginatedData = computed(() =>
    getPaginatedData(exampleTableData, currentPage.value, currentItemsPerPage.value)
)
</script>

Props

Props	Required	Default	Type
`modelValue`	`true`	—	`number`
`totalItems`	`true`	—	`number`
`itemsPerPage`	`true`	—	`number`
`resultTextMultiplePages`	—	`useDSConfig().pagination.resultTextMultiplePages()`	`string`
`resultTextSinglePage`	—	`useDSConfig().pagination.resultTextSinglePage()`	`string`
`resultTextSingleItem`	—	`useDSConfig().pagination.resultTextSingleItem()`	`string`
`previousPageAriaLabel`	—	`useDSConfig().pagination.previousPageText()`	`string`
`nextPageAriaLabel`	—	`useDSConfig().pagination.nextPageText()`	`string`

modelValue

The v-model value of the component used to control the current page of the pagination.

 <template>
    <SimplePagination v-model="currentPage" />
</template>

<script setup lang="ts">
const currentPage = ref(1)
</script>

Type: number
Required: true

totalItems

Sets the total number of items to be displayed in the pagination.

 <template>
    <SimplePagination 
        :totalItems="data.length"
    />
</template>

<script setup lang="ts">
const data = [...]
</script>

Type: number
Required: true

itemsPerPage

Seths the the number of items to be displayed per page.

 <template>
    <SimplePagination 
        :itemsPerPage="currentItemsPerPage"
    />
</template>

<script setup lang="ts">
const currentItemsPerPage = ref(10)
</script>

Type: number
Required: true

resultTextMultiplePages

Sets the result text for multiple pages. Falls back to useDSConfig().pagination.resultTextMultiplePages().

 <template>
    <SimplePagination 
        :resultTextMultiplePages="Showing {from} to {to} of {total} results"
    />
</template>

Type: string

resultTextSinglePage

Sets the result text for a single page. Falls back to useDSConfig().pagination.resultTextSinglePage().

 <template>
    <SimplePagination 
        :resultTextSinglePage="Showing {total} results"
    />
</template>

Type: string

resultTextSingleItem

Sets the result text for a single item. Falls back to useDSConfig().pagination.resultTextSingleItem().

 <template>
    <ButtonPagination 
        :resultTextSingleItem="Showing {total} result"
    />
</template>

Type: string

previousPageAriaLabel

The previousPageAriaLabel prop sets the accessible label for the previous page button. Override it for i18n. Falls back to useDSConfig().pagination.previousPageText().

 <template>
    <SimplePagination 
        previousPageAriaLabel="Pagina anterior"
    />
</template>

Type: string
Default: useDSConfig().pagination.previousPageText()

nextPageAriaLabel

The nextPageAriaLabel prop sets the accessible label for the next page button. Override it for i18n. Falls back to useDSConfig().pagination.nextPageText().

 <template>
    <SimplePagination 
        nextPageAriaLabel="Pagina siguiente"
    />
</template>

Type: string
Default: useDSConfig().pagination.nextPageText()