Basic

This example demonstrates a minimal table setup with typed columns and data. Define columns using createColumnHelper with accessor functions, then pass them to createAngularTable along with your data and getCoreRowModel() to create a table instance.

Username	Account Status	Country	Last Visited	Role	Avg Session Duration
john_pond1	active	US	02 Sep 2025 07:21:43 PDT	user	12
anne.m15	suspended	US	02 Oct 2025 08:52:36 PDT	user	35
joe_dirte	pending	US	19 Mar 2025 04:55:19 PDT	admin	0

import {Component} from "@angular/core"

import {createAngularTable, TableModule} from "@qualcomm-ui/angular/table"
import {getCoreRowModel} from "@qualcomm-ui/core/table"

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

@Component({
  imports: [TableModule],
  selector: "basic-demo",
  template: `
    <div q-table-root>
      <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>
  `,
})
export class BasicDemo {
  protected table = createAngularTable<User>(() => ({
    columns: userColumns,
    data: users,
    getCoreRowModel: getCoreRowModel(),
  }))
}

Last updated on Feb 7, 2026 by Ryan Bower

Sorting Guide

Feature Guides

Column Groups