skills.rest
TanStack
TanStackOFFICIAL
Explore all skills by this author →
Website𝕏@tan_stackGitHub

create-table-hook

Create reusable Angular table hooks with shared features, typed DI contexts, and FlexRender handling.

28.4k|3.6k|Updated Oct 20, 2016
Search Tags:#Angular#Dependency Injection#tanstack table#datagrid#column helper#FlexRender#table hook
One-click install
npx skills add https://github.com/TanStack/table --skill create-table-hook
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-table-hook
Source: https://github.com/TanStack/table/tree/main/packages/angular-table/skills/create-table-hook
Command: npx skills add https://github.com/TanStack/table --skill create-table-hook

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/angular-table, @tanstack/table-core.

What problem does it solve?

Angular applications with many tables often repeat the same TanStack Table configuration, features, and column conventions. This Skill guides the creation of a shared createTableHook abstraction so teams define defaults, registered components, and typed dependency-injection contexts once instead of duplicating setup across every table.

Core Features & Use Cases

  • Shared table hook creation: Build injectAppTable and createAppColumnHelper with common features like row sorting via tableFeatures.
  • Typed DI contexts: Consume injectTableContext, injectTableCellContext, and injectTableHeaderContext inside registered components instead of prop drilling.
  • Correct FlexRender usage: Distinguish Angular component types from plain render functions and know when flexRenderComponent is actually required.
  • Use Case: A dashboard with dozens of tables sharing sorting, styling, and cell components can register them once in an app-level hook, then each feature class simply calls injectAppTable with its own columns and data.

Quick Start

Ask the AI to create an Angular app-level table hook using createTableHook with shared features and typed cell context injectors for your TanStack Angular tables.

Frequently Asked Questions about create-table-hook

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a reusable table hook in Angular with TanStack Table?▼

Use createTableHook from @tanstack/angular-table to generate injectAppTable and createAppColumnHelper with shared features and defaults. Each component then calls injectAppTable with its own columns and data inside an injection context.

How do I access table cell context in an Angular component?▼

Call injectTableCellContext inside a registered component to get a typed cell signal, then derive values with computed. This replaces passing cell context through component inputs or prop drilling.

When should I use flexRenderComponent versus a render function?▼

Use flexRenderComponent only when you need explicit inputs, outputs, injector, bindings, or directives on an Angular component. Plain render functions are already valid render content and should not be wrapped as components.

Why does injectAppTable fail outside a component or factory?▼

injectAppTable and the returned context injectors require an Angular injection context. Calling them inside a plain function throws an error, so invoke them in class field initializers, constructors, or factory functions.

When should I avoid createTableHook and use injectTable directly?▼

For one-off tables without shared defaults, types, or registered components, call injectTable directly with features, columns, and data. The app-level hook only pays off when conventions repeat across multiple tables.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

angular/table-state

Wire TanStack Table v9 state slices into Angular signals via injectTable.

Official
Intermediate
TanStackTanStack
28.3k

angular/getting-started

Build a signal-backed TanStack Table v9 in Angular with FlexRender directives.

Official
Advanced
TanStackTanStack
28.3k

preact/getting-started

Set up a TanStack table in Preact v9 with sorting and pagination.

Official
Intermediate
TanStackTanStack
28.3k

setup

Configure TanStack Table v9 feature plugins and row-model factories.

Official
Intermediate