UWC Components
  • Default
  • Material
  • Fluent

On this page

Paginator

A paginator component with sliding page links, rows-per-page selector, current page report, and jump-to-page controls.

uwc-paginator is a pagination control with sliding-window page links, rows-per-page selector, current page report, and jump-to-page inputs. It fires uwc-page-change with { first, rows, page, pageCount } on every navigation.

Import

All components

import '@uwc/components';

Selected component (Lit / Angular / Vue)

import { UwcPaginator } from '@uwc/components/paginator';
customElements.define('uwc-paginator', UwcPaginator);

React

import { UwcPaginator } from '@uwc/components/react';

Usage

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('app-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <uwc-paginator
        total-records="100"
        rows="10"
        @uwc-page-change=${(e) => console.log(e.detail)}>
      </uwc-paginator>
    `;
  }
}

React

import React from 'react';
import { UwcPaginator } from '@uwc/components/react';

export default function App() {
  return (
    <UwcPaginator
      totalRecords={100}
      rows={10}
      onUwcPageChange={(e) => console.log(e.detail)}
    />
  );
}

Angular

import { Component } from '@angular/core';
import '@uwc/paginator';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-paginator
      total-records="100"
      rows="10"
      (uwc-page-change)="onPageChange($event)">
    </uwc-paginator>
  `,
})
export class AppComponent {
  onPageChange(e: CustomEvent) { console.log(e.detail); }
}

Vue

import '@uwc/paginator';

export default {
  template: `
    <uwc-paginator
      total-records="100"
      rows="10"
      @uwc-page-change="onPageChange">
    </uwc-paginator>
  `,
  methods: {
    onPageChange(e) { console.log(e.detail); },
  },
};

Basic Usage

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('app-demo')
export class AppDemo extends LitElement {
  render() {
    return html`<uwc-paginator total-records="120" rows="10"></uwc-paginator>`;
  }
}

import React from 'react';
import { UwcPaginator } from '@uwc/components/react';

export default function App() {
  return <UwcPaginator totalRecords={120} rows={10} />;
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<uwc-paginator total-records="120" rows="10"></uwc-paginator>`
})
export class AppComponent {}

export default {
  template: `<uwc-paginator total-records="120" rows="10"></uwc-paginator>`
};

Basic

Set total-records and rows to render the paginator. Listen to uwc-page-change for navigation events with { first, rows, page, pageCount }. 

import { LitElement, html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('paginator-basic-demo')
export class AppDemo extends LitElement {
  static styles = css`
    :host { display: block; }
    p { margin: .75rem 0 0; font-size: .875rem; color: #374151; font-family: monospace; }
  `;

  @state() info = 'Navigate to see page-change events';

  render() {
    return html`
      <uwc-paginator
        total-records="100"
        rows="10"
        @uwc-page-change=${(e) => {
          const { page, pageCount, first, rows } = e.detail;
          this.info = `page ${page + 1} / ${pageCount} — records ${first + 1}–${first + rows}`;
        }}>
      </uwc-paginator>
      <p>${this.info}</p>
    `;
  }
}

import React, { useState } from 'react';
import { UwcPaginator } from '@uwc/components/react';

export default function App() {
  const [info, setInfo] = useState('Navigate to see page-change events');
  return (
    <>
      <UwcPaginator
        totalRecords={100}
        rows={10}
        onUwcPageChange={(e) => {
          const { page, pageCount, first, rows } = e.detail;
          setInfo(`page ${page + 1} / ${pageCount} — records ${first + 1}–${first + rows}`);
        }}
      />
      <p style={{ marginTop: '.75rem', fontSize: '.875rem', color: '#374151', fontFamily: 'monospace' }}>{info}</p>
    </>
  );
}

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-paginator
      total-records="100"
      rows="10"
      (uwc-page-change)="onPageChange($event)">
    </uwc-paginator>
    <p style="margin:.75rem 0 0;font-size:.875rem;color:#374151;font-family:monospace;">{{ info() }}</p>
  `
})
export class AppComponent {
  readonly info = signal('Navigate to see page-change events');
  onPageChange(e: CustomEvent) {
    const { page, pageCount, first, rows } = e.detail;
    this.info.set(`page ${page + 1} / ${pageCount} — records ${first + 1}–${first + rows}`);
  }
}

export default {
  data() {
    return { info: 'Navigate to see page-change events' };
  },
  methods: {
    onPageChange(e) {
      const { page, pageCount, first, rows } = e.detail;
      this.info = `page ${page + 1} / ${pageCount} — records ${first + 1}–${first + rows}`;
    },
  },
  template: `
    <uwc-paginator
      total-records="100"
      rows="10"
      @uwc-page-change="onPageChange">
    </uwc-paginator>
    <p style="margin:.75rem 0 0;font-size:.875rem;color:#374151;font-family:monospace;">{{ info }}</p>
  `
};

Rows per page

Add rows-per-page-options as a comma-separated list to render a rows-per-page selector. 

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('paginator-rpp-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <uwc-paginator
        total-records="200"
        rows="10"
        rows-per-page-options="5,10,25,50">
      </uwc-paginator>
    `;
  }
}

import React from 'react';
import { UwcPaginator } from '@uwc/components/react';

export default function App() {
  return (
    <UwcPaginator
      totalRecords={200}
      rows={10}
      rowsPerPageOptions="5,10,25,50"
    />
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-paginator
      total-records="200"
      rows="10"
      rows-per-page-options="5,10,25,50">
    </uwc-paginator>
  `
})
export class AppComponent {}

export default {
  template: `
    <uwc-paginator
      total-records="200"
      rows="10"
      rows-per-page-options="5,10,25,50">
    </uwc-paginator>
  `
};

Current page report

Add show-current-page-report to display the current position. Customise the template with current-page-report-template. 

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('paginator-report-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <uwc-paginator
        total-records="150"
        rows="10"
        show-current-page-report
        current-page-report-template="Showing {first}–{last} of {totalRecords}">
      </uwc-paginator>
    `;
  }
}

import React from 'react';
import { UwcPaginator } from '@uwc/components/react';

export default function App() {
  return (
    <UwcPaginator
      totalRecords={150}
      rows={10}
      showCurrentPageReport
      currentPageReportTemplate="Showing {first}–{last} of {totalRecords}"
    />
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-paginator
      total-records="150"
      rows="10"
      show-current-page-report
      current-page-report-template="Showing {first}–{last} of {totalRecords}">
    </uwc-paginator>
  `
})
export class AppComponent {}

export default {
  template: `
    <uwc-paginator
      total-records="150"
      rows="10"
      show-current-page-report
      current-page-report-template="Showing {first}–{last} of {totalRecords}">
    </uwc-paginator>
  `
};

Jump to page

Add show-jump-to-page-input for a numeric input or show-jump-to-page-dropdown for a select. 

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('paginator-jump-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <uwc-paginator
        total-records="300"
        rows="10"
        rows-per-page-options="10,25,50"
        show-current-page-report
        current-page-report-template="{currentPage} of {totalPages}"
        show-jump-to-page-input>
      </uwc-paginator>
    `;
  }
}

import React from 'react';
import { UwcPaginator } from '@uwc/components/react';

export default function App() {
  return (
    <UwcPaginator
      totalRecords={300}
      rows={10}
      rowsPerPageOptions="10,25,50"
      showCurrentPageReport
      currentPageReportTemplate="{currentPage} of {totalPages}"
      showJumpToPageInput
    />
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-paginator
      total-records="300"
      rows="10"
      rows-per-page-options="10,25,50"
      show-current-page-report
      current-page-report-template="{currentPage} of {totalPages}"
      show-jump-to-page-input>
    </uwc-paginator>
  `
})
export class AppComponent {}

export default {
  template: `
    <uwc-paginator
      total-records="300"
      rows="10"
      rows-per-page-options="10,25,50"
      show-current-page-report
      current-page-report-template="{currentPage} of {totalPages}"
      show-jump-to-page-input>
    </uwc-paginator>
  `
};

Attributes

Name Type Default Description
first — — Index of the first record. Default: 0.
rows — — Rows displayed per page. Default: 10.
total-records — — Total number of records. Default: 0.
page-links — — Max page link buttons to show. Default: 5.
rows-per-page-options — — Comma-separated list of rows-per-page options, e.g. "5,10,20".
show-first-last — — Show first/last nav buttons. Default: true.
show-page-links — — Show page number buttons. Default: true.
show-current-page-report — — Show current page report text. Default: false.
current-page-report-template — — Template. Tokens: {currentPage} {totalPages} {first} {last} {totalRecords}. Default: '({currentPage} of {totalPages})'.
show-jump-to-page-input — — Show numeric jump-to-page input. Default: false.
show-jump-to-page-dropdown — — Show jump-to-page dropdown. Default: false.
always-show — — Always render even when there is only one page. Default: true.
disabled — — Disable all controls.

Properties

Name Type Default Description
styles CSSResultGroup styles —
first number 0 —
rows number 10 —
totalRecords number 0 —
pageLinks number 5 —
rowsPerPageOptions string | null null —
showFirstLast boolean true —
showPageLinks boolean true —
showCurrentPageReport boolean false —
currentPageReportTemplate string '({currentPage} of {totalPages})' —
showJumpToPageInput boolean false —
showJumpToPageDropdown boolean false —
alwaysShow boolean true —
disabled boolean false —

Slots

Name Description
start Content rendered at the left of the paginator.
end Content rendered at the right of the paginator.

Events

Name Type Description
uwc-page-change CustomEvent Fired when the page or rows-per-page changes. Detail: { first, rows, page, pageCount }.

CSS Custom Properties

Name Default Description
--uwc-paginator-padding — Wrapper padding. Default: 0.5rem 1rem.
--uwc-paginator-bg — Background. Default: surface token.
--uwc-paginator-border — Top border. Default: 1px solid rgba(0,0,0,0.08).
--uwc-paginator-radius — Border radius. Default: radiusMd token.
--uwc-paginator-font-size — Font size. Default: fontSizeMd token.
--uwc-paginator-btn-bg — Page button background. Default: transparent.
--uwc-paginator-btn-color — Page button color. Default: text token.
--uwc-paginator-btn-hover-bg — Page button hover background.
--uwc-paginator-btn-radius — Page button border radius.
--uwc-paginator-active-bg — Active page button background. Default: primary.
--uwc-paginator-active-color — Active page button color. Default: #fff.
--uwc-paginator-nav-color — Nav icon color. Default: textSecondary token.
--uwc-paginator-label-size — Label font size. Default: 0.8125rem.

CSS Parts

Name Description
container The outer wrapper div.
nav-first First-page button.
nav-prev Prev-page button.
nav-next Next-page button.
nav-last Last-page button.
page-btn A page-number button.
page-btn-active The currently-active page-number button.
rows-per-page Rows-per-page select.
report Current page report span.
jump-input Jump-to-page text input.
jump-dropdown Jump-to-page select.