@vonage/vwc-pagination
Advanced tools
Readme
vwc-paginationvwc-pagination component dedicated to provide paged view state representation and management.
This component would be used with another, relevant, layouts, like vwc-data-grid, while both components would establish interoperability based on the APIs described here.
vwc-pagination is an inline block component.
vwc-pagination component is featured with navigational controls (move to previous page, move to next page) and a listed, ellipsed representation of pages (numeric, 1-based).
vwc-pagination is rolling around the total number of pages and the currently selected page.
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
total | total | number | 0 | total number of pages, as provided by the consuming application |
selectedIndex | selected-index | number | -1 | currently selected page; always has some numeric value except when the total is 0; number reflects a 0-based index (when the first page selected, selected equals to 0) |
prev-disabled | presence | managed | an auto managed attribute for a custom styling/logic; will be placed when 'go to previous page' control should be disabled, otherwise removed | |
next-disabled | presence | managed | an auto managed attribute for a custom styling/logic; will be placed when 'go to next page' control should be disabled, otherwise removed |
Note: if the
totalis adjusted to smaller number andselectedappears to be out of range, theselectedis set to the closest new available page (changeevent is fired as appropriate)
| Event | Description |
|---|---|
change | fired each time selected page changed (also when the initial selection happens, or when total is changed and as an outcome the selected page changed; event.detail: { selectedIndex: number; total: number }) |
vwc-pagination component allows customly slotted prev/next controls (see slots description below).
In order to allow custom styling/behaviour of those parts, there are 2 managed component level attributes: prev-disabled / next-disabled (see above).
vwc-pagination allows the customization via the slots.
| Slot name | Description |
|---|---|
prev-control | allows to override the default layout of the 'go to previous page' control button |
next-control | allows to override the default layout of the 'go to next page' control button |
FAQs
Pagination component
The npm package @vonage/vwc-pagination receives a total of 606 weekly downloads. As such, @vonage/vwc-pagination popularity was classified as not popular.
We found that @vonage/vwc-pagination demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 51 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.