How do I use Calcite pagination with latest Calcite update? It no longer works for me.

[ArianaBernal]

I have an application I have been working on using the Calcite design system but since I updated Calcite to the latest version out of Beta the pagination function I have no longer works. There used to be a "detail" property which allowed me to change the content my modal when you click the pagination button but this method is now gone...

I see the examples of this pagination component working with the "next Page" "previousPage" methods, nor any explanation to where I am supposed to use those methods.

Can I see an example with this actually working with content or panels? I have attached examples how mine is working using the Beta calcite version.

Info button showing this work - https://cityview.roundrocktexas.gov/

[KittyHurley · Accepted solution]

Hello @ArianaBernal, between the beta and production releases, as you mentioned, we had a considerable number of breaking changes.

One of which was our event payload, which was changed from detail to target across components:

const paginationEl = document.querySelector("calcite-pagination");
paginationEl.addEventListener("calcitePaginationChange", (evt) => console.log(evt.target.startItem));

There are some tips and tricks on the Core Concepts page, including some information on events, which could be a great resource to identify some of our patterns with the production release.

Would also recommend taking a look at the release notes for 1.0.3 and breaking changes between the beta and production releases, such as 1.0.3 and beta.99. Calcite follows semantic versioning, so production breaking changes will be evident when the major release changes in the future.

[ArianaBernal]

This worked for me thank you!

[coryeicher]

Hi Ariana,

For pagination, I have something working on this Calcite version. Let me
know if this could be helpful and I can dig a little deeper.

1.0.0-beta.77

I have yet to migrate forward from this version

-Cory