@kouji-ui/core 0.0.3 → 0.1.1

package/src/table/grid-api.ts

@@ -0,0 +1,285 @@
+import type { Signal } from '@angular/core';
+import type {
+  Column,
+  ColumnFiltersState,
+  ColumnOrderState,
+  ColumnPinningState,
+  ColumnSizingState,
+  ExpandedState,
+  GroupingState,
+  PaginationState,
+  Row,
+  RowData,
+  RowSelectionState,
+  SortingState,
+  Table,
+  VisibilityState,
+} from '@tanstack/angular-table';
+import type { KjFilterModel, KjGridFilterModel } from './filter-models';
+import type { KjTableDensity, KjTableState } from './table.types';
+
+/**
+ * Operations grouped by aspect so callers can write code like
+ * `api.pagination.next()` or `api.selection.toggle(id)` rather than a flat
+ * verb soup. Inspired by AG-Grid's `GridApi`, but reorganised so each
+ * concept (rows, selection, sort, filters, pagination, expansion,
+ * grouping, density) gets its own namespace — methods inside drop the
+ * noun suffix because the namespace already supplies it.
+ */
+export interface KjGridApi<TData extends RowData = unknown> {
+  /** Reactive view of the full table state. Use inside `computed`/`effect`. */
+  readonly state: Signal<KjTableState>;
+
+  /** The underlying TanStack `Table<T>` instance. Escape hatch for advanced use. */
+  table(): Table<TData>;
+
+  /** Rows: source data + filtered/sorted/paginated derivatives. */
+  readonly rows: KjRowsApi<TData>;
+
+  /** Row selection — single, multi, bulk. */
+  readonly selection: KjSelectionApi<TData>;
+
+  /** Sort model + per-column toggle. */
+  readonly sort: KjSortApi;
+
+  /** Column filters + global search. */
+  readonly filter: KjFilterApi;
+
+  /** Pagination model + cursor navigation. */
+  readonly pagination: KjPaginationApi;
+
+  /** Row expansion model. */
+  readonly expansion: KjExpansionApi;
+
+  /** Grouping order. */
+  readonly grouping: KjGroupingApi;
+
+  /** Density preset. */
+  readonly density: KjDensityApi;
+
+  /** Merge a partial state. Unspecified slices are untouched. */
+  setState(partial: Partial<KjTableState>): void;
+
+  /** Reset every slice to the directive's defaults. */
+  resetState(): void;
+}
+
+/** Source + derived row models. */
+export interface KjRowsApi<TData> {
+  /** Source data array bound to the table (pre-filter, pre-sort). */
+  all(): readonly TData[];
+  /** RowModel after filtering, sorting, pagination, grouping. */
+  displayed(): Row<TData>[];
+  /** Total source rows. */
+  count(): number;
+  /** Rows surviving filters (before pagination clamps). */
+  filteredCount(): number;
+  /** Rows visible in the current page. */
+  displayedCount(): number;
+  /** Look up a TanStack row by id. */
+  get(id: string): Row<TData> | undefined;
+}
+
+/** Row selection ops. */
+export interface KjSelectionApi<TData> {
+  /** Current selection map. */
+  get(): RowSelectionState;
+  /** Replace the entire selection map. */
+  set(model: RowSelectionState): void;
+  /** Resolved row instances for the current selection (within filtered model). */
+  rows(): Row<TData>[];
+  /** Ids of selected rows. */
+  ids(): readonly string[];
+  /** True when at least one row is selected. */
+  has(): boolean;
+  /** Set a single row's selection. */
+  select(id: string, selected?: boolean): void;
+  /** Deselect a single row. */
+  deselect(id: string): void;
+  /** Toggle a single row's selection. */
+  toggle(id: string): void;
+  /** Select every row in the current filtered model. */
+  all(): void;
+  /** Clear all selection state. */
+  clear(): void;
+}
+
+/** Sort model + per-column toggle. */
+export interface KjSortApi {
+  /** Current sort entries. */
+  get(): SortingState;
+  /** Replace the sort model. */
+  set(sorting: SortingState): void;
+  /** Toggle a single column's sort direction (asc → desc → none). */
+  toggle(columnId: string, multi?: boolean): void;
+  /** Remove every sort entry. */
+  clear(): void;
+}
+
+/** Column filters + global search. */
+export interface KjFilterApi {
+  /** Read a single column's filter value. */
+  get(columnId: string): unknown;
+  /** Set or clear a column's filter (`undefined`/`null`/`''` clears). */
+  set(columnId: string, value: unknown): void;
+  /** Clear a single column's filter. */
+  clear(columnId: string): void;
+  /** All column filter entries. */
+  all(): ColumnFiltersState;
+  /** Replace every column filter at once. */
+  setAll(filters: ColumnFiltersState): void;
+  /** Global (cross-column) search string. */
+  readonly global: KjGlobalFilterApi;
+  /** Clear column filters AND global filter in one shot. */
+  clearAll(): void;
+
+  // ── Structured filter model (AG-Grid-compatible, for SSR) ──────────────
+
+  /**
+   * Read a single column's filter as a structured {@link KjFilterModel}.
+   * Returns `undefined` when the column has no filter or its value is a
+   * raw (non-model) primitive — call {@link KjFilterApi.get} for the
+   * legacy raw view.
+   */
+  getModelFor(columnId: string): KjFilterModel | undefined;
+  /** Apply a structured model to a single column. `null` clears. */
+  setModelFor(columnId: string, model: KjFilterModel | null | undefined): void;
+  /**
+   * Snapshot every column's filter as a `KjGridFilterModel`
+   * (`Record<columnId, KjFilterModel>`). Use to serialise filter state
+   * for server-side queries or persistence. Columns whose value is a
+   * raw primitive (no `filterType` discriminator) are omitted — pair
+   * with `all()` for the legacy bulk view.
+   */
+  getModel(): KjGridFilterModel;
+  /**
+   * Replace the entire grid-level filter model. Matches AG-Grid's
+   * `setFilterModel` contract: columns absent from `model` are cleared.
+   */
+  setModel(model: KjGridFilterModel | null): void;
+}
+
+export interface KjGlobalFilterApi {
+  get(): string;
+  set(value: string): void;
+  clear(): void;
+}
+
+/** Pagination model + cursor navigation. */
+export interface KjPaginationApi {
+  /** Current `{ pageIndex, pageSize }`. */
+  get(): PaginationState;
+  /** Replace pagination state. */
+  set(pagination: PaginationState): void;
+  /** Total pages for the current filtered model. */
+  pageCount(): number;
+  /** Jump to a 0-indexed page. Clamped to `[0, pageCount-1]`. */
+  setPageIndex(pageIndex: number): void;
+  /** Change rows per page. Resets to page 0 to keep the view coherent. */
+  setPageSize(pageSize: number): void;
+  /** Advance one page, no-op if already on the last page. */
+  next(): void;
+  /** Rewind one page, no-op if already on page 0. */
+  previous(): void;
+  /** Jump to page 0. */
+  first(): void;
+  /** Jump to the last page. */
+  last(): void;
+}
+
+/** Row expansion model. */
+export interface KjExpansionApi<_TData = unknown> {
+  /** Current expansion state. `true` = every row expanded. */
+  get(): ExpandedState;
+  /** Replace expansion state. */
+  set(expanded: ExpandedState): void;
+  /** Set a single row's expanded state. */
+  setRow(id: string, expanded: boolean): void;
+  /** Toggle a single row's expanded state. */
+  toggle(id: string): void;
+  /** Expand every row in the current filtered model. */
+  expandAll(): void;
+  /** Collapse every row. */
+  collapseAll(): void;
+}
+
+/** Grouping order. */
+export interface KjGroupingApi {
+  /** Current grouping (ordered column ids). */
+  get(): GroupingState;
+  /** Replace grouping. */
+  set(grouping: GroupingState): void;
+  /** Add a column to the grouping order (no-op if already grouped). */
+  add(columnId: string): void;
+  /** Remove a column from grouping. Omit `columnId` to clear all grouping. */
+  remove(columnId?: string): void;
+}
+
+/** Density preset. */
+export interface KjDensityApi {
+  get(): KjTableDensity;
+  set(density: KjTableDensity): void;
+}
+
+/**
+ * Per-column operations + bulk column state. Mirrors `KjGridApi`'s shape
+ * — each concept (visibility, sizing, pinning, order, grouping) is its
+ * own namespace.
+ */
+export interface KjColumnApi<TData extends RowData = unknown> {
+  /** Look up a column by id. */
+  get(columnId: string): Column<TData, unknown> | null;
+  /** Every column (leaf + group). */
+  all(): Column<TData, unknown>[];
+  /** Leaf columns only. */
+  leaves(): Column<TData, unknown>[];
+  /** Leaf columns currently visible. */
+  visibleLeaves(): Column<TData, unknown>[];
+
+  /** Column visibility ops. */
+  readonly visibility: KjColumnVisibilityApi;
+  /** Column width/sizing ops. */
+  readonly sizing: KjColumnSizingApi;
+  /** Column pinning ops. */
+  readonly pinning: KjColumnPinningApi;
+  /** Column order ops. */
+  readonly order: KjColumnOrderApi;
+  /** Per-column grouping toggle. */
+  readonly grouping: KjColumnGroupingApi;
+
+  /** Reset visibility, sizing, pinning, order, and grouping in one shot. */
+  reset(): void;
+}
+
+export interface KjColumnVisibilityApi {
+  get(): VisibilityState;
+  set(model: VisibilityState): void;
+  isVisible(columnId: string): boolean;
+  setVisible(columnId: string, visible: boolean): void;
+  setManyVisible(columnIds: readonly string[], visible: boolean): void;
+}
+
+export interface KjColumnSizingApi {
+  get(): ColumnSizingState;
+  set(model: ColumnSizingState): void;
+  width(columnId: string): number;
+  setWidth(columnId: string, width: number): void;
+}
+
+export interface KjColumnPinningApi {
+  get(): ColumnPinningState;
+  set(model: ColumnPinningState): void;
+  of(columnId: string): 'left' | 'right' | null;
+  pin(columnId: string, side: 'left' | 'right' | null): void;
+}
+
+export interface KjColumnOrderApi {
+  get(): ColumnOrderState;
+  set(order: ColumnOrderState): void;
+  move(columnId: string, toIndex: number): void;
+}
+
+export interface KjColumnGroupingApi {
+  is(columnId: string): boolean;
+  set(columnId: string, grouped: boolean): void;
+}

package/src/table/index.ts

@@ -1 +1,73 @@
-export { KjTable, KjTableHeader, KJ_TABLE, type KjSortDirection } from './table';
+export { KjTable, KJ_TABLE } from './table';
+export { KjTableHeader, type KjSortDirection } from './table-header';
+export { KjTableRow } from './table-row';
+export { KjTableCell } from './table-cell';
+export { KjTableKeyboardNav } from './table-keyboard';
+export { KjTableFilterOutlet } from './table-filter-outlet';
+export { kjColumn, kjColumnGroup } from './column-helpers';
+export { kjTableResource } from './table-resource';
+export type {
+  KjGridApi,
+  KjColumnApi,
+  KjRowsApi,
+  KjSelectionApi,
+  KjSortApi,
+  KjFilterApi,
+  KjGlobalFilterApi,
+  KjPaginationApi,
+  KjExpansionApi,
+  KjGroupingApi,
+  KjDensityApi,
+  KjColumnVisibilityApi,
+  KjColumnSizingApi,
+  KjColumnPinningApi,
+  KjColumnOrderApi,
+  KjColumnGroupingApi,
+} from './grid-api';
+export {
+  provideKjFilterParams,
+  injectKjFilterParams,
+  type KjFilterParams,
+  type KjFilterRenderer,
+} from './filter-params';
+export {
+  isKjFilterModel,
+  type KjFilterModel,
+  type KjGridFilterModel,
+  type KjTextFilterModel,
+  type KjTextFilterType,
+  type KjNumberFilterModel,
+  type KjNumberFilterType,
+  type KjDateFilterModel,
+  type KjDateFilterType,
+  type KjSetFilterModel,
+  type KjMultiConditionFilterModel,
+} from './filter-models';
+export {
+  kjTextFilterFn,
+  kjNumberFilterFn,
+  kjDateFilterFn,
+  kjSetFilterFn,
+  kjMultiFilterFn,
+} from './filter-fns';
+export {
+  KJ_TABLE_STORAGE,
+  inMemoryAdapter,
+  localStorageAdapter,
+  sessionStorageAdapter,
+  provideKjTableStorage,
+  type KjStorageAdapter,
+} from './table-storage';
+export type {
+  KjColumnType,
+  KjColumnPin,
+  KjAggregationKind,
+  KjAggregationFn,
+  KjAggregation,
+  KjEditorRef,
+  KjFilterUiRef,
+  KjColumnMeta,
+  KjColumnDef,
+  KjTableState,
+  KjResourceResult,
+} from './table.types';

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

@@ -0,0 +1,43 @@
+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 { kjColumn } from './column-helpers';
+
+interface Row {
+  name: string;
+}
+
+@Component({
+  standalone: true,
+  imports: [KjTable, KjTableRow, KjTableCell],
+  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">
+            @for (c of r.getVisibleCells(); track c.id) {
+              <td kjTableCell [kjCell]="c">{{ c.getValue() }}</td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+})
+class Host {
+  protected readonly cols = [kjColumn<Row>({ accessorKey: 'name', header: 'Name' })];
+  protected readonly data = signal<Row[]>([{ name: 'A' }]);
+}
+
+describe('KjTableCell', () => {
+  it('sets role="gridcell" and aria-colindex', async () => {
+    const { container } = await render(Host);
+    const td = container.querySelector('tbody td') as HTMLElement;
+    expect(td.getAttribute('role')).toBe('gridcell');
+    expect(td.getAttribute('aria-colindex')).toBe('1');
+  });
+});

package/src/table/table-cell.ts

@@ -0,0 +1,38 @@
+import { Directive, ElementRef, computed, inject, input } from '@angular/core';
+import type { RowData, Table } from '@tanstack/angular-table';
+
+type Cell<T> = ReturnType<Table<T>['getRowModel']>['rows'][number]['getVisibleCells'] extends () => infer R
+  ? R extends Array<infer C> ? C : never : never;
+
+@Directive({
+  selector: '[kjTableCell]',
+  standalone: true,
+  host: {
+    'role': 'gridcell',
+    '[attr.aria-colindex]': 'ariaColIndex()',
+    '[attr.data-pin]': 'pin()',
+  },
+})
+export class KjTableCell<TData extends RowData = unknown> {
+  /** TanStack cell instance — pass from row.getVisibleCells(). */
+  kjCell = input.required<Cell<TData>>();
+
+  private readonly elementRef: ElementRef<HTMLElement> = inject(ElementRef);
+
+  /** Public host element handle — used by `KjTableKeyboardNav` to focus cells. */
+  get hostElement(): HTMLElement {
+    return this.elementRef.nativeElement;
+  }
+
+  /** 1-based ARIA index for the column. */
+  readonly ariaColIndex = computed(() => {
+    const cell = this.kjCell() as { column?: { getIndex?: () => number } };
+    const idx = cell.column?.getIndex?.();
+    return idx != null ? idx + 1 : null;
+  });
+
+  readonly pin = computed(() => {
+    const cell = this.kjCell() as { column?: { getIsPinned?: () => unknown } };
+    return cell.column?.getIsPinned?.() ?? null;
+  });
+}

package/src/table/table-filter-outlet.ts

@@ -0,0 +1,120 @@
+import {
+  Directive,
+  EnvironmentInjector,
+  Injector,
+  TemplateRef,
+  Type,
+  ViewContainerRef,
+  computed,
+  effect,
+  inject,
+  input,
+  signal,
+  type ComponentRef,
+  type EmbeddedViewRef,
+  type Signal,
+} from '@angular/core';
+import type { Column, RowData } from '@tanstack/angular-table';
+import { KJ_TABLE, KjTable } from './table';
+import { provideKjFilterParams, type KjFilterParams, type KjFilterRenderer } from './filter-params';
+
+/**
+ * Mounts a user-supplied filter UI (component class or `TemplateRef`) and
+ * wires it to a single `Column`. The mounted view receives a stable
+ * `KjFilterParams` object via:
+ *
+ * - the component's `params` input (if it declares one), and
+ * - the `KJ_FILTER_PARAMS` DI token (for components that prefer DI), and
+ * - `let-params` on a template.
+ *
+ * The outlet itself owns the column's filter signal — it reads
+ * `column.getFilterValue()` through the table's state signal so any external
+ * change (URL state, persisted state, programmatic `gridApi.setColumnFilter`)
+ * flows back into the UI.
+ *
+ * @example
+ * ```html
+ * <th kj-table-filter-outlet [kjColumn]="col" [kjFilter]="MyFilter" />
+ * ```
+ */
+@Directive({
+  selector: '[kj-table-filter-outlet],[kjTableFilterOutlet]',
+  standalone: true,
+})
+export class KjTableFilterOutlet<TData extends RowData = unknown, TValue = unknown> {
+  /** The TanStack column this outlet's filter operates on. */
+  kjColumn = input.required<Column<TData, TValue>>();
+
+  /** The filter renderer — a component class or a `TemplateRef`. */
+  kjFilter = input.required<KjFilterRenderer<TData, TValue>>();
+
+  private readonly tableDir = inject<KjTable<TData>>(KJ_TABLE as never);
+  private readonly viewContainer = inject(ViewContainerRef);
+  private readonly envInjector = inject(EnvironmentInjector);
+  private readonly parentInjector = inject(Injector);
+
+  /** Reactive view of the column's current filter value. */
+  private readonly modelSignal: Signal<TValue | null> = computed(() => {
+    // Subscribe to the underlying state slice so this re-runs whenever the
+    // filter changes — `getFilterValue()` itself isn't a signal.
+    this.tableDir.state.columnFilters();
+    const v = this.kjColumn().getFilterValue();
+    return (v ?? null) as TValue | null;
+  });
+
+  private mounted = signal<
+    | { kind: 'component'; ref: ComponentRef<{ params?: KjFilterParams<TData, TValue> }> }
+    | { kind: 'template';  ref: EmbeddedViewRef<KjFilterParams<TData, TValue>> }
+    | null
+  >(null);
+
+  constructor() {
+    // Mount / re-mount whenever the renderer or column changes.
+    effect(() => {
+      const renderer = this.kjFilter();
+      const column   = this.kjColumn();
+      this.destroyMount();
+      this.viewContainer.clear();
+
+      const params: KjFilterParams<TData, TValue> = {
+        column,
+        api: this.tableDir.gridApi,
+        columnApi: this.tableDir.columnApi,
+        model: this.modelSignal,
+        setModel: (value) => {
+          column.setFilterValue(
+            value === '' || value === null || value === undefined ? undefined : value,
+          );
+        },
+        isActive: () => column.getIsFiltered(),
+        clear: () => column.setFilterValue(undefined),
+      };
+
+      if (renderer instanceof TemplateRef) {
+        const view = this.viewContainer.createEmbeddedView(renderer, params);
+        this.mounted.set({ kind: 'template', ref: view });
+      } else {
+        const childInjector = Injector.create({
+          providers: [provideKjFilterParams(params)],
+          parent: this.parentInjector,
+        });
+        const ref = this.viewContainer.createComponent(renderer as Type<{ params?: KjFilterParams<TData, TValue> }>, {
+          environmentInjector: this.envInjector,
+          injector: childInjector,
+        });
+        // Set the input only when the component declares it — Angular
+        // throws if the input doesn't exist, so we guard with try/catch.
+        try { ref.setInput('params', params); } catch { /* component opted out of the input */ }
+        this.mounted.set({ kind: 'component', ref });
+      }
+    });
+  }
+
+  private destroyMount(): void {
+    const m = this.mounted();
+    if (!m) return;
+    if (m.kind === 'component') m.ref.destroy();
+    else m.ref.destroy();
+    this.mounted.set(null);
+  }
+}

package/src/table/table-header.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 { KjTableHeader } from './table-header';
+import { kjColumn } from './column-helpers';
+
+interface Row {
+  name: string;
+}
+
+@Component({
+  standalone: true,
+  imports: [KjTable, KjTableHeader],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <table [kjTable]="cols" [kjTableData]="data()" #t="kjTable">
+      <thead>
+        @for (g of t.table().getHeaderGroups(); track g.id) {
+          <tr>
+            @for (h of g.headers; track h.id) {
+              <th kjTableHeader [kjHeader]="h" scope="col">{{ h.column.columnDef.header }}</th>
+            }
+          </tr>
+        }
+      </thead>
+    </table>
+  `,
+})
+class Host {
+  protected readonly cols = [kjColumn<Row>({ accessorKey: 'name', header: 'Name' })];
+  protected readonly data = signal<Row[]>([{ name: 'a' }, { name: 'b' }]);
+}
+
+describe('KjTableHeader', () => {
+  it('sets aria-sort to none initially', async () => {
+    const { container } = await render(Host);
+    const th = container.querySelector('th') as HTMLElement;
+    expect(th.getAttribute('aria-sort')).toBe('none');
+  });
+
+  it('toggles aria-sort on click', async () => {
+    const { container, fixture } = await render(Host);
+    const th = container.querySelector('th') as HTMLElement;
+    th.click();
+    await fixture.whenStable();
+    fixture.detectChanges();
+    expect(th.getAttribute('aria-sort')).toBe('ascending');
+    th.click();
+    await fixture.whenStable();
+    fixture.detectChanges();
+    expect(th.getAttribute('aria-sort')).toBe('descending');
+  });
+});

package/src/table/table-header.ts

@@ -0,0 +1,63 @@
+import { Directive, computed, inject, input } from '@angular/core';
+import type { RowData, Table } from '@tanstack/angular-table';
+import { KJ_TABLE } from './table';
+
+/** Sort direction for table columns. */
+export type KjSortDirection = 'asc' | 'desc';
+
+/**
+ * Marks a `<th>` as a sortable column header. Sets `aria-sort` based on TanStack sort state.
+ * Clicking toggles sort direction only when the column has sorting enabled.
+ * If `enableSorting: false` is set on the column def, the header renders as plain text.
+ *
+ * @example
+ * ```html
+ * <th kjTableHeader [kjHeader]="header" scope="col">Name</th>
+ * ```
+ */
+@Directive({
+  selector: '[kjTableHeader]',
+  standalone: true,
+  host: {
+    '[style.cursor]':   'canSort() ? "pointer" : null',
+    '[attr.tabindex]':  'canSort() ? "0" : null',
+    '[attr.aria-sort]': 'canSort() ? ariaSort() : null',
+    '[attr.data-sort]': 'canSort() ? sortDir() : null',
+    '(click)':          'onHeaderClick()',
+    '(keydown.enter)':  'onHeaderClick()',
+    '(keydown.space)':  '$event.preventDefault(); onHeaderClick()',
+  },
+})
+export class KjTableHeader<TData extends RowData = unknown> {
+  /** The TanStack header object for this column. Pass from the table's getHeaderGroups(). */
+  kjHeader = input<ReturnType<Table<TData>['getHeaderGroups']>[0]['headers'][0] | undefined>(undefined);
+
+  private readonly _table = inject(KJ_TABLE, { optional: true });
+
+  /** Whether this column supports sorting, derived from TanStack column state. */
+  readonly canSort = computed(() => this.kjHeader()?.column.getCanSort() ?? false);
+
+  /** Current sort direction, or null when unsorted. */
+  readonly sortDir = computed((): KjSortDirection | null => {
+    // Track parent table sorting signal so this computed re-runs on sort changes.
+    this._table?.state.sorting();
+    const h = this.kjHeader();
+    if (!h) return null;
+    const sorted = h.column.getIsSorted();
+    if (sorted === 'asc') return 'asc';
+    if (sorted === 'desc') return 'desc';
+    return null;
+  });
+
+  /** ARIA sort attribute value derived from sort direction. */
+  readonly ariaSort = computed(() => {
+    const d = this.sortDir();
+    if (d === 'asc')  return 'ascending';
+    if (d === 'desc') return 'descending';
+    return 'none';
+  });
+
+  onHeaderClick(): void {
+    if (this.canSort()) this.kjHeader()?.column.toggleSorting();
+  }
+}