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

custom-features

Author TanStack Table v9 feature plugins across all FeatureMap and API installation surfaces.

28.4k|3.6k|Updated Oct 20, 2016
Search Tags:#lifecycle hooks#typeScript#tanstack table#table-core#table apis#feature plugin#declaration merging
One-click install
npx skills add https://github.com/TanStack/table --skill custom-features
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: custom-features
Source: https://github.com/TanStack/table/tree/main/packages/table-core/skills/custom-features
Command: npx skills add https://github.com/TanStack/table --skill custom-features

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/table-core.

What problem does it solve?

Building reusable behavior for TanStack Table v9 requires correctly wiring state, options, column definitions, and table/column/row/cell/header APIs through declaration merging and lifecycle hooks, which is error-prone without guidance.

Core Features & Use Cases

  • Full FeatureMap Coverage: Guides declaration merging for every FeatureMap including state, options, table, column, row, cell, header, and advanced row-model registries.
  • Lifecycle Hook Guidance: Explains when to use initTableInstanceData, resetTableInstanceData, constructTableAPIs, and prototype assignment hooks.
  • Complete Working Example: Provides a density feature plugin demonstrating state defaults, option updaters, table APIs, and per-instance data initialization.
  • Use Case: You need a reusable row-density or interaction-tracking behavior shared across tables. Use this Skill to scaffold a typed TableFeature plugin with correct runtime installation matching every declared type.

Quick Start

Ask the AI to create a TanStack Table v9 custom feature plugin that adds density state and getDensity APIs to the table, columns, rows, cells, and headers.

Frequently Asked Questions about custom-features

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

FAQPage Schema
How do I create a custom feature plugin for TanStack Table v9?▼

Declaration-merge the Plugins interface and relevant FeatureMaps in @tanstack/table-core, then export a TableFeature object with lifecycle hooks like getInitialState, getDefaultTableOptions, and constructTableAPIs. Register it via tableFeatures({ yourFeature }) and pass it to the table.

When should I use a custom feature instead of tableMeta or columnMeta?▼

Prefer typed tableMeta or columnMeta for application-level callbacks and renderer-only behavior. Create a feature only for reusable state or behavior that must augment Table objects with new APIs, state slices, or instance data.

What is the difference between initTableInstanceData and resetTableInstanceData?▼

initTableInstanceData runs once after options, atoms, and the store exist to allocate mutable table-owned data. resetTableInstanceData clears transient contents of that data during table.reset() without rerunning initialization or touching externally controlled state.

Why are my custom feature methods not appearing on the table instance?▼

Declaration merging only adds types; you must install runtime behavior with assignTableAPIs in constructTableAPIs or assignPrototypeAPIs in the matching prototype hook. Method keys need prefixes like table_ or column_ which are removed on installation.

Can I add methods directly to columns, rows, cells, or headers?▼

There are no assignColumnAPIs or similar per-instance functions. Use assignPrototypeAPIs inside assignColumnPrototype, assignRowPrototype, assignCellPrototype, or assignHeaderPrototype so methods are shared on the prototype, and use initColumnInstanceData or initRowInstanceData for per-instance fields.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

migrate-v8-to-v9

Migrate TanStack Table v8 code to the v9 core shape.

Official
Advanced
PTKDrakePTKDrake
1

tanstack-table

Builds headless tables and datagrids for React, Vue, and Angular.

Community
Intermediate
MrJmpl3MrJmpl3

0090-laravel-testing

Write Pest tests for Laravel actions using Arrange-Act-Assert and declarative factories.

Community
Advanced
dallaydallay
1

pinia

Manage Vue application state with the Pinia library.

Official
Advanced