On this page

Data & status

Table released

A table you write yourself, in the platform's own markup, with the library's look, sortable headers and a frame that scrolls a table wider than its space.

Source

Import@pacit/components/table
Selectorstable[pctTable], caption[pctCaption], th[pctHeader], td[pctCell], pct-table-frame

Semantics come from the native <table> — no role and no keyboard handling of ours

Devices
Device	Protocol	Power (kW)
Recuperator	Modbus TCP	0.2
Inverter	Modbus RTU	9.9
Heat pump	Modbus TCP	2.4

import { Component } from '@angular/core';
import {
  PctTable,
  PctTableCaption,
  PctTableCell,
  PctTableHeader,
} from '@pacit/components/table';

/** A table you write yourself: a caption, a header row and three rows of cells. */
@Component({
  selector: 'demo-table',
  imports: [PctTable, PctTableCaption, PctTableHeader, PctTableCell],
  template: `
    <table pctTable>
      <caption pctCaption>
        Devices
      </caption>
      <thead>
        <tr>
          <th pctHeader scope="col">Device</th>
          <th pctHeader scope="col">Protocol</th>
          <th pctHeader scope="col" numeric>Power (kW)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td pctCell>Recuperator</td>
          <td pctCell>Modbus TCP</td>
          <td pctCell numeric>0.2</td>
        </tr>
        <tr>
          <td pctCell>Inverter</td>
          <td pctCell>Modbus RTU</td>
          <td pctCell numeric>9.9</td>
        </tr>
        <tr>
          <td pctCell>Heat pump</td>
          <td pctCell>Modbus TCP</td>
          <td pctCell numeric>2.4</td>
        </tr>
      </tbody>
    </table>
  `,
})
export class TableDemo {}

table.demo.ts — the same file runs here and is highlighted under Code

Start here

Usage

One import per component, and the shortest possible use — the package itself is installed once, on the start page.

Import this component

import { PctTable, PctTableCaption, PctTableHeader, PctTableCell, PctCellTemplate } from '@pacit/components/table';

Exported	What it is
`PctTableSort`interfaceunreleased	The column the rows stand sorted by, named by the key its header carries, and which way.
`PctTable`componentunreleased`table[pctTable]`	A table the consumer writes, dressed by the library: the platform's `<table>`, its caption, header cells and cells, each element wearing a component of its own.
`PctTableCaption`componentunreleased`caption[pctCaption]`	The table's caption: its name, which a reader announces with the table, and the name of the frame around it when the frame scrolls.
`PctTableHeader`componentunreleased`th[pctHeader]`	A header cell. With a `sortKey` its content is a button that proposes sorting the rows by that column, and the header of the sorted column carries `aria-sort`.
`PctTableCell`componentunreleased`td[pctCell]`	A cell.
`PctTableFrame`componentunreleased`pct-table-frame`	The frame a table scrolls in when it is wider than the space it is given, or taller than a height it is given. While the table overflows, the frame is a focusable region named by the table's caption, so a keyboard can reach it and scroll it and a reader can say what it holds. While the table fits, the frame is nothing: a stop with nothing to scroll is a stop for nothing.
`PctTableVisible`interfaceunreleased	The lines in the view, `[start, end)` among the lines drawn, and the ids of the rows among them, in order.
`PctScrollAlign`typeunreleased`'start' \| 'center' \| 'end' \| 'nearest'`	Where a row the table scrolls to stands in the view: at its top, its centre, its bottom, or wherever is nearest from where the view is — the default.
`PctScrollToOptions`interfaceunreleased	How `scrollTo` scrolls.
`PctDataTable`componentunreleased`pct-data-table`	A table built from data: typed columns, sorting by one key or several, a quick filter, and the empty and loading states, rendered as the first layer's `<table pctTable>` so the two look the same (0097).
`PctCellContext`interfaceunreleased	What a cell template is handed.
`PctCellTemplate`directiveunreleased`ng-template[pctCell]`	A cell the consumer draws for one column, or for several that share a look.
`PctHeaderCellContext`interfaceunreleased	What a header template is handed.
`PctHeaderCellTemplate`directiveunreleased`ng-template[pctHeaderCell]`	What a header shows in place of the column's `header` text.
`PctEmptyContext`interfaceunreleased	What the empty-state template is handed.
`PctEmptyTemplate`directiveunreleased`ng-template[pctEmpty]`	What the table shows beside itself when it has no row to show, in place of its sentence.

<table pctTable>
  <caption pctCaption>
    Devices
  </caption>
  <thead>
    <tr>
      <th pctHeader scope="col">Device</th>
      <th pctHeader scope="col" numeric>Power</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td pctCell>Heater</td>
      <td pctCell numeric>2.4</td>
    </tr>
  </tbody>
</table>

Examples

Every state, running

Each example is the component itself, not a screenshot. Open the code under any of them.

Sorted by the headers, ordered by you

The headers with a sortKey propose an order into one sort model, and the component that owns the rows puts them in it. The frame scrolls the table when the page is too narrow for it, and only then is it a region with a tab stop.

Rooms

Kitchen	21.5	48
Bedroom	19.0	52
Office	22.5	41
Bathroom	23.0	67

API

What it reads, and what it writes back

Read from the source at build time — the types, the defaults and the lines of documentation are the library's own.

unreleased marks 17 of them: on main, and not in @pacit/components@0.2.0 — the next release names the version.

A table the consumer writes, dressed by the library: the platform's <table>, its caption, header cells and cells, each element wearing a component of its own.

Inputs

Name	Type	What it does
`sort`two-wayunreleaseddefault `null`	`PctTableSort \| null`	The column the rows stand sorted by, and which way, or `null` while they stand in the consumer's own order. A header with a `sortKey` writes it when pressed: a column not yet sorted starts ascending, and the sorted one turns the other way. Bind it two-way and order the rows from it.

Outputs

None of its own. The native events — (click), (focus), the form's submit — are the platform's, and two-way models above carry the rest.

What it writes on the element

The hooks a stylesheet or a test can hold. Stable by contract — the parts inventory gate fails the build when one disappears.

Attribute	Bound to	Note
`class`	`pct-table`

Styling

Parts to select, tokens to override

Two ways in, both stable. No class names to depend on.

Parts

In a test, PctTableHarness, PctTableCaptionHarness, PctTableHeaderHarness, PctTableCellHarness, PctTableFrameHarness from @pacit/components/testing read a part by the name below and a state by its attribute — the harness gate holds the names to the package.

Part	Selector	What it is
`mark`	`[data-pct-part="mark"]`	the data table's word the quick filter found
`message`	`[data-pct-part="message"]`	the data table's sentence beside an empty table — see the data table's card
`place`	`[data-pct-part="place"]`	the data table's place of a sort key after the first
`placeholder`	`[data-pct-part="placeholder"]`	the data table's row standing for rows still coming
`icon`	`[data-pct-part="icon"]`	the chevron beside a sortable header's label
`toggle`	`[data-pct-part="toggle"]`	the button that fills a sortable header cell

Tokens

Every value the component reads, with the light and the dark default. Override a token at any scope and it cascades like any custom property.

Token	Styles
`--pct-table-bg-changed{pct.warning-200}`#fde68a · #b45309	Background a data table's cell flashes in when its value changes.
`--pct-table-bg-danger{pct.danger-100}`#fee2e2 · #991b1b	Background of a data table's row or cell in the danger tone.
`--pct-table-bg-hover{pct.primary-200}`#bfdbfe · #1d4ed8	Background of a data table's row under the pointer.
`--pct-table-bg-info{pct.info-100}`#dbeafe · #1e40af	Background of a data table's row or cell in the info tone.
`--pct-table-bg-striped{pct.surface-100}`#f1f5f9 · #1e293b	Background of every other row of a striped data table.
`--pct-table-bg-success{pct.success-100}`#dcfce7 · #166534	Background of a data table's row or cell in the success tone.
`--pct-table-bg-warning{pct.warning-100}`#fef3c7 · #92400e	Background of a data table's row or cell in the warning tone.
`--pct-table-border{pct.border}`#e2e8f0 · #334155	Line under a row.
`--pct-table-caption-fg{pct.text}`#0f172a · #ffffff	Text colour of the caption.
`--pct-table-caption-font-weight{pct.font.weight.medium}`500	Font weight of the caption.
`--pct-table-caption-gap{pct.space.3}`8px	Space between the caption and the table.
`--pct-table-column-max-width`20rem	Maximum width of a data table's column whose cells are cut to one line.
`--pct-table-fg{pct.text}`#0f172a · #ffffff	Text colour of the cells.
`--pct-table-fg-danger{pct.on-danger-100}`#991b1b · #fee2e2	Text colour of a data table's row or cell in the danger tone.
`--pct-table-fg-info{pct.on-info-100}`#1d4ed8 · #bfdbfe	Text colour of a data table's row or cell in the info tone.
`--pct-table-fg-muted{pct.text-muted}`#334155 · #e2e8f0	Text colour of the numbers of a data table's rows.
`--pct-table-fg-success{pct.on-success-100}`#166534 · #dcfce7	Text colour of a data table's row or cell in the success tone.
`--pct-table-fg-warning{pct.on-warning-100}`#92400e · #fef3c7	Text colour of a data table's row or cell in the warning tone.
`--pct-table-font-size{pct.font.size.md}`14px	Font size of the table.
`--pct-table-heading-bg{pct.surface-100}`#f1f5f9 · #1e293b	Background of a header cell.
`--pct-table-heading-border{pct.border-strong}`#64748b	Line under the header row.
`--pct-table-heading-fg{pct.text}`#0f172a · #ffffff	Text colour of a header cell.
`--pct-table-heading-font-weight{pct.font.weight.medium}`500	Font weight of a header cell.
`--pct-table-icon-fg-muted{pct.text-muted}`#334155 · #e2e8f0	Colour of the chevron a sortable header shows as a hint.
`--pct-table-mark-bg{pct.warning-200}`#fde68a · #b45309	Background of a word the quick filter found.
`--pct-table-mark-fg{pct.on-warning-100}`#92400e · #fef3c7	Text colour of a word the quick filter found.
`--pct-table-padding-x{pct.space.4}`12px	Horizontal padding of a cell and a header cell.
`--pct-table-padding-y{pct.space.3}`8px	Vertical padding of a cell and a header cell.
`--pct-table-toggle-gap{pct.space.2}`4px	Gap between a sortable header's label and its chevron.
`--pct-table-toggle-target-min{pct.target.min}`24px	Touch-target floor of a sortable header.

Theming

A brand override in a few declarations. Scope it to a theme attribute, a page or one container — the component never notices.

[data-theme='brand'] {
  --pct-table-heading-bg: #ccfbf1;
  --pct-table-heading-border: #0f766e;
  --pct-table-border: #99f6e4;
}

Devices
Device	Protocol	Power (kW)
Recuperator	Modbus TCP	0.2
Inverter	Modbus RTU	9.9
Heat pump	Modbus TCP	2.4

Accessibility

Measured, not assumed

Pattern: a native <table> — sorting as the APG's sortable table draws it: a button in each sortable header, and aria-sort on the sorted column's header alone. Named in the class JSDoc.

Keyboard

key	effect	test
`Tab` / `Shift+Tab`	moves between the sort buttons, and onto a scrolling frame	`apps/sandbox-e2e/src/table.spec.ts` — "an overflowing frame is a region named by the caption, and the keyboard scrolls it"
`Enter` / `Space`	sorts by the column, or turns its order	`apps/sandbox-e2e/src/table.spec.ts` — "the keyboard sorts: Enter sorts ascending, Space turns it"
`←` / `→`	scrolls a focused frame along the inline axis	`apps/sandbox-e2e/src/table.spec.ts` — the same case as `Tab`; the scrolling is the platform's

There are no handlers to map: the sort buttons are buttons and the frame is a scrolling box, and both answer the keyboard on their own.

Evidence

What the repository holds for this component

Read at build time from the tracked snapshots, not typed here.

100%mutation score60 of 60 mutants killed

9 × 3e2e cases × enginesplus the shared audits: axe, forced colors, preferences, size, hydration

18colour pairs measuredlight and dark, at every token build

2visual baselinesChromium, the sandbox's own pictures

20elements in the preview0 listeners · 1 render to settle · 6268 µs in jsdom, held exactly but for the clock

Known limitations

Every dressed cell carries an attribute. A <td> without pctCell keeps the browser's look. The cost is the one Angular Material's mat-cell asks, and it is what keeps every rule inside the component that owns it.
No zebra, hover or selected row. Each would need a component on every <tr>, which this layer does not dress, and a selected row is a fact about data, which is the data table's.
A row header needs scope="row". The header cell keys its row look on the attribute, so a <th pctHeader> in the body without it wears the column header's surface. Write it anyway: it states the row header outright rather than leaving it to each engine's guess.
The frame keeps a static aria-labelledby only. It reads the consumer's attribute once and falls back to it where no caption names the region; a role or a tabindex written on the frame is dropped at the first change detection, and the frame writes its own only while the table overflows.
The rows are not sorted for you. The headers propose and the consumer orders; the data table orders its own rows.
NVDA does not say the sort is a control. In the walk of 2026-10-29 NVDA with Firefox read a focused sort button as its column header, Address, column header, row 1, column 2, with no role word, where Orca and VoiceOver say button. The element is a <button> and Enter and Space press it; whether the header owes NVDA a description is for the next walk to measure.
No sticky header. A header that sticks to the frame's top would stick to a box that does not scroll vertically, which is no help; the page's own scroll is the consumer's.

pacit

Usage

Every state, running

Sorted by the headers, ordered by you

What it reads, and what it writes back

Inputs

Outputs

What it writes on the element

Parts to select, tokens to override

Parts

Tokens

Theming

Measured, not assumed

Keyboard

What is measured, and what is not yet

What the repository holds for this component

Known limitations