NavigationDmduskmoonimplemented7 demos

DmPagination

DmPagination moves through result pages with optional refresh, selection totals, and responsive controls.

Import@duskmoon-dev/components/dm-pagination

2API sections

21documented props

5behavior scenarios

Key API

selectedTotalrefreshshowRefreshshowPaginationloadingwrapperStyle

Usage

When to use

Use it in DuskMoon application screens that need a packaged, opinionated workflow component.
Reach for the lower-level standard component when the screen needs custom composition.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

DuskMoon workflow wrapper

Wraps lower-level primitives into a higher-level DuskMoon-prefixed workflow API.

Application defaults

Examples show the defaults and composition points expected by internal DuskMoon app screens.

Primary API surface

DmPagination is most often configured through `selectedTotal`, `refresh`, `showRefresh`, `showPagination`.

Covered behavior

Renders workflow total, selected count, pager, refresh, and alignment

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and DmPagination from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { DmPagination } from "@duskmoon-dev/components/dm-pagination";

export function Example() {
  return (<DmPagination total={120} current={1} pageSize={10} />);
}

Preview

Renders workflow total, selected count, pager, refresh, and alignment

test-backed

DmPagination scenario from the component test coverage: renders workflow total, selected count, pager, refresh, and alignment.

Source

import "@duskmoon-dev/components/styles.css";
import { DmPagination } from "@duskmoon-dev/components/dm-pagination";

export function DmPaginationRendersWorkflowTotalSelectedDemo() {
  return (<DmPagination total={120} current={1} pageSize={10} />);
}

Preview

Calls refresh and supports loading state

test-backed

DmPagination scenario from the component test coverage: calls refresh and supports loading state.

Source

import "@duskmoon-dev/components/styles.css";
import { DmPagination } from "@duskmoon-dev/components/dm-pagination";

export function DmPaginationCallsRefreshAndSupportsDemo() {
  return (<DmPagination total={120} current={1} pageSize={10} />);
}

Preview

Can render refresh only or hide entirely

test-backed

DmPagination scenario from the component test coverage: can render refresh only or hide entirely.

Source

import "@duskmoon-dev/components/styles.css";
import { DmPagination } from "@duskmoon-dev/components/dm-pagination";

export function DmPaginationCanRenderRefreshOnlyDemo() {
  return (<DmPagination total={120} current={1} pageSize={10} />);
}

Preview

Keeps primitive pagination callbacks and custom locale

test-backed

DmPagination scenario from the component test coverage: keeps primitive pagination callbacks and custom locale.

Source

import "@duskmoon-dev/components/styles.css";
import { DmPagination } from "@duskmoon-dev/components/dm-pagination";

export function DmPaginationKeepsPrimitivePaginationCallbacksDemo() {
  return (<DmPagination total={120} current={1} pageSize={10} />);
}

Preview

Forwards the wrapper ref

test-backed

DmPagination scenario from the component test coverage: forwards the wrapper ref.

Source

import "@duskmoon-dev/components/styles.css";
import { DmPagination } from "@duskmoon-dev/components/dm-pagination";

export function DmPaginationForwardsTheWrapperRefDemo() {
  return (<DmPagination total={120} current={1} pageSize={10} />);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <DmPagination total={120} current={1} pageSize={10} />
</div>

<div data-theme="moonlight">
  <DmPagination total={120} current={1} pageSize={10} />
</div>

API

The API reference below lists every parsed exported type or interface for DmPagination. Start with `selectedTotal`, `refresh`, `showRefresh`, `showPagination` for common usage.

Types: packages/components/src/components/dm-pagination/DmPagination.types.tsScenarios: packages/components/src/components/dm-pagination/DmPagination.test.tsx

DmPaginationPropsinterface extends Omit< PaginationProps, "children" | "showTotal" >

Prop	Type	Required	Description
`selectedTotal`	`number`	No	selectedTotal configures DmPagination.
`refresh`	`() => void`	No	refresh configures DmPagination.
`showRefresh`	`boolean`	No	showRefresh configures DmPagination.
`showPagination`	`boolean`	No	showPagination configures DmPagination.
`loading`	`boolean`	No	loading configures DmPagination.
`wrapperStyle`	`CSSProperties`	No	wrapperStyle configures DmPagination.
`align`	`DmPaginationAlign`	No	align configures DmPagination.
`showTotalFullMessage`	`boolean`	No	showTotalFullMessage configures DmPagination.
`responsiveSimple`	`boolean`	No	responsiveSimple configures DmPagination.
`locale`	`DmPaginationLocale`	No	locale configures DmPagination.
`showTotal`	`PaginationShowTotal`	No	showTotal configures DmPagination.

DmPaginationLocaleinterface

Prop	Type	Required	Description
`refresh`	`string`	No	refresh configures DmPagination.
`showTotal`	`(`	No	showTotal configures DmPagination.
`total`	`number,`	Yes	total configures DmPagination.
`range`	`[number, number],`	Yes	range configures DmPagination.
`selectedTotal`	`number,`	Yes	selectedTotal configures DmPagination.
`showTotalSimple`	`(`	No	showTotalSimple configures DmPagination.
`total`	`number,`	Yes	total configures DmPagination.
`range`	`[number, number],`	Yes	range configures DmPagination.
`selectedTotal`	`number,`	Yes	selectedTotal configures DmPagination.
`selected`	`(selectedTotal: number) => string`	No	selected configures DmPagination.