Pagination

Basic usage

Props selectedPage, totalPages, onPageChange — keep the current page in useSignal`.

tsx

import { $, component$, useSignal } from "@builder.io/qwik";
import { Pagination } from "~/components/ui/base/pagination";

export default component$(() => {
  const page = useSignal(1);
  return (
    <Pagination
      selectedPage={page.value}
      totalPages={10}
      onPageChange$={$((p) => {
        page.value = p;
      })}
    />
  );
});

More sibling pages

Prop siblingCount (default 1) widens the window around the active page.

tsx

import { $, component$, useSignal } from "@builder.io/qwik";
import { Pagination } from "~/components/ui/base/pagination";

export default component$(() => {
  const page = useSignal(5);
  return (
    <Pagination
      selectedPage={page.value}
      totalPages={24}
      siblingCount={2}
      onPageChange$={$((p) => {
        page.value = p;
      })}
    />
  );
});

Custom arrow labels

customArrowTexts — short texts instead of the default PREV / NEXT.

tsx

import { $, component$, useSignal } from "@builder.io/qwik";
import { Pagination } from "~/components/ui/base/pagination";

export default component$(() => {
  const page = useSignal(1);
  return (
    <Pagination
      selectedPage={page.value}
      totalPages={8}
      customArrowTexts={{ previous: "Back", next: "Forward" }}
      onPageChange$={$((p) => {
        page.value = p;
      })}
    />
  );
});

Disabled

Non-interactive pagination via the disabled prop.

tsx

import { $, component$ } from "@builder.io/qwik";
import { Pagination } from "~/components/ui/base/pagination";

export default component$(() => (
  <Pagination
    selectedPage={3}
    totalPages={10}
    disabled
    onPageChange$={$(() => {})}
  />
));

Metadata

Source: meta.generated.json (see npm run generate)

File base/pagination/meta.generated.json not found or path not allowed.