Column Groups

Optionally group columns together under a common header.

User Identification		User Info
Username	Company Name	Last Visited At	Role	Visit Count	Account Status
Hudson.Lowe	Gusikowski Inc	25 Mar 2025 08:38:27 PDT	admin	2	active
Karl_Hilll66	Ziemann - Witting	31 Aug 2025 20:18:20 PDT	admin	2	active
Orland.Stroman	Medhurst, Hegmann and Gislason	26 Sep 2025 04:47:05 PDT	moderator	316	suspended
Alexander_McKenzie	Donnelly, Terry and Kemmer	17 Mar 2024 10:58:43 PDT	user	16	active
Dangelo_Johnson	Weissnat, Schultz and Cole	23 Sep 2025 23:56:19 PDT	user	24	pending
Brain_Gulgowski2	Bogisich LLC	10 Jun 2024 00:19:33 PDT	moderator	302	active
Clifford_Hilpert	Green, Wisoky and Ortiz	24 May 2025 19:27:48 PDT	moderator	2	active
Roman_Abernathy-Kulas49	Hartmann, Haag and Ryan	24 Sep 2025 02:25:42 PDT	moderator	15	active
Palma.Lesch	Hamill LLC	27 Jun 2025 01:35:08 PDT	user	5	active
Carley_Hilpert	Abernathy, Walsh and Wiegand	08 Oct 2025 05:08:30 PDT	user	36	pending

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} from "@qualcomm-ui/core/table"

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

@Component({
  imports: [TableModule, ButtonModule, ProgressRingModule],
  selector: "column-grouping-demo",
  template: `
    <div q-table-root>
      <div q-table-action-bar>
        <button q-button variant="outline" (click)="query.refetch()">
          Regenerate
        </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
                    class="text-center"
                    q-table-header-cell
                    [colSpan]="header.colSpan"
                  >
                    @if (!header.isPlaceholder) {
                      <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>
  `,
})
export class ColumnGroupingDemo {
  readonly query = createUserQuery(10)

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

Last updated on Feb 7, 2026 by Ryan Bower

Basic

Column Ordering (Drag & Drop)