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

angular/angular-rendering-directives

Render TanStack Table v9 cells, headers, and footers with Angular structural directives.

28.3k|3.6k|Updated Oct 20, 2016
Search Tags:#angular#dependency injection#data grid#tanstack table#component rendering#structural directives#flexrender
One-click install
npx skills add https://github.com/TanStack/table --skill angular-angular-rendering-directives
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular/angular-rendering-directives
Source: https://github.com/TanStack/table/tree/main/packages/angular-table/skills/angular/angular-rendering-directives
Command: npx skills add https://github.com/TanStack/table --skill angular-angular-rendering-directives

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the confusion of how to render TanStack Table v9 column content in Angular without falling back to incorrect React/Vue-style flexRender function calls, ensuring correct context wiring and dependency injection.

Core Features & Use Cases

  • Structural-directive rendering: Use *flexRender, *flexRenderCell, *flexRenderHeader, and *flexRenderFooter to render primitives, TemplateRef, component types, and flexRenderComponent wrappers.
  • DI context tokens without prop drilling: Automatically provide TanStackTableToken, TanStackTableHeaderToken, and TanStackTableCellToken, plus injectTableContext(), injectTableHeaderContext(), and injectTableCellContext() helpers.
  • Correct Angular patterns for grouped headers/footers: Use placeholder-safe rendering (e.g., @if (!header.isPlaceholder)) so grouped header rows render correctly.

Use it when building Angular datagrids where you want full control over markup while still getting TanStack Table’s rendering context, selection state, sorting state, and reusable cell/header components.

Quick Start

Use the shorthand directive *flexRenderCell="cell; let value" inside your <td> to render columnDef.cell values from a TanStack Angular table.

Frequently Asked Questions about angular/angular-rendering-directives

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

FAQPage Schema
How do I render TanStack Table v9 cells in Angular without React flexRender?▼

Use Angular structural directives like *flexRenderCell to render TanStack Table v9 cells, headers, and footers instead of React/Vue flexRender function calls to ensure correct context wiring and dependency injection.

How do I access TanStack Table cell context and inject tokens in Angular components?▼

Access table context using injectTableContext(), injectTableHeaderContext(), and injectTableCellContext() helpers, which automatically provide TanStackTableToken and related tokens without prop drilling.

Can I render different column definition types like primitives and TemplateRefs in Angular datagrids?▼

Yes, the flexRender family of directives supports rendering primitives, TemplateRef instances, component classes, and flexRenderComponent wrappers within Angular datagrid markup.

What's the best way to handle grouped header rows in Angular with TanStack Table?▼

Use placeholder-safe rendering with @if (!header.isPlaceholder) in your Angular templates so grouped header rows render correctly without displaying placeholder values.

Why does my TanStack Table dependency injection fail in Angular cell components?▼

Dependency injection fails when using React-style flexRender calls instead of Angular structural directives, which are required to properly wire DI context tokens and inject context helpers.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

lit/getting-started

Builds a typed TanStack Table in LitElement using TanStack Lit Table v9's TableController and FlexRender.

Official
Intermediate
TanStackTanStack
28.3k

lit/lit-table-controller

Integrate TanStack Table with LitElement via a ReactiveController.

Official
Intermediate
neogenzneogenz
4

angular-directives

Implement reusable Angular directives for DOM manipulation and behavior extension.

Community
Advanced
TanStackTanStack
28.3k

angular/getting-started

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

Official
Advanced