Smart UI Web Components work with current evergreen browsers and Node 18+ for local tooling; pin package versions to match your project policy.

Smart UI is distributed as the smart-webcomponents NPM package. You can also use the full download from the Download page.

Install the package:
```
npm install smart-webcomponents
```

Load the Pager module (ES module script):

<script type="module" src="node_modules/smart-webcomponents/source/modules/smart.pager.js"></script>

Add the default stylesheet (prefer angular.json / bundler entry in app codebases; for plain HTML use a link):

<link rel="stylesheet" type="text/css" href="node_modules/smart-webcomponents/source/styles/smart.default.css" />

Add markup in one of two ways - semantic custom element (the component tag is in your HTML) or a host div (you mount programmatically with appendTo):

Semantic element (id matches the selector in Smart()):
```
<smart-pager id="pager"></smart-pager>
```
Host container (id matches appendTo on Smart.Pager):
```
<div id="pagerContainer"></div>
```

Initialize after the module loads: define a const pagerOptions object, then either bind with Smart('#pager', ...) on the semantic tag or use new Smart.Pager({ ...pagerOptions, appendTo: '#pagerContainer' }) on the host div:

<script type="module">
	import 'node_modules/smart-webcomponents/source/modules/smart.pager.js';

	const pagerOptions = { disabled: true };

	// Option A - semantic <smart-pager> with id="pager"
	Smart('#pager', class {
		get properties() {
			return pagerOptions;
		}
	});

	// Option B - host div id="pagerContainer"
	// const pagerInstance = new Smart.Pager({
	// 	...pagerOptions,
	// 	appendTo: '#pagerContainer'
	// });

	// Option C - constructor(selector, options), then append the returned element yourself
	// const myPager = new Smart.Pager('#pager', pagerOptions);
	// document.body.appendChild(myPager);
</script>

Uncomment Option B when you use the host div; use Option A when you use the semantic element. The Runtime cookbook also documents new Smart.Pager('#pager', pagerOptions) with appendChild, and document.createElement('smart-pager') with .props or Object.assign (all are valid patterns; do not combine overlapping patterns for the same instance unless you intend multiple components).

Serve the folder over HTTP (or use your bundler dev server) and open the page.

Alternative creation patterns and imperative APIs. These are all valid ways to create Smart UI components: semantic markup + Smart(); new Smart.Pager({ ...options, appendTo: '#...' }); new Smart.Pager('#pager', pagerOptions) plus appendChild on the returned element; and document.createElement('smart-pager') then assigning options via .props or Object.assign on the element.

Constructor with a selector string and options, then append the returned element (for example const myPager = new Smart.Pager('#pager', pagerOptions)):

	const pagerOptions = { disabled: true };
	const myPager = new Smart.Pager('#pager', pagerOptions);
	document.body.appendChild(myPager);

Create with document.createElement('smart-pager'), assign properties (same as any custom element), then append:

	const pagerOptions = { disabled: true };
	const pager = document.createElement('smart-pager');
	Object.assign(pager, pagerOptions);
	document.body.appendChild(pager);

Host on a div with appendTo (import the module, then instantiate when the document is ready; the container id must match appendTo):

	import "../../source/modules/smart.pager.js";

	document.readyState === 'complete' ? init() : window.addEventListener('load', init);

	function init() {
		const pagerOptions = { disabled: true };
		const pager = new Smart.Pager({
			...pagerOptions,
			appendTo: '#pagerContainer'
		});
	}

Appearance

The total number of items and the number of visualized items are controlled by the following properties :

pagesCount - total number of items.
pageIndexSelectors - the number of items displayed on page.

The pager can have multiple navigation buttons, controlled by the following properties:

showFirstLastNavigationButtons - buttons for navigation to the firs and the last item.
showPrevNextNavigationButtons - buttons for navigation to the previous and the next item.
autoEllipsis - ellipsis buttons are displayed as indicators and additional help to navigate between pages. Available options are:
- none - ellipsis are hidden.
- before - ellipsis are shown as navigation to previous page only.
- after - ellipsis are shown as navigation to next page only.
- both - ellipsis are shown as navigation to both previous and next pages.

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/modules/smart.pager.js"></script>
</head>
<body>
    <smart-pager show-prev-next-navigation-buttons show-first-last-navigation-buttons show-page-index-selectors pages-count="5" page-index-selectors="5" show-summary></smart-pager>
</body>
</html>

Demo

Additional options to control the element are :

showSummary - controls the visibility of segment that displays range of visible items.
showPageSizeSelector - Determines whether the page size selector is displayed.
showNavigationInput - Determines whether the navigation input is displayed.

 <smart-pager show-page-size-selector show-navigation-input show-prev-next-navigation-buttons pages-count="10" show-summary></smart-pager>

Demo

Instead arrows, navigation buttons can have text labels. To achieve this, showNavigationButtonLabels property must be set to true.
An element with shown text labels, could be localized. The user can define the text, wich is shown in for particular language. Setting of messages defines the text values of each button. Locale defines the language used at the moment.

 <smart-pager show-navigation-button-labels locale="fr" show-prev-next-navigation-buttons show-first-last-navigation-buttons how-page-index-selectors pages-count="300" page-index-selectors="10" ></smart-pager>

Demo

Methods

The element offers the following methods:

first - Selects first item.

 <script>
     window.onload = function () {
         var pager = document.querySelector('smart-pager');
         pager.first();
     }
 </script>

last - Selects last item.

 <script>
     window.onload = function () {
         var pager = document.querySelector('smart-pager');
         pager.last();
     }
 </script>

navigateTo - Navigates to an item with particular index.

 <script>
     window.onload = function () {
         var pager = document.querySelector('smart-pager');
         pager.navigateTo(5);
     }
 </script>

next - Navigates to the next item(if exists such an item).

 <script>
     window.onload = function () {
         var pager = document.querySelector('smart-pager');
         pager.next();
     }
 </script>

prev - Navigates to the previous item(if exists such an item).

 <script>
     window.onload = function () {
         var pager = document.querySelector('smart-pager');
         pager.prev();
     }
 </script>

Append to the DOM:

const container = document.getElementById('pager-container');
container.appendChild(pager);

Remove from the DOM:

pager.remove();

Set a property:

pager.disabled = true;
pager.theme = 'dark';

Get a property value:

const isDisabled = pager.disabled;
const currentTheme = pager.theme;

Invoke a method:

pager.refresh();
pager.focus();

Add event listener:

pager.addEventListener('change', (event) => {
    console.log('change triggered:', event.detail);
});

Remove event listener:

const handlePagerEvent = (event) => {
    console.log('change triggered:', event.detail);
};

pager.addEventListener('change', handlePagerEvent);
pager.removeEventListener('change', handlePagerEvent);

Live demos

Supported stacks: Smart UI targets Angular 17+, React 18+, Vue 3+, Node 18 LTS, and evergreen browsers; pin exact package versions to your org policy.

Getting Started with Pager Web Component

Quick start

Runtime cookbook