# Tanstack Angular Table Devtools

> Register Angular Table v9 instances with injectTanStackTableDevtools inside injection context. Load for reactive table registration, required options.key, enabled or undefined tables, cleanup, Angular isDevMode gating, or explicit production exports.

- Skill: `lukasa1993/tanstack-angular-table-devtools` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add lukasa1993/tanstack-angular-table-devtools`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lukasa1993/tanstack-angular-table-devtools/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT
- Author: lukasa1993 (https://skillmd.com/u/lukasa1993)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lukasa1993/tanstack-angular-table-devtools

---


This skill builds on @tanstack/table-core#core and @tanstack/table-devtools#devtools.

## Setup

```ts
import { Component } from '@angular/core'
import { injectTable, tableFeatures } from '@tanstack/angular-table'
import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'

const features = tableFeatures({})
const columns = [{ accessorKey: 'id' }]
const data: Array<{ id: string }> = []

@Component({ selector: 'users-table', template: 'Users table registered' })
export class UsersTable {
  readonly table = injectTable(() => ({
    key: 'users-table',
    features,
    columns,
    data,
  }))

  constructor() {
    injectTanStackTableDevtools(() => ({ table: this.table }))
  }
}
```

Provide the Angular TanStack Devtools host once at application configuration level as documented in `docs/devtools.md`.

## Hooks and Components

The injector options function may return `table: undefined` or an `enabled` function to remove/disable registration reactively.

## Common Mistakes

### CRITICAL Injector called outside context

Wrong: call `injectTanStackTableDevtools` from an arbitrary callback after bootstrap.

Correct: call it in a component/service field initializer or constructor injection context.

The adapter uses Angular injection and effects for lifecycle cleanup.

Source: TanStack/table:packages/angular-table-devtools/src/injectTanStackTableDevtools.ts

### HIGH Missing table key

Wrong: register an otherwise valid table without `options.key`.

Correct: assign a stable unique key before injection registration.

Core registration logs an error and skips keyless targets.

Source: TanStack/table:packages/table-devtools/src/tableTarget.ts

### MEDIUM isDevMode no-op misunderstood

Wrong: expect default Angular exports to render production Devtools.

Correct: keep standard setup development-only; use `/production` only when explicitly requested.

The package index switches exports using Angular `isDevMode()`.

Source: TanStack/table:packages/angular-table-devtools/src/index.ts

## API Discovery

Inspect `node_modules/@tanstack/angular-table-devtools/dist/index.d.ts` and `injectTanStackTableDevtools.d.ts` for current injection options.