@kouji-ui/core 0.0.3 → 0.1.1

package/src/table/table-keyboard.spec.ts

@@ -0,0 +1,68 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { render } from '@testing-library/angular';
+import { describe, expect, it } from 'vitest';
+import { KjTable } from './table';
+import { KjTableRow } from './table-row';
+import { KjTableCell } from './table-cell';
+import { KjTableKeyboardNav } from './table-keyboard';
+import { kjColumn } from './column-helpers';
+
+interface Row {
+  a: string;
+  b: string;
+}
+
+@Component({
+  standalone: true,
+  imports: [KjTable, KjTableRow, KjTableCell, KjTableKeyboardNav],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <table kjTableKeyboardNav [kjTable]="cols" [kjTableData]="data()" #t="kjTable">
+      <tbody>
+        @for (r of t.table().getRowModel().rows; track r.id) {
+          <tr kjTableRow [kjRow]="r">
+            @for (c of r.getVisibleCells(); track c.id) {
+              <td kjTableCell [kjCell]="c" tabindex="-1">{{ c.getValue() }}</td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+})
+class Host {
+  protected readonly cols = [
+    kjColumn<Row>({ accessorKey: 'a' }),
+    kjColumn<Row>({ accessorKey: 'b' }),
+  ];
+  protected readonly data = signal<Row[]>([
+    { a: '1', b: '2' },
+    { a: '3', b: '4' },
+  ]);
+}
+
+describe('KjTableKeyboardNav', () => {
+  it('ArrowRight moves focus to the next cell', async () => {
+    const { container } = await render(Host);
+    const cells = container.querySelectorAll<HTMLElement>('tbody td');
+    cells[0].focus();
+    cells[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+    expect(document.activeElement).toBe(cells[1]);
+  });
+
+  it('ArrowDown moves focus down a row, same column', async () => {
+    const { container } = await render(Host);
+    const cells = container.querySelectorAll<HTMLElement>('tbody td');
+    cells[0].focus();
+    cells[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    expect(document.activeElement).toBe(cells[2]);
+  });
+
+  it('Home moves focus to first cell of the row', async () => {
+    const { container } = await render(Host);
+    const cells = container.querySelectorAll<HTMLElement>('tbody td');
+    cells[1].focus();
+    cells[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }));
+    expect(document.activeElement).toBe(cells[0]);
+  });
+});

package/src/table/table-keyboard.ts

@@ -0,0 +1,107 @@
+import { Directive, contentChildren } from '@angular/core';
+import { KjTableCell } from './table-cell';
+
+/**
+ * WAI-ARIA Grid keyboard pattern. Attach to the same element as `[kjTable]`.
+ * Handles Arrow / Home / End / Ctrl+Home/End / PageUp/Down. Tab leaves the
+ * grid; cell-level F2 / Enter / Esc / Space are handled by row/cell
+ * directives or the styled wrapper's editor.
+ *
+ * Cells are resolved through Angular's `contentChildren()` query against
+ * `KjTableCell`, so the directive only ever sees **rendered** (visible) cells.
+ * That keeps navigation correct under virtualization (off-window rows aren't
+ * in the query result) and column visibility (hidden columns aren't queryable
+ * either). No raw DOM selectors.
+ */
+@Directive({
+  selector: '[kjTableKeyboardNav]',
+  standalone: true,
+  host: { '(keydown)': 'onKeyDown($event)' },
+})
+export class KjTableKeyboardNav {
+  /** Live list of every `KjTableCell` rendered inside the grid. */
+  private readonly cells = contentChildren(KjTableCell, { descendants: true });
+
+  onKeyDown(event: KeyboardEvent): void {
+    const startEl = (event.target as HTMLElement).closest<HTMLElement>('[kjTableCell]');
+    if (!startEl) return;
+
+    const matrix = this.buildMatrix();
+    if (!matrix.length) return;
+
+    const pos = this.findCell(matrix, startEl);
+    if (!pos) return;
+    const { rowIdx, colIdx } = pos;
+
+    let target: HTMLElement | null;
+
+    switch (event.key) {
+      case 'ArrowLeft':  target = matrix[rowIdx]?.[colIdx - 1] ?? null; break;
+      case 'ArrowRight': target = matrix[rowIdx]?.[colIdx + 1] ?? null; break;
+      case 'ArrowUp':    target = matrix[rowIdx - 1]?.[colIdx] ?? null; break;
+      case 'ArrowDown':  target = matrix[rowIdx + 1]?.[colIdx] ?? null; break;
+      case 'Home':
+        target = event.ctrlKey
+          ? (matrix[0]?.[0] ?? null)
+          : (matrix[rowIdx]?.[0] ?? null);
+        break;
+      case 'End': {
+        const lastRow = matrix[matrix.length - 1];
+        if (event.ctrlKey) {
+          target = lastRow?.[lastRow.length - 1] ?? null;
+        } else {
+          const row = matrix[rowIdx];
+          target = row?.[row.length - 1] ?? null;
+        }
+        break;
+      }
+      case 'PageDown':
+        target = matrix[Math.min(rowIdx + 10, matrix.length - 1)]?.[colIdx] ?? null;
+        break;
+      case 'PageUp':
+        target = matrix[Math.max(rowIdx - 10, 0)]?.[colIdx] ?? null;
+        break;
+      default: return;
+    }
+
+    if (target) {
+      event.preventDefault();
+      target.focus();
+    }
+  }
+
+  /**
+   * Group every rendered cell host by its `<tr>` ancestor, then sort the
+   * rows in DOM order. This produces a `rows[r][c]` matrix that interleaves
+   * pinned and virtualized tbodies in the order the user actually sees.
+   */
+  private buildMatrix(): HTMLElement[][] {
+    const byRow = new Map<HTMLTableRowElement, HTMLElement[]>();
+    const order: HTMLTableRowElement[] = [];
+    for (const cell of this.cells()) {
+      const host = cell.hostElement;
+      const tr = host.closest<HTMLTableRowElement>('tr');
+      if (!tr) continue;
+      if (!byRow.has(tr)) {
+        byRow.set(tr, []);
+        order.push(tr);
+      }
+      byRow.get(tr)!.push(host);
+    }
+    order.sort((a, b) =>
+      a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+    );
+    return order.map((tr) => byRow.get(tr)!);
+  }
+
+  private findCell(
+    matrix: HTMLElement[][],
+    el: HTMLElement,
+  ): { rowIdx: number; colIdx: number } | null {
+    for (let r = 0; r < matrix.length; r++) {
+      const c = matrix[r].indexOf(el);
+      if (c !== -1) return { rowIdx: r, colIdx: c };
+    }
+    return null;
+  }
+}

package/src/table/table-resource.spec.ts

@@ -0,0 +1,37 @@
+import { TestBed } from '@angular/core/testing';
+import { signal } from '@angular/core';
+import { describe, expect, it, vi } from 'vitest';
+import { kjTableResource } from './table-resource';
+import type { KjTableState } from './table.types';
+
+const initialState: KjTableState = {
+  sorting: [], columnFilters: [], globalFilter: '',
+  pagination: { pageIndex: 0, pageSize: 25 },
+  rowSelection: {}, columnSizing: {}, columnVisibility: {},
+  columnOrder: [], columnPinning: { left: [], right: [] },
+  expanded: {}, grouping: [], density: 'standard',
+};
+
+describe('kjTableResource', () => {
+  it('starts in loading state then resolves', async () => {
+    const r = TestBed.runInInjectionContext(() => kjTableResource<{ id: string }>({
+      stateSignal: signal(initialState),
+      loader: async () => ({ rows: [{ id: '1' }], rowCount: 1 }),
+    }));
+    expect(r.status()).toBe('loading');
+    await new Promise(res => setTimeout(res));
+    expect(r.status()).toBe('resolved');
+    expect(r.value()).toEqual({ rows: [{ id: '1' }], rowCount: 1 });
+  });
+
+  it('re-loads when state signal changes', async () => {
+    const loader = vi.fn(async () => ({ rows: [], rowCount: 0 }));
+    const state = signal(initialState);
+    TestBed.runInInjectionContext(() => kjTableResource({ stateSignal: state, loader }));
+    await new Promise(res => setTimeout(res));
+    expect(loader).toHaveBeenCalledTimes(1);
+    state.set({ ...initialState, pagination: { pageIndex: 1, pageSize: 25 } });
+    await new Promise(res => setTimeout(res));
+    expect(loader).toHaveBeenCalledTimes(2);
+  });
+});

package/src/table/table-resource.ts

@@ -0,0 +1,36 @@
+import { resource, Signal, type ResourceRef } from '@angular/core';
+import type { KjTableState, KjResourceResult } from './table.types';
+
+export interface KjTableResourceOptions<TData, TRequest = unknown> {
+  /** Signal carrying the table's current state. Wired into the resource request. */
+  stateSignal: Signal<KjTableState>;
+  /** Optional extra request inputs — merged into the loader's `request` arg. */
+  request?: Signal<TRequest> | (() => TRequest);
+  /** Async loader. Receives the current table state + extra request + abort signal. */
+  loader: (ctx: {
+    state: KjTableState;
+    request: TRequest | undefined;
+    abortSignal: AbortSignal;
+  }) => Promise<KjResourceResult<TData>>;
+}
+
+/**
+ * Resource that wires the table's state signal into Angular's `resource()`.
+ * The loader is re-invoked whenever the state (or optional extra request)
+ * changes. Aborts in-flight loads on changes.
+ */
+export function kjTableResource<TData, TRequest = unknown>(
+  opts: KjTableResourceOptions<TData, TRequest>,
+): ResourceRef<KjResourceResult<TData> | undefined> {
+  const requestSig = opts.request
+    ? (typeof opts.request === 'function' ? opts.request : () => opts.request!())
+    : () => undefined;
+  return resource<KjResourceResult<TData>, { state: KjTableState; request: TRequest | undefined }>({
+    params: () => ({ state: opts.stateSignal(), request: requestSig() as TRequest | undefined }),
+    loader: ({ params, abortSignal }) => opts.loader({
+      state: params.state,
+      request: params.request,
+      abortSignal,
+    }),
+  });
+}

package/src/table/table-row.spec.ts

@@ -0,0 +1,54 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { render } from '@testing-library/angular';
+import { describe, expect, it } from 'vitest';
+import { KjTable } from './table';
+import { KjTableRow } from './table-row';
+import { kjColumn } from './column-helpers';
+
+interface Row {
+  id: string;
+  name: string;
+}
+
+@Component({
+  standalone: true,
+  imports: [KjTable, KjTableRow],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <table [kjTable]="cols" [kjTableData]="data()" #t="kjTable">
+      <tbody>
+        @for (r of t.table().getRowModel().rows; track r.id) {
+          <tr kjTableRow [kjRow]="r"></tr>
+        }
+      </tbody>
+    </table>
+  `,
+})
+class Host {
+  protected readonly cols = [kjColumn<Row>({ accessorKey: 'name', header: 'Name' })];
+  protected readonly data = signal<Row[]>([
+    { id: 'a', name: 'A' },
+    { id: 'b', name: 'B' },
+  ]);
+}
+
+describe('KjTableRow', () => {
+  it('sets role="row" and aria-rowindex', async () => {
+    const { container } = await render(Host);
+    const rows = container.querySelectorAll('tbody tr');
+    expect(rows[0].getAttribute('role')).toBe('row');
+    expect(rows[0].getAttribute('aria-rowindex')).toBe('2'); // 1 = header
+    expect(rows[1].getAttribute('aria-rowindex')).toBe('3');
+  });
+
+  it('reflects aria-selected when row is selected', async () => {
+    const { container, fixture } = await render(Host);
+    const dir = fixture.debugElement.children[0].injector.get(KjTable);
+    // TanStack default row id is the row index as a string ('0' = first row).
+    dir.setState({ rowSelection: { '0': true } });
+    fixture.detectChanges();
+    const rows = container.querySelectorAll('tbody tr');
+    expect(rows[0].getAttribute('aria-selected')).toBe('true');
+    expect(rows[1].getAttribute('aria-selected')).toBe('false');
+  });
+});

package/src/table/table-row.ts

@@ -0,0 +1,31 @@
+import { Directive, computed, inject, input } from '@angular/core';
+import type { RowData, Table } from '@tanstack/angular-table';
+import { KJ_TABLE, KjTable } from './table';
+
+type Row<T> = ReturnType<Table<T>['getRowModel']>['rows'][number];
+
+@Directive({
+  selector: '[kjTableRow]',
+  standalone: true,
+  host: {
+    'role': 'row',
+    '[attr.aria-rowindex]':  'ariaRowIndex()',
+    '[attr.aria-selected]':  'isSelectable() ? isSelected() : null',
+    '[attr.data-selected]':  'isSelected() ? "" : null',
+  },
+})
+export class KjTableRow<TData extends RowData = unknown> {
+  /** TanStack row instance — pass from getRowModel().rows. */
+  kjRow = input.required<Row<TData>>();
+
+  private readonly table = inject(KJ_TABLE) as unknown as KjTable<TData>;
+
+  /** 1-based ARIA index — accounts for header row(s). */
+  readonly ariaRowIndex = computed(() => this.kjRow().index + 2);
+  readonly isSelectable = computed(() => Object.keys(this.table.state.rowSelection()).length >= 0); // always true if selection enabled
+  readonly isSelected   = computed(() => {
+    // Track parent selection signal so the computed re-runs on selection changes.
+    this.table.state.rowSelection();
+    return this.kjRow().getIsSelected();
+  });
+}

package/src/table/table-storage.spec.ts

@@ -0,0 +1,67 @@
+import { TestBed } from '@angular/core/testing';
+import { describe, expect, it, beforeEach, vi } from 'vitest';
+import {
+  KJ_TABLE_STORAGE,
+  inMemoryAdapter,
+  localStorageAdapter,
+  sessionStorageAdapter,
+  provideKjTableStorage,
+  type KjStorageAdapter,
+} from './table-storage';
+
+describe('inMemoryAdapter', () => {
+  it('round-trips values', () => {
+    const a = inMemoryAdapter();
+    expect(a.read('x')).toBeNull();
+    a.write('x', { a: 1 });
+    expect(a.read('x')).toEqual({ a: 1 });
+  });
+  it('isolates between instances', () => {
+    const a = inMemoryAdapter();
+    const b = inMemoryAdapter();
+    a.write('k', 1);
+    expect(b.read('k')).toBeNull();
+  });
+});
+
+describe('localStorageAdapter', () => {
+  beforeEach(() => localStorage.clear());
+  it('round-trips through localStorage', () => {
+    const a = localStorageAdapter();
+    a.write('k', { a: 1 });
+    expect(a.read('k')).toEqual({ a: 1 });
+  });
+  it('honours keyPrefix', () => {
+    const a = localStorageAdapter({ keyPrefix: 'myapp:' });
+    a.write('k', 1);
+    expect(localStorage.getItem('myapp:k')).toBe('1');
+  });
+  it('returns null when value is corrupt JSON', () => {
+    localStorage.setItem('k', '{bad json');
+    expect(localStorageAdapter().read('k')).toBeNull();
+  });
+});
+
+describe('sessionStorageAdapter', () => {
+  beforeEach(() => sessionStorage.clear());
+  it('round-trips through sessionStorage', () => {
+    const a = sessionStorageAdapter();
+    a.write('k', { a: 1 });
+    expect(a.read('k')).toEqual({ a: 1 });
+  });
+});
+
+describe('provideKjTableStorage', () => {
+  it('binds adapter to KJ_TABLE_STORAGE token', () => {
+    const mock: KjStorageAdapter = { read: vi.fn(() => null), write: vi.fn() };
+    TestBed.configureTestingModule({ providers: [provideKjTableStorage(mock)] });
+    expect(TestBed.inject(KJ_TABLE_STORAGE)).toBe(mock);
+  });
+
+  it('default factory yields inMemory adapter when not provided', () => {
+    TestBed.configureTestingModule({ providers: [] });
+    const adapter = TestBed.inject(KJ_TABLE_STORAGE);
+    expect(typeof adapter.read).toBe('function');
+    expect(typeof adapter.write).toBe('function');
+  });
+});

package/src/table/table-storage.ts

@@ -0,0 +1,76 @@
+import { InjectionToken, Provider } from '@angular/core';
+
+/**
+ * Adapter contract for persisting `<kj-data-table>` state. The default
+ * factory yields an in-memory adapter in non-browser environments and a
+ * localStorage adapter in the browser.
+ */
+export interface KjStorageAdapter {
+  read<T>(key: string): T | null;
+  write<T>(key: string, value: T): void;
+}
+
+export interface LocalStorageAdapterOptions { keyPrefix?: string; }
+export interface SessionStorageAdapterOptions { keyPrefix?: string; }
+
+/** Per-instance in-memory adapter. Survives nothing. Default in SSR/tests. */
+export function inMemoryAdapter(): KjStorageAdapter {
+  const store = new Map<string, unknown>();
+  return {
+    read: <T>(k: string): T | null => store.has(k) ? (store.get(k) as T) : null,
+    write: <T>(k: string, v: T) => { store.set(k, v); },
+  };
+}
+
+function wrap(get: () => Storage | null, prefix = ''): KjStorageAdapter {
+  return {
+    read<T>(k: string): T | null {
+      const s = get();
+      if (!s) return null;
+      const raw = s.getItem(prefix + k);
+      if (raw == null) return null;
+      try { return JSON.parse(raw) as T; } catch { return null; }
+    },
+    write<T>(k: string, v: T) {
+      const s = get();
+      if (!s) return;
+      try { s.setItem(prefix + k, JSON.stringify(v)); } catch { /* quota / serialization */ }
+    },
+  };
+}
+
+const safeLocal = (): Storage | null => {
+  try { return typeof localStorage !== 'undefined' ? localStorage : null; } catch { return null; }
+};
+const safeSession = (): Storage | null => {
+  try { return typeof sessionStorage !== 'undefined' ? sessionStorage : null; } catch { return null; }
+};
+
+/** Adapter backed by `localStorage`. No-ops in SSR. Optional `keyPrefix`. */
+export function localStorageAdapter(opts: LocalStorageAdapterOptions = {}): KjStorageAdapter {
+  return wrap(safeLocal, opts.keyPrefix ?? '');
+}
+
+/** Adapter backed by `sessionStorage`. No-ops in SSR. Optional `keyPrefix`. */
+export function sessionStorageAdapter(opts: SessionStorageAdapterOptions = {}): KjStorageAdapter {
+  return wrap(safeSession, opts.keyPrefix ?? '');
+}
+
+/** Default smart adapter — localStorage in browser, in-memory otherwise. */
+function defaultAdapter(): KjStorageAdapter {
+  return safeLocal() ? localStorageAdapter() : inMemoryAdapter();
+}
+
+/**
+ * DI token for the active table storage adapter. Default factory yields a
+ * smart adapter (localStorage in browser, in-memory otherwise). Override via
+ * `provideKjTableStorage(...)` at app scope or `[kjStorageAdapter]` per table.
+ */
+export const KJ_TABLE_STORAGE = new InjectionToken<KjStorageAdapter>('kj.table.storage', {
+  factory: defaultAdapter,
+});
+
+/** Configures the app-wide table storage adapter. */
+export function provideKjTableStorage(adapter: KjStorageAdapter): Provider {
+  return { provide: KJ_TABLE_STORAGE, useValue: adapter };
+}

package/src/table/table.spec.ts

@@ -1,37 +1,43 @@
-import { Component } from '@angular/core';
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
 import { ColumnDef } from '@tanstack/angular-table';
-import { render, fireEvent } from '@testing-library/angular';
+import { render } from '@testing-library/angular';
 import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjTable, KjTableHeader } from './table';
+import { describe, expect, it } from 'vitest';
+import { KjTable } from './table';
+import { KjTableHeader } from './table-header';
+import { kjColumn } from './column-helpers';
 
 expect.extend(toHaveNoViolations);
 
-interface User { name: string; age: number; }
+interface User {
+  name: string;
+  age: number;
+}
 
 @Component({
   standalone: true,
   imports: [KjTable, KjTableHeader],
-  template: `
-    <table [kjTable]="columns" [kjTableData]="data" #tbl="kjTable">
-      <thead>
-        @for (hg of tbl.table().getHeaderGroups(); track hg.id) {
-          <tr>
-            @for (h of hg.headers; track h.id) {
-              <th kjTableHeader [kjHeader]="h" scope="col">{{ h.id }}</th>
-            }
-          </tr>
-        }
-      </thead>
-      <tbody>
-        @for (row of tbl.table().getRowModel().rows; track row.id) {
-          <tr>
-            @for (cell of row.getVisibleCells(); track cell.id) {
-              <td>{{ cell.getValue() }}</td>
-            }
-          </tr>
-        }
-      </tbody>
-    </table>`,
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: ` <table [kjTable]="columns" [kjTableData]="data" #tbl="kjTable">
+    <thead>
+      @for (hg of tbl.table().getHeaderGroups(); track hg.id) {
+        <tr>
+          @for (h of hg.headers; track h.id) {
+            <th kjTableHeader [kjHeader]="h" scope="col">{{ h.id }}</th>
+          }
+        </tr>
+      }
+    </thead>
+    <tbody>
+      @for (row of tbl.table().getRowModel().rows; track row.id) {
+        <tr>
+          @for (cell of row.getVisibleCells(); track cell.id) {
+            <td>{{ cell.getValue() }}</td>
+          }
+        </tr>
+      }
+    </tbody>
+  </table>`,
 })
 class TableTestComponent {
   columns: ColumnDef<User>[] = [
@@ -71,37 +77,34 @@ describe('KjTable', () => {
   it('sortable header has tabindex=0', async () => {
     const { container } = await render(TableTestComponent);
     const ths = container.querySelectorAll('th');
-    ths.forEach(th => expect(th).toHaveAttribute('tabindex', '0'));
+    ths.forEach((th) => expect(th).toHaveAttribute('tabindex', '0'));
   });
 
   it('sortable header has aria-sort="none" initially', async () => {
     const { container } = await render(TableTestComponent);
     const ths = container.querySelectorAll('th');
-    ths.forEach(th => expect(th).toHaveAttribute('aria-sort', 'none'));
+    ths.forEach((th) => expect(th).toHaveAttribute('aria-sort', 'none'));
   });
 
   it('non-sortable column header has no cursor:pointer', async () => {
     @Component({
       standalone: true,
       imports: [KjTable, KjTableHeader],
-      template: `
-        <table [kjTable]="columns" [kjTableData]="data" #tbl="kjTable">
-          <thead>
-            @for (hg of tbl.table().getHeaderGroups(); track hg.id) {
-              <tr>
-                @for (h of hg.headers; track h.id) {
-                  <th kjTableHeader [kjHeader]="h" scope="col">{{ h.id }}</th>
-                }
-              </tr>
-            }
-          </thead>
-          <tbody></tbody>
-        </table>`,
+      template: ` <table [kjTable]="columns" [kjTableData]="data" #tbl="kjTable">
+        <thead>
+          @for (hg of tbl.table().getHeaderGroups(); track hg.id) {
+            <tr>
+              @for (h of hg.headers; track h.id) {
+                <th kjTableHeader [kjHeader]="h" scope="col">{{ h.id }}</th>
+              }
+            </tr>
+          }
+        </thead>
+        <tbody></tbody>
+      </table>`,
     })
     class NoSortTableComponent {
-      columns: ColumnDef<User>[] = [
-        { accessorKey: 'name', header: 'Name', enableSorting: false },
-      ];
+      columns: ColumnDef<User>[] = [{ accessorKey: 'name', header: 'Name', enableSorting: false }];
       data: User[] = [{ name: 'Alice', age: 30 }];
     }
 
@@ -111,3 +114,59 @@ describe('KjTable', () => {
     expect(th.hasAttribute('data-sort')).toBe(false);
   });
 });
+
+interface Row {
+  id: string;
+  name: string;
+}
+
+@Component({
+  standalone: true,
+  imports: [KjTable],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<table [kjTable]="cols" [kjTableData]="data()" #t="kjTable"></table>`,
+})
+class Host {
+  protected readonly cols = [kjColumn<Row>({ accessorKey: 'name', header: 'Name' })];
+  protected readonly data = signal<Row[]>([
+    { id: '1', name: 'alice' },
+    { id: '2', name: 'bob' },
+  ]);
+}
+
+describe('KjTable (extended)', () => {
+  it('exposes every state slice via the deep state signal', async () => {
+    const { fixture } = await render(Host);
+    const dir = fixture.debugElement.children[0].injector.get(KjTable);
+    expect(dir.state.sorting()).toEqual([]);
+    expect(dir.state.columnFilters()).toEqual([]);
+    expect(dir.state.globalFilter()).toBe('');
+    expect(dir.state.pagination()).toEqual({ pageIndex: 0, pageSize: 25 });
+    expect(dir.state.rowSelection()).toEqual({});
+    expect(dir.state.columnSizing()).toEqual({});
+    expect(dir.state.columnVisibility()).toEqual({});
+    expect(dir.state.columnOrder()).toEqual([]);
+    expect(dir.state.columnPinning()).toEqual({ left: [], right: [] });
+    expect(dir.state.expanded()).toEqual({});
+    expect(dir.state.grouping()).toEqual([]);
+    expect(dir.state.density()).toBe('standard');
+  });
+
+  it('state() returns the full bundle and setState merges', async () => {
+    const { fixture } = await render(Host);
+    const dir = fixture.debugElement.children[0].injector.get(KjTable);
+    dir.setState({ density: 'compact', globalFilter: 'al' });
+    expect(dir.state.density()).toBe('compact');
+    expect(dir.state.globalFilter()).toBe('al');
+    expect(dir.state().density).toBe('compact');
+  });
+
+  it('resetState clears all slices', async () => {
+    const { fixture } = await render(Host);
+    const dir = fixture.debugElement.children[0].injector.get(KjTable);
+    dir.setState({ density: 'compact', globalFilter: 'x' });
+    dir.resetState();
+    expect(dir.state.density()).toBe('standard');
+    expect(dir.state.globalFilter()).toBe('');
+  });
+});