Pagination

Pagination with page navigation, next and previous links.

Installation

npm install @shcnwc/shadcn-pagination-web-component

Usage

<script type="module">
  import "@shcnwc/shadcn-pagination-web-component";
</script>

<pagination-root count={100} perpage={10}>
  {#snippet children({ pages, currentpage })}
    <pagination-content>
      <pagination-item>
        <pagination-prevbutton />
      </pagination-item>
      {#each pages as page (page-key)}
        {#if page-type === "ellipsis"}
          <pagination-item>
            <pagination-ellipsis />
          </pagination-item>
        {:else}
          <pagination-item>
            <pagination-link {page} isactive={currentpage === page-value}>
              {page-value}
            </pagination-link>
          </pagination-item>
        {/if}
      {/each}
      <pagination-item>
        <pagination-nextbutton />
      </pagination-item>
    </pagination-content>
  {/snippet}
</pagination-root>

Links

• Source Code
• Documentation
• License

Contributing

Contributions are welcome! Please open an issue or pull request on GitHub.

License

This project is licensed under the MIT License.