Flux

Pagination bar ​

The pagination bar displays information about the current page of data and allows the user to change how many items are shown per page.

1–10 of 100

Empty data sets

When total is 0 the range readout shows 0 as its lower bound instead of 1, so an empty result reads as 0–0 of 0 rather than implying a first item that does not exist.

Props

limits?: number[]
The different limits that are available.
Default: [ 5, 10, 25, 50, 100 ]

page: number
The current page.

per-page: number
The number of items per page.

total: number
The total number of items.

Emits

limit: [number]
Triggered when the limit is changed.

navigate: [number]
Triggered when a page change occurred.

Examples ​

Basic

A basic pagination bar.

1–10 of 100

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxPaginationBar
                :page="1"
                :per-page="10"
                :total="100"/>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPaginationBar, FluxPane, FluxPaneBody } from '@flux-ui/components';
</script>

Used components ​