Lists Others Tabs

Pagination (pagination)

Pagination controls provide swift access to all pages while indicating that more pages exist.

🔗 External documentation.

ID Label Description Schema
total Total Current page number and total number of pages
controls Controls A list of exactly 4 links: First, Previous, Next, Last. A link without url property will be disabled (first & previous on the first page, next & last on the last page). 
                        type: array
items:
    type: object
    properties:
        title:
            type: string
        attributes:
            $ref: '#/$defs/attributes_value'
        below:
            type: object

                      
            id: pagination
label: Pagination
description: 'Pagination controls provide swift access to all pages while indicating that more pages exist. '
homepage: 'https://m2.material.io/components/data-tables/'
slots:
    total:
        id: total
        label: Total
        description: 'Current page number and total number of pages'
props:
    controls:
        id: controls
        label: Controls
        description: 'A list of exactly 4 links: First, Previous, Next, Last. A link without url property will be disabled (first & previous on the first page, next & last on the last page).'
        schema:
            type: array
            items:
                type: object
                properties:
                    title:
                        type: string
                    attributes:
                        $ref: '#/$defs/attributes_value'
                    below:
                        type: object
library:
    dependencies:
        - material_icons
    id: pagination
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': pagination
            total: '4 of 10'
            controls:
                2:
                    title: 'Page 5'
                    url: '#'
                3:
                    title: 'Page 10'
                    url: '#'