Components

Button pagination

Explore the ButtonPagination component for navigating paginated data using interactive buttons and customizable controls.

ButtonPagination

SimplePagination

Component

View code

Show playground

Showing 41 to 50 of 200 results

Rows

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

Showing 1 to 10 of 80 results

Rows

 <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>
        <ButtonPagination 
            v-model:modelValue="currentPage"
            v-model:items-per-page="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
`styleType`	—	`ButtonPaginationStyle.BUTTON`	`ButtonPaginationStyle`
`modelValue`	`true`	—	`number`
`totalItems`	`true`	—	`number`
`itemsPerPage`	—	`10`	`number`
`showRowsPerPage`	—	`true`	`boolean`
`rowsPerPageLabel`	—	—	`string`
`rowsPerPageOptions`	—	—	`PaginationRowPerPageOption[]`
`resultTextMultiplePages`	—	`useDSConfig().pagination.resultTextMultiplePages()`	`string`
`resultTextSinglePage`	—	`useDSConfig().pagination.resultTextSinglePage()`	`string`
`resultTextSingleItem`	—	`useDSConfig().pagination.resultTextSingleItem()`	`string`
`mobileBreakpoint`	—	`1024`	`number`
`ariaLabelPrevious`	—	`useDSConfig().pagination.previousPageText()`	`string`
`ariaLabelNext`	—	`useDSConfig().pagination.nextPageText()`	`string`
`ariaLabelPage`	—	`useDSConfig().pagination.pageText()`	`string`

styleType

Sets the style for the page button navigation. It uses the ButtonPaginationStyle enum.

 <template>
    <ButtonPagination :styleType="ButtonPaginationStyle.BUTTON"/>
</template>

Options

Value	Description
`BUTTON`	The navigation bar uses button-styled pagination items.
`OVERLINE`	The navigation bar uses overline-styled buttons as pagination items.

modelValue

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

 <template>
    <ButtonPagination v-model:modelValue="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>
    <ButtonPagination 
        :totalItems="data.length"
    />
</template>

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

Type: number
Required: true

itemsPerPage

The v-model value of the component used to control the number of items to be displayed per page.

 <template>
    <ButtonPagination 
        v-model:items-per-page="currentItemsPerPage"
    />
</template>

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

Type: number
Default: 10

showRowsPerPage

If set to true, the component will display the rows per page dropdown.

 <template>
    <ButtonPagination 
        :showRowsPerPage="true"
    />
</template>

Type: boolean
Default: true

rowsPerPageLabel

Sets the label for the rows per page dropdown.

 <template>
    <ButtonPagination 
        rowsPerPageLabel="Rows"
    />
</template>

Type: string

rowsPerPageOptions

Sets the options for the rows per page dropdown.

By default, it uses this following options:

 <template>
    <ButtonPagination 
        :rowsPerPageOptions="customRowsPerPageOptions"
    />
</template>

<script setup lang="ts">
const customRowsPerPageOptions: PaginationRowPerPageOption[] = [
    {
        text: "5",
        value: 5
    },
    {
        text: "10",
        value: 10
    },
    {
        text: "25",
        value: 25
    },
]
</script>

Type: PaginationRowPerPageOption[]

TypeScript interface

 interface PaginationRowPerPageOption {
    text: string
    value: number
}

resultTextMultiplePages

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

 <template>
    <ButtonPagination 
        :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>
    <ButtonPagination 
        :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

mobileBreakpoint

Sets the viewport width (in pixels) below which the pagination switches to its mobile layout (stacked controls and a reduced page list). It is the single source of truth for responsive switching and is reactive: changing it updates the layout immediately.

 <template>
    <ButtonPagination 
        :mobileBreakpoint="1024"
    />
</template>

Type: number
Default: 1024

ariaLabelPrevious

Sets the aria-label for the previous page button. Falls back to useDSConfig().pagination.previousPageText().

 <template>
    <ButtonPagination 
        ariaLabelPrevious="Previous page"
    />
</template>

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

ariaLabelNext

Sets the aria-label for the next page button. Falls back to useDSConfig().pagination.nextPageText().

 <template>
    <ButtonPagination 
        ariaLabelNext="Next page"
    />
</template>

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

ariaLabelPage

Sets the aria-label template for each page number button. The {page} placeholder is replaced with the button's page number. Falls back to useDSConfig().pagination.pageText().

 <template>
    <ButtonPagination 
        ariaLabelPage="Page {page}"
    />
</template>

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