svelte icon Svelte 5 UI lib
  • Coverage
  • About
  • Repo

Pagination

Default

  • 1
  • 2
  • 3
  • 4
  • 5
<script lang="ts">
  import { page } from "$app/stores";
  import { Pagination, Button, type PaginationItemProps } from 'svelte-5-ui-lib';

  let activeUrl = $state($page.url.searchParams.get("page"));
  let pages = $state([
    { name: "1", href: "/components/pagination?page=1", active: false },
    { name: "2", href: "/components/pagination?page=2", active: false },
    { name: "3", href: "/components/pagination?page=3", active: false },
    { name: "4", href: "/components/pagination?page=4", active: false },
    { name: "5", href: "/components/pagination?page=5", active: false }
  ]);
  const previous = () => {
    alert("Previous btn clicked. Make a call to your server to fetch data.");
  };
  const next = () => {
    alert("Next btn clicked. Make a call to your server to fetch data.");
  };
  let pagenationSize: PaginationItemProps["size"] = $state("default");
  const changeSize = () => {
    pagenationSize = pagenationSize === "large" ? "default" : "large";
  };

  const changeActivePage = () => {
    pages.forEach((page) => {
      let splitUrl = page.href?.split("?");
      let queryString = splitUrl?.slice(1).join("?");
      const hrefParams = new URLSearchParams(queryString);
      let hrefValue = hrefParams.get("page");
      if (hrefValue === activeUrl) {
        page.active = true;
      } else {
        page.active = false;
      }
    });
  };
  changeActivePage();
  $effect(() => {
    changeActivePage();
  });
</script>

{activeUrl}
<div class="flex flex-col items-center justify-center gap-3">
  <div class="h-12">
    <Pagination {pages} {previous} {next} size={pagenationSize} />
  </div>
  <Button onclick={changeSize}>
    {#if pagenationSize === "default"}
      Large
    {:else}
      Default
    {/if}
  </Button>
</div>

Event

  • 1
  • 2
  • 3
  • 4
  • 5
<script lang="ts">
  import { page } from "$app/stores";
  import { Pagination } from 'svelte-5-ui-lib';

  let activeUrl = $state($page.url.searchParams.get("page"));
  let pages = $state([
    { name: "1", href: "/components/pagination?page=1", active: false },
    { name: "2", href: "/components/pagination?page=2", active: false },
    { name: "3", href: "/components/pagination?page=3", active: false },
    { name: "4", href: "/components/pagination?page=4", active: false },
    { name: "5", href: "/components/pagination?page=5", active: false }
  ]);
  const previous = () => {
    alert("Previous btn clicked. Make a call to your server to fetch data.");
  };
  const next = () => {
    alert("Next btn clicked. Make a call to your server to fetch data.");
  };
  const handleClick = () => {
    alert("Page clicked");
  };

  $effect(() => {
    pages.forEach((page) => {
      let splitUrl = page.href.split("?");
      let queryString = splitUrl.slice(1).join("?");
      const hrefParams = new URLSearchParams(queryString);
      let hrefValue = hrefParams.get("page");
      if (hrefValue === activeUrl) {
        page.active = true;
      } else {
        page.active = false;
      }
    });
    pages = pages;
  });
</script>

<div class="flex flex-col items-center justify-center gap-3">
  <Pagination {pages} {previous} {next} onclick={handleClick} />
</div>

Icons

  • 1
  • 2
  • 3
  • 4
  • 5
<script lang="ts">
  import { Pagination } from 'svelte-5-ui-lib';
  import { ChevronLeftOutline, ChevronRightOutline } from "flowbite-svelte-icons";
  let pages = $state([
    { name: "1", href: "/components/pagination?page=1", active: false },
    { name: "2", href: "/components/pagination?page=2", active: false },
    { name: "3", href: "/components/pagination?page=3", active: false },
    { name: "4", href: "/components/pagination?page=4", active: false },
    { name: "5", href: "/components/pagination?page=5", active: false }
  ]);
  const previous = () => {
    alert("Previous btn clicked. Make a call to your server to fetch data.");
  };
  const next = () => {
    alert("Next btn clicked. Make a call to your server to fetch data.");
  };
</script>

<div class="flex flex-col items-center justify-center gap-3">
  <Pagination {pages} {previous} {next}>
    {#snippet prevContent()}
      <span class="sr-only">Previous</span>
      <ChevronLeftOutline class="h-5 w-5" />
    {/snippet}
    {#snippet nextContent()}
      <span class="sr-only">Next</span>
      <ChevronRightOutline class="h-5 w-5" />
    {/snippet}
  </Pagination>
</div>

Previous and next

<script lang="ts">
  import { PaginationItem } from 'svelte-5-ui-lib';

  const previous = () => {
    alert("Previous btn clicked. Make a call to your server to fetch data.");
  };
  const next = () => {
    alert("Next btn clicked. Make a call to your server to fetch data.");
  };
</script>

<div class="flex flex-col items-center justify-center gap-3">
  <div class="flex space-x-3 rtl:space-x-reverse">
    <PaginationItem onclick={previous}>Previous</PaginationItem>
    <PaginationItem onclick={next}>Next</PaginationItem>
  </div>
</div>

Previous and next with icons

Showing 1 to 10 of 100 Entries
<script lang="ts">
  import { Pagination } from 'svelte-5-ui-lib';
  import { ArrowLeftOutline, ArrowRightOutline } from "flowbite-svelte-icons";
  let helper = { start: 1, end: 10, total: 100 };
  const previous = () => {
    alert("Previous btn clicked. Make a call to your server to fetch data.");
  };
  const next = () => {
    alert("Next btn clicked. Make a call to your server to fetch data.");
  };
</script>

<div class="flex flex-col items-center justify-center gap-3">
  <div class="flex flex-col items-center justify-center gap-2">
    <div class="text-sm text-gray-700 dark:text-gray-400">
      Showing <span class="font-semibold text-gray-900 dark:text-white">{helper.start}</span>
      to
      <span class="font-semibold text-gray-900 dark:text-white">{helper.end}</span>
      of
      <span class="font-semibold text-gray-900 dark:text-white">{helper.total}</span>
      Entries
    </div>

    <Pagination table {previous} {next}>
      {#snippet prevContent()}
        <div class="flex items-center gap-2 bg-gray-800 text-white">
          <ArrowLeftOutline class="me-2 h-5 w-5" />
          Prev
        </div>
      {/snippet}
      {#snippet nextContent()}
        <div class="flex items-center gap-2 bg-gray-800 text-white">
          Next
          <ArrowRightOutline class="ms-2 h-5 w-5" />
        </div>
      {/snippet}
    </Pagination>
  </div>
</div>

Table data pagination

Showing 1 to 10 of 100 Entries
<script lang="ts">
  import { Pagination } from 'svelte-5-ui-lib';

  const previous = () => {
    alert("Previous btn clicked. Make a call to your server to fetch data.");
  };
  const next = () => {
    alert("Next btn clicked. Make a call to your server to fetch data.");
  };
  let helper = { start: 1, end: 10, total: 100 };
</script>

<div class="flex flex-col items-center justify-center gap-3">
  <div class="flex flex-col items-center justify-center gap-2">
    <div class="text-sm text-gray-700 dark:text-gray-400">
      Showing <span class="font-semibold text-gray-900 dark:text-white">{helper.start}</span>
      to
      <span class="font-semibold text-gray-900 dark:text-white">{helper.end}</span>
      of
      <span class="font-semibold text-gray-900 dark:text-white">{helper.total}</span>
      Entries
    </div>
    <Pagination table {previous} {next} />
    <Pagination table size="large" {previous} {next} />
  </div>
</div>

Table data with icons

Showing 1 to 10 of 100 Entries
<script lang="ts">
  import { Pagination } from 'svelte-5-ui-lib';
  import { ArrowLeftOutline, ArrowRightOutline } from "flowbite-svelte-icons";
  const previous = () => {
    alert("Previous btn clicked. Make a call to your server to fetch data.");
  };
  const next = () => {
    alert("Next btn clicked. Make a call to your server to fetch data.");
  };
  let helper = { start: 1, end: 10, total: 100 };
</script>

<div class="flex flex-col items-center justify-center gap-3">
  <div class="flex flex-col items-center justify-center gap-2">
    <div class="text-sm text-gray-700 dark:text-gray-400">
      Showing <span class="font-semibold text-gray-900 dark:text-white">{helper.start}</span>
      to
      <span class="font-semibold text-gray-900 dark:text-white">{helper.end}</span>
      of
      <span class="font-semibold text-gray-900 dark:text-white">{helper.total}</span>
      Entries
    </div>

    <Pagination table {previous} {next}>
      {#snippet prevContent()}
        <div class="flex items-center gap-2 bg-gray-800 text-white">
          <ArrowLeftOutline class="me-2 h-5 w-5" />
          Prev
        </div>
      {/snippet}
      {#snippet nextContent()}
        <div class="flex items-center gap-2 bg-gray-800 text-white">
          Next
          <ArrowRightOutline class="ms-2 h-5 w-5" />
        </div>
      {/snippet}
    </Pagination>
  </div>
</div>

Component data

codewithshin.com
  • Repo
  • About