CSSScript.com Demo

wc-pagination Web Component Demos

Download Back To CSSScript.Com

Explore live data controls, compact and expanded ranges, custom color themes, page-change events, jump controls, and keyboard navigation.

Live playground

Adjust the data set and move through the generated records.

01 / 03

Sample inventory

Page 7 of 16

Ready for input

    Showing 49–56 of 127

    Range states

    First, middle, final, minimal, and custom-styled examples.

    02 / 03

    First page

    1 / 100

    Middle range

    50 / 100

    Final page

    100 / 100

    Minimal data

    1 / 1

    Custom properties

    8 / 24

    Event and keyboard input

    Each interaction emits a page-change event with the selected page.

    03 / 03

    04

    Current page from the latest event

    ← → Home End Focus the current page, then use the keyboard.