Pagination (Client-side)

This page features a client-side pagination demo that fetches all data up front. Refer to the Pagination Guide for a detailed explanation. For server-side pagination, refer to the Server-side Pagination Example.

The demo below loads 10,000 rows and uses getPaginationRowModel to handle page slicing automatically. It integrates the Pagination component to provide page navigation buttons, configurable page sizes, and a page range indicator showing the current row range and total count.

Username	Role	Account Status	Account Created On	Last Visited At	Visit Count
Katharina.Mitchell31	admin	suspended	29 Dec 2024 23:34:01 PDT	07 May 2025 18:44:09 PDT	9
Ibrahim_Brakus-Durgan	moderator	active	17 Apr 2024 18:06:51 PDT	18 Apr 2025 15:44:02 PDT	105
Mustafa_Franey-Mayer	user	active	30 Jan 2025 11:36:58 PDT	05 Jul 2025 10:21:47 PDT	207
Levi.Stanton69	moderator	suspended	23 Jun 2025 06:56:15 PDT	04 Sep 2025 12:55:30 PDT	187
Albin.Parisian	user	pending	30 Oct 2024 01:40:04 PDT	13 May 2025 21:12:24 PDT	2
Stone_Lueilwitz77	admin	active	25 Jan 2025 10:19:13 PDT	19 Oct 2025 10:25:56 PDT	328
Gwendolyn_Cole3	moderator	active	05 Feb 2024 16:32:40 PDT	09 May 2025 11:46:10 PDT	16
Kailyn_Gottlieb	moderator	pending	27 Mar 2024 01:53:33 PDT	10 Nov 2024 14:02:35 PDT	2
Jacinto_Feest24	user	active	14 Feb 2025 11:05:53 PDT	22 Feb 2025 23:31:44 PDT	2
Darrel.Beer	admin	active	03 May 2025 02:43:41 PDT	08 Oct 2025 17:21:14 PDT	67

1-10 of 1200 results

import {Component, signal} from "@angular/core"
import {FormsModule} from "@angular/forms"

import {ButtonModule} from "@qualcomm-ui/angular/button"
import {PaginationModule} from "@qualcomm-ui/angular/pagination"
import {ProgressRingModule} from "@qualcomm-ui/angular/progress-ring"
import {
  type AngularTable,
  createAngularTable,
  createTablePagination,
  TableModule,
} from "@qualcomm-ui/angular/table"
import {
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
} from "@qualcomm-ui/core/table"

import {createUserQuery, type User, userColumns} from "./data"

@Component({
  imports: [
    TableModule,
    PaginationModule,
    ButtonModule,
    ProgressRingModule,
    FormsModule,
  ],
  selector: "pagination-demo",
  template: `
    <div q-table-root>
      <div q-table-action-bar>
        <button
          q-button
          size="sm"
          variant="outline"
          [disabled]="query.isFetching()"
          (click)="query.refetch()"
        >
          Refresh Data
        </button>
        @if (query.isFetching()) {
          <div q-progress-ring size="xs"></div>
        }
      </div>
      <div q-table-scroll-container>
        <table q-table-table>
          <thead q-table-header>
            @for (
              headerGroup of table.getHeaderGroups();
              track headerGroup.id
            ) {
              <tr q-table-row>
                @for (header of headerGroup.headers; track header.id) {
                  <th q-table-header-cell>
                    <ng-container *renderHeader="header; let value">
                      {{ value }}
                    </ng-container>
                  </th>
                }
              </tr>
            }
          </thead>
          <tbody q-table-body>
            @for (row of table.getRowModel().rows; track row.id) {
              <tr q-table-row>
                @for (cell of row.getVisibleCells(); track cell.id) {
                  <td q-table-cell>
                    <ng-container *renderCell="cell; let value">
                      {{ value }}
                    </ng-container>
                  </td>
                }
              </tr>
            }
          </tbody>
        </table>
      </div>
      <div
        q-table-pagination
        [count]="pagination.count()"
        [page]="pagination.page()"
        [pageSize]="pagination.pageSize()"
        (pageChanged)="pagination.onPageChange($event)"
      >
        <div *paginationContext="let context" q-pagination-page-metadata>
          @let meta = context.pageMetadata;
          {{ meta.pageStart }}-{{ meta.pageEnd }} of {{ meta.count }} results
        </div>

        <div q-pagination-page-buttons></div>
      </div>
    </div>
  `,
})
export class PaginationClientSideDemo {
  readonly globalFilter = signal<string>("")
  protected readonly query = createUserQuery(1200)

  protected table: AngularTable<User> = createAngularTable(() => ({
    columns: userColumns,
    data: this.query.data() || [],
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  }))

  protected pagination = createTablePagination(this.table)
}

Last updated on Feb 7, 2026 by Ryan Bower

Grouping

Pagination (Server-side)