@kouji-ui/components 0.1.1

package/src/table/table.css

@@ -0,0 +1,468 @@
+/* Density + variant tokens. All spacing via --kj-base-space-*.
+ *
+ * Sizing contract: the table is container-driven. If a parent gives `<kj-table>`
+ * a fixed height (`height: 400px`, a flex/grid track, etc.) the body fills
+ * the remaining space inside the wrapper and the row-scroll happens INSIDE
+ * `.kj-table-body`. If no parent constraint is set, the table grows to its
+ * natural content height — no internal scroll. `min-height: 0` / `min-width: 0`
+ * are the magic flex pieces that let the body actually shrink past content
+ * to honour an outer constraint. The same applies for width: the wrapper
+ * fills the host's width and the body scrolls horizontally when columns
+ * overflow.
+ */
+:host {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  font-family: var(--kj-font-sans);
+  font-size: var(--kj-text-sm);
+  /* Default row height — predictable + virtualization-friendly. Density
+     variants below override; consumers can also write the var directly
+     (`<kj-table style="--kj-table-row-height: 2.75rem">…</kj-table>`). */
+  --kj-table-row-height: 2.25rem;
+}
+:host([data-density="compact"])     { --kj-table-row-height: 1.75rem; }
+:host([data-density="comfortable"]) { --kj-table-row-height: 2.75rem; }
+
+.kj-table-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  position: relative;
+}
+
+.kj-table-body {
+  position: relative;
+  overflow: auto;
+  /* Use block layout (not flex) for the body so the `<table>` keeps its
+     natural row-height behaviour. With flex, a child `<table>` stretched
+     to fill the body — that made a single row balloon to fill the entire
+     viewport when filters narrowed the result set. Block layout lets the
+     table size to its content; the body's `overflow: auto` still scrolls
+     when there are many rows, and the leftover space appears below the
+     last row when there are few. */
+  display: block;
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+}
+
+.kj-table-body > table {
+  /* Table never flex-grows; row heights stay content-driven (or row-height
+     CSS var-driven if the consumer sets `--kj-table-row-height`). */
+  min-width: 100%;
+}
+
+:host th,
+:host td {
+  height: var(--kj-table-row-height);
+}
+
+:host table {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--kj-bg-surface);
+  color: var(--kj-fg-default);
+}
+
+:host th,
+:host td {
+  text-align: left;
+  padding: var(--kj-base-space-sm) var(--kj-base-space-md);
+  border-bottom: 1px solid var(--kj-border-default);
+  position: relative;
+}
+
+:host th {
+  font-weight: 600;
+  background: var(--kj-bg-elevated);
+}
+
+/* ── Sort indicator ─────────────────────────────────────────────
+   The wrapper template renders a `<i kjIcon>` after the header label
+   when the column is sortable. CSS here just owns layout + tint:
+     - default       → muted (unsorted/sortable)
+     - data-sort=…   → brand primary
+   The icon sits inline so it survives the resize handle on the right
+   edge of the cell. */
+:host th[aria-sort] {
+  user-select: none;
+}
+.kj-table-sort-indicator {
+  display: inline-flex;
+  align-items: center;
+  margin-inline-start: var(--kj-base-space-xs, 0.25rem);
+  color: var(--kj-fg-subtle, var(--kj-fg-muted));
+  transition: color var(--kj-transition);
+  vertical-align: middle;
+}
+:host th[data-sort="asc"] .kj-table-sort-indicator,
+:host th[data-sort="desc"] .kj-table-sort-indicator {
+  color: var(--kj-fg-primary);
+}
+:host th[aria-sort]:hover .kj-table-sort-indicator,
+:host th[aria-sort]:focus-visible .kj-table-sort-indicator {
+  color: var(--kj-fg-default);
+}
+
+:host([data-density="compact"]) th,
+:host([data-density="compact"]) td {
+  padding: var(--kj-base-space-xs) var(--kj-base-space-sm);
+}
+
+:host([data-density="comfortable"]) th,
+:host([data-density="comfortable"]) td {
+  padding: var(--kj-base-space-md) var(--kj-base-space-lg);
+}
+
+:host([data-variant="striped"]) tbody tr:nth-child(even) td {
+  background: var(--kj-bg-elevated);
+}
+
+:host([data-variant="clean"]) th,
+:host([data-variant="clean"]) td {
+  border-bottom-color: transparent;
+}
+
+:host td:focus-visible,
+:host th:focus-visible {
+  outline: 2px solid var(--kj-border-focus);
+  outline-offset: -2px;
+}
+
+/* Inline cell editors must NOT push the column wider than its existing
+   content. A bare `<input>` (and the styled select trigger) has an
+   intrinsic min-content width — ~20 chars from `size` for inputs, the
+   selected label for triggers — that table auto-layout uses to size the
+   column.
+
+   Trick: render an invisible "ghost" of the cell's value so the cell
+   keeps its natural content width, then lift every editor host out of
+   the in-flow stacking context with `position: absolute`. Editors use
+   `display: contents` by default — we override that while editing so
+   they actually get a box that can be positioned. */
+:host td.kj-table-cell--editing {
+  position: relative;
+}
+:host td .kj-table-cell-ghost {
+  visibility: hidden;
+  white-space: pre;
+  display: inline-block;
+  pointer-events: none;
+}
+/* `::ng-deep` is required because the editor components are created
+   dynamically via `ViewContainerRef.createComponent` from inside the
+   `kjCellEditorOutlet` directive. Dynamic elements don't inherit the
+   parent template's emulated-encapsulation attributes, so a scoped
+   selector wouldn't match. */
+/* `!important` is needed to override the editor / input components'
+   inline `style="display: contents"` host bindings (those win over
+   stylesheets). `::ng-deep` reaches the dynamically-created editor
+   components, which don't inherit the parent template's emulated
+   encapsulation attributes. */
+:host td.kj-table-cell--editing ::ng-deep kj-text-editor,
+:host td.kj-table-cell--editing ::ng-deep kj-number-editor,
+:host td.kj-table-cell--editing ::ng-deep kj-select-editor,
+:host td.kj-table-cell--editing ::ng-deep kj-date-editor,
+:host td.kj-table-cell--editing ::ng-deep kj-boolean-editor {
+  position: absolute !important;
+  inset: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  padding: inherit !important;
+  background: var(--kj-bg-surface);
+  z-index: 1;
+}
+:host td.kj-table-cell--editing ::ng-deep kj-input,
+:host td.kj-table-cell--editing ::ng-deep kj-number-input,
+:host td.kj-table-cell--editing ::ng-deep kj-select {
+  display: flex !important;
+  width: 100% !important;
+  min-width: 0 !important;
+  box-sizing: border-box;
+}
+:host td.kj-table-cell--editing ::ng-deep input,
+:host td.kj-table-cell--editing ::ng-deep .kj-select-trigger {
+  width: 100% !important;
+  min-width: 0 !important;
+  box-sizing: border-box;
+}
+/* The anchor span itself contributes nothing to layout — the directive
+   creates the editor as its NEXT SIBLING in the cell, not as a child. */
+:host td .kj-table-editor-anchor {
+  display: none;
+}
+
+/* Selected rows get a brand-accent tint + a left border stripe so a
+   keyboard user can tell which row is selected at a glance, even when
+   the row is not focused. */
+:host tr[data-selected] td {
+  background: color-mix(in oklab, var(--kj-bg-primary, var(--kj-bg-accent, currentColor)) 12%, var(--kj-bg-surface));
+}
+:host tr[data-selected] td:first-child {
+  box-shadow: inset 3px 0 0 0 var(--kj-bg-primary, var(--kj-fg-primary));
+}
+
+/* ── Pinned columns ─────────────────────────────────────────────
+   Sticky positioning + a visible boundary (border + soft shadow) so the
+   pinned edge reads as a separate region from the scrolling middle. The
+   :host([data-variant]) toggles don't affect pin borders — they're a
+   structural cue, not a visual variant. */
+:host td[data-pin="left"],
+:host th[data-pin="left"] {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  background: var(--kj-bg-surface);
+}
+:host td[data-pin="right"],
+:host th[data-pin="right"] {
+  position: sticky;
+  right: 0;
+  z-index: 1;
+  background: var(--kj-bg-surface);
+}
+
+/* Boundary indicator on the inside edge of each pinned region.
+
+   Last LEFT-pinned cell: a `[data-pin="left"]` whose next sibling is NOT
+   also left-pinned — uses `:not(:has(+ ...))`.
+
+   First RIGHT-pinned cell: a `[data-pin="right"]` whose previous sibling
+   is NOT right-pinned — uses the `:not([..]) + [data-pin="right"]` pattern.
+
+   Both are purely declarative; no JS bookkeeping. */
+:host td[data-pin="left"]:not(:has(+ td[data-pin="left"])),
+:host th[data-pin="left"]:not(:has(+ th[data-pin="left"])) {
+  border-right: 1px solid var(--kj-border-strong, var(--kj-border-default));
+  box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.25);
+}
+:host tr > :not([data-pin="right"]) + td[data-pin="right"],
+:host tr > :not([data-pin="right"]) + th[data-pin="right"] {
+  border-left: 1px solid var(--kj-border-strong, var(--kj-border-default));
+  box-shadow: -4px 0 6px -4px rgba(0, 0, 0, 0.25);
+}
+
+/* Striped variant: pinned cells still get the alternate background so the
+   sticky cell doesn't visually float over a coloured row beneath it. */
+:host([data-variant="striped"]) tbody tr:nth-child(even) td[data-pin] {
+  background: var(--kj-bg-elevated);
+}
+
+/* ── Resize handle ──────────────────────────────────────────────
+   Always-visible thin track on the right edge of each `<th>`; widens
+   and brightens to the focus color on hover/focus so users can tell
+   it's draggable. Hidden when no resize is enabled (the host doesn't
+   render the element). */
+.kj-table-resize-handle {
+  position: absolute;
+  top: 25%;
+  right: 0;
+  width: 6px;
+  height: 50%;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  background: transparent;
+  border-right: 2px solid var(--kj-border-strong, var(--kj-border-default));
+  transition: border-color var(--kj-transition), background var(--kj-transition), width var(--kj-transition);
+}
+.kj-table-resize-handle:hover,
+.kj-table-resize-handle:focus-visible {
+  border-right-color: var(--kj-border-focus);
+  background: color-mix(in srgb, var(--kj-border-focus) 20%, transparent);
+  width: 8px;
+  outline: none;
+}
+
+/* ── Resize preview guide ───────────────────────────────────────
+   While a column is being resized (TanStack `onEnd` mode), the
+   wrapper sets `data-resizing` on the header and pipes the live
+   cursor delta into `--kj-resize-delta`. The handle becomes a
+   tall vertical line anchored to the column's current right edge
+   and translated by the delta — it visually tracks where the new
+   edge will land before the column actually reflows on mouseup.
+
+   `top: 0; height: 9999px` overflows the `<th>`; the surrounding
+   `.kj-table-body` has `overflow: auto`, so the visible portion
+   is naturally clipped to the table's height. */
+:host th[data-resizing] .kj-table-resize-handle {
+  top: 0;
+  height: 9999px;
+  width: 0;
+  background: transparent;
+  border-right: 2px solid var(--kj-border-focus, var(--kj-bg-primary));
+  transform: translateX(var(--kj-resize-delta, 0px));
+  pointer-events: none;
+  z-index: 3;
+  transition: none;
+}
+
+/* ── Selection column ───────────────────────────────────────────
+   Leading checkbox column auto-rendered when `kjSelectionMode` is
+   `'single'` or `'multi'`. Narrow fixed-width column so the row
+   data starts at a predictable horizontal position. */
+:host th.kj-table-select-cell,
+:host td.kj-table-select-cell {
+  width: 2.5rem;
+  padding-inline: var(--kj-base-space-sm);
+  text-align: center;
+  vertical-align: middle;
+}
+.kj-table-select-cell kj-checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ── Filter row beneath the header row ──────────────────────────
+   Each cell hosts a styled filter input (text / number / date / select)
+   mounted by the wrapper. We keep the row visually distinct from headers
+   with a lighter background + thinner padding, and let the input fill
+   the cell width so filters feel column-anchored. */
+.kj-table-filter-row > th {
+  font-weight: 400;
+  background: var(--kj-bg-surface);
+  border-top: 1px solid var(--kj-border-muted, var(--kj-border-default));
+}
+.kj-table-filter-cell {
+  padding-top: var(--kj-base-space-xs);
+  padding-bottom: var(--kj-base-space-xs);
+  vertical-align: middle;
+}
+.kj-table-filter-cell .kj-table-filter-anchor + *,
+.kj-table-filter-cell kj-input,
+.kj-table-filter-cell kj-number-input,
+.kj-table-filter-cell kj-date-picker,
+.kj-table-filter-cell kj-select {
+  width: 100%;
+}
+.kj-table-filter-anchor {
+  display: block;
+  width: 100%;
+}
+
+/* Inline editors get the same compact xs treatment as filter cells. The
+   filter inputs already bind `kjSize="xs"` themselves; this rule covers the
+   editor anchors that mount unsized primitives at runtime. */
+:host .kj-table-editor-anchor .kj-input,
+:host .kj-table-editor-anchor .kj-select {
+  --kj-input-height: 1.75rem;
+  --kj-input-font-size: var(--kj-text-xs);
+  --kj-input-padding-x: var(--kj-base-space-sm);
+  --kj-input-padding-y: 0;
+  --kj-input-radius: var(--kj-radius-selector);
+}
+
+/* Empty / error / loading panes. */
+.kj-table-empty,
+.kj-table-error,
+.kj-table-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--kj-base-space-lg);
+  color: var(--kj-fg-muted);
+}
+
+/* ── Loading state ──────────────────────────────────────────────
+   Two modes:
+   - Initial load (`data-has-rows="false"`): full-pane overlay with
+     a centered "Loading…" message. The user has nothing to look at
+     yet so we cover the empty body.
+   - Subsequent reloads (`data-has-rows="true"`): a slim 2px brand
+     stripe at the top of the body. The stale rows stay readable
+     and pointer events keep working — the user can sort/scroll/
+     paginate again while the refresh is in flight. */
+.kj-table-loading {
+  position: absolute;
+  inset: 0;
+  background: color-mix(in srgb, var(--kj-bg-surface) 70%, transparent);
+  pointer-events: none;
+}
+.kj-table-loading[data-has-rows] {
+  inset: 0 0 auto 0;
+  height: 2px;
+  background: var(--kj-bg-primary);
+  padding: 0;
+  animation: kj-table-loading-pulse 1.4s ease-in-out infinite;
+}
+.kj-table-loading[data-has-rows] .kj-table-loading-fallback,
+.kj-table-loading[data-has-rows] ::ng-deep [kjLoading] {
+  display: none;
+}
+
+@keyframes kj-table-loading-pulse {
+  0%, 100% { opacity: 0.55; }
+  50%      { opacity: 1;    }
+}
+.kj-table-error {
+  color: var(--kj-fg-error, var(--kj-fg-default));
+}
+.kj-table-loading-fallback {
+  font-size: var(--kj-text-sm);
+}
+
+/* Row expansion. */
+.kj-table-expansion-row > td {
+  background: var(--kj-bg-elevated);
+}
+
+/* ── Pinned-row tbody segments ──────────────────────────────────
+   Use the brand accent so pinned rows visually pop out of the center
+   body; sticky positioning lets them stay anchored at the top/bottom
+   even when the body scrolls. */
+.kj-table-tbody-pinned[data-pin="top"] > tr > td {
+  background: var(--kj-bg-elevated);
+  border-bottom: 2px solid var(--kj-border-primary, var(--kj-border-strong, var(--kj-border-default)));
+  box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.25);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+.kj-table-tbody-pinned[data-pin="bottom"] > tr > td {
+  background: var(--kj-bg-elevated);
+  border-top: 2px solid var(--kj-border-primary, var(--kj-border-strong, var(--kj-border-default)));
+  box-shadow: 0 -4px 6px -4px rgba(0, 0, 0, 0.25);
+  position: sticky;
+  bottom: 0;
+  z-index: 2;
+}
+
+/* ── Grouping row ───────────────────────────────────────────────
+   Rows where a column is grouped show a toggle-able header chip on the
+   grouped cell + count of subRows. */
+.kj-table-group-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kj-base-space-xs, 0.25rem);
+  background: transparent;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+.kj-table-group-toggle__chevron {
+  display: inline-block;
+  width: 0.75rem;
+  font-family: var(--kj-font-mono);
+  color: var(--kj-fg-muted);
+  transition: transform var(--kj-transition);
+}
+.kj-table-group-toggle[aria-expanded="true"] .kj-table-group-toggle__chevron {
+  transform: rotate(90deg);
+}
+.kj-table-group-toggle__count {
+  margin-inline-start: var(--kj-base-space-xs, 0.25rem);
+  font-size: 0.75em;
+  color: var(--kj-fg-muted);
+  font-variant-numeric: tabular-nums;
+}
+:host tbody tr[data-row-grouped] td {
+  background: var(--kj-bg-elevated);
+  font-weight: 600;
+}

package/src/table/table.spec.ts

@@ -0,0 +1,175 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { render } from '@testing-library/angular';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { beforeAll, describe, expect, it, vi } from 'vitest';
+import { KjTableComponent } from './table';
+import { KJ_TABLE_STORAGE, inMemoryAdapter, kjColumn, type KjStorageAdapter } from '@kouji-ui/core';
+
+expect.extend(toHaveNoViolations);
+
+// jsdom shims for the virtualizer (used by table when virtualization is on).
+class StubResizeObserver {
+  observe(): void {}
+  unobserve(): void {}
+  disconnect(): void {}
+}
+beforeAll(() => {
+  vi.stubGlobal('ResizeObserver', StubResizeObserver);
+  Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+    configurable: true,
+    get(): number {
+      return 400;
+    },
+  });
+  Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+    configurable: true,
+    get(): number {
+      return 200;
+    },
+  });
+});
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+}
+
+@Component({
+  standalone: true,
+  imports: [KjTableComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-table [kjData]="data()" [kjColumns]="cols" />`,
+})
+class Host {
+  protected readonly data = signal<User[]>([{ id: '1', name: 'A', email: 'a@x' }]);
+  protected readonly cols = [
+    kjColumn<User>({ accessorKey: 'name', header: 'Name' }),
+    kjColumn<User>({ accessorKey: 'email', header: 'Email' }),
+  ];
+}
+
+describe('KjTableComponent', () => {
+  it('renders the data + columns', async () => {
+    const { getByText } = await render(Host);
+    expect(getByText('A')).toBeInTheDocument();
+    expect(getByText('a@x')).toBeInTheDocument();
+    expect(getByText('Name')).toBeInTheDocument();
+  });
+
+  it('host carries role="grid"', async () => {
+    const { container } = await render(Host);
+    expect(container.querySelector('[role="grid"]')).toBeTruthy();
+  });
+
+  it('default playground is axe-clean', async () => {
+    const { container } = await render(Host);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
+
+// ── Empty slot ─────────────────────────────────────────────────────────────
+@Component({
+  standalone: true,
+  imports: [KjTableComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: ` <kj-table [kjData]="data" [kjColumns]="cols">
+    <div kjEmpty>No data</div>
+  </kj-table>`,
+})
+class EmptyHost {
+  protected readonly data: User[] = [];
+  protected readonly cols = [kjColumn<User>({ accessorKey: 'name', header: 'Name' })];
+}
+
+describe('KjTableComponent — slots', () => {
+  it('renders the empty slot when data is empty', async () => {
+    const { getByText } = await render(EmptyHost);
+    expect(getByText('No data')).toBeInTheDocument();
+  });
+});
+
+// ── Filter row ─────────────────────────────────────────────────────────────
+@Component({
+  standalone: true,
+  imports: [KjTableComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-table [kjData]="data" [kjColumns]="cols" [kjEnableFilters]="true" />`,
+})
+class FilterRowHost {
+  protected readonly data: User[] = [{ id: '1', name: 'A', email: 'a@x' }];
+  protected readonly cols = [
+    kjColumn<User>({ accessorKey: 'name', header: 'Name', kjType: 'text', kjFilterable: true }),
+    kjColumn<User>({ accessorKey: 'email', header: 'Email', kjType: 'text', kjFilterable: true }),
+  ];
+}
+
+describe('KjTableComponent — filter row', () => {
+  it('renders a second header row with filter cells when kjEnableFilters=true', async () => {
+    const { container } = await render(FilterRowHost);
+    const filterRow = container.querySelector('.kj-table-filter-row');
+    expect(filterRow).toBeTruthy();
+    const anchors = container.querySelectorAll('.kj-table-filter-anchor');
+    expect(anchors.length).toBeGreaterThan(0);
+  });
+});
+
+// ── getRowId ────────────────────────────────────────────────────────────────
+@Component({
+  standalone: true,
+  imports: [KjTableComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: ` <kj-table [kjData]="data" [kjColumns]="cols" [kjGetRowId]="rowId" />`,
+})
+class GetRowIdHost {
+  protected readonly data: User[] = [
+    { id: 'user-1', name: 'Alice', email: 'a@x' },
+    { id: 'user-2', name: 'Bob', email: 'b@x' },
+  ];
+  protected readonly cols = [kjColumn<User>({ accessorKey: 'name', header: 'Name' })];
+  protected readonly rowId = (r: User): string => r.id;
+}
+
+describe('KjTableComponent — kjGetRowId', () => {
+  it('keys row selection by the user-supplied id', async () => {
+    const { fixture } = await render(GetRowIdHost);
+    const dataTable = fixture.debugElement.children[0].componentInstance as KjTableComponent<User>;
+    const tbl = dataTable.tableRef();
+    tbl.setState({ rowSelection: { 'user-1': true } });
+    fixture.detectChanges();
+    const row = tbl.table().getRow('user-1');
+    expect(row.getIsSelected()).toBe(true);
+    expect(tbl.table().getRow('user-2').getIsSelected()).toBe(false);
+  });
+});
+
+// ── kjStorageKey persistence ───────────────────────────────────────────────
+@Component({
+  standalone: true,
+  imports: [KjTableComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: ` <kj-table [kjData]="data" [kjColumns]="cols" kjStorageKey="kj.test.dt" />`,
+})
+class StorageHost {
+  protected readonly data: User[] = [{ id: '1', name: 'A', email: 'a@x' }];
+  protected readonly cols = [kjColumn<User>({ accessorKey: 'name', header: 'Name' })];
+}
+
+describe('KjTableComponent — kjStorageKey', () => {
+  it('persists state to the injected KJ_TABLE_STORAGE adapter', async () => {
+    const adapter: KjStorageAdapter = inMemoryAdapter();
+    const writeSpy = vi.spyOn(adapter, 'write');
+    const { fixture } = await render(StorageHost, {
+      providers: [{ provide: KJ_TABLE_STORAGE, useValue: adapter }],
+    });
+    const dataTable = fixture.debugElement.children[0].componentInstance as KjTableComponent<User>;
+    dataTable.tableRef().setState({ globalFilter: 'foo' });
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(writeSpy).toHaveBeenCalled();
+    const lastCall = writeSpy.mock.calls.at(-1)!;
+    expect(lastCall[0]).toBe('kj.test.dt');
+    expect((lastCall[1] as { globalFilter: string }).globalFilter).toBe('foo');
+  });
+});