OcPageSize component

Description

The OcPageSize component can be used to let the user select how many items will be displayed per page.

Examples

Default

The component needs to be provided with a label, a list of options and the currently selected option via selected. It emits a change event which can be used to change the current selection.

<template>
  <oc-page-size
    label="Items per page"
    :options="[10, 20, 50]"
    :selected="currentSelection"
    @change="setItemsPerPage"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PageSizeOption } from '../../../src/helpers'

const options: number[] = [10, 20, 50]
const currentSelection = ref(options[0])

const setItemsPerPage = (value: PageSizeOption) => {
  currentSelection.value = value as number
}
</script>

Properties

Emits

Slots