Sorting

Enable column sorting by adding getSortedRowModel() to your table configuration and tracking sort state with SortingState. Use onSortingChange to update the sorting state when users click column headers.

For columns with non-standard data types like formatted dates, provide a custom sortingFn in the column definition to handle comparison logic.

Username	Role	Account Status	Last Visited At	Visit Count
Damian.Lubowitz	admin	active	17 Sep 2024 10:34:11 PDT	150
Fleta_Morissette	user	suspended	19 Jun 2025 13:05:57 PDT	30
Torrey_Gleichner41	moderator	pending	24 Apr 2025 06:31:54 PDT	15
Aniya_Botsford49	moderator	active	06 Oct 2025 00:58:13 PDT	2
Keira_Moore	admin	suspended	02 Aug 2025 18:51:29 PDT	2
Thora.Cremin	admin	pending	29 Jun 2025 08:51:14 PDT	438
Haskell.Boyer	admin	active	25 Mar 2025 03:05:31 PDT	7
Orie.Schoen73	admin	active	13 Apr 2025 21:14:45 PDT	3
Izabella_Predovic79	user	suspended	10 Feb 2025 15:20:38 PDT	57
Vergie.Lemke88	admin	active	19 Oct 2025 02:35:03 PDT	90

import {Component} from "@angular/core"

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

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

@Component({
  imports: [TableModule, ButtonModule, ProgressRingModule],
  selector: "sorting-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>
                    <div class="inline-flex items-center gap-2">
                      <ng-container *renderHeader="header; let value">
                        {{ value }}
                      </ng-container>
                      <button
                        q-table-column-sort-action
                        [header]="header"
                        [isSorted]="header.column.getIsSorted()"
                      ></button>
                    </div>
                  </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>
  `,
})
export class SortingDemo {
  protected readonly query = createUserQuery(10)

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

Last updated on Feb 7, 2026 by Ryan Bower

Row Selection

Core

Api