typescript
Preserve TanStack Table v9 inference with createColumnHelper, columns(), tableOptions, tableFeatures, and metaHelper. Load for ColumnDef errors, reusable tables, typed meta, named registries, or unnecessary manual feature generics.
- Installs
- 47
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/tanstack/table --skill typescript- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads typescript automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
This skill builds on core and table-features. Let the feature object and helpers carry types through userland.
Setup
import {
createColumnHelper,
metaHelper,
tableFeatures,
} from '@tanstack/table-core'
type Person = { id: string; age: number }
type ColumnMeta = { align?: 'start' | 'end' }
const features = tableFeatures({ columnMeta: metaHelper<ColumnMeta>() })
const helper = createColumnHelper<typeof features, Person>()
export const columns = helper.columns([
helper.accessor('age', { meta: { align: 'end' } }),
])
Core Patterns
Preserve heterogeneous accessor values
const columns = helper.columns([
helper.accessor('id', { header: 'ID' }),
helper.accessor('age', { header: 'Age' }),
])
columns() preserves each accessor's TValue instead of widening the array.
Compose options through the helper
const defaults = tableOptions<typeof features, Person>({
defaultColumn: { meta: { align: 'start' } },
})
Use tableOptions for reusable fragments; direct adapter options are enough for one-offs.
Common Mistakes
[HIGH] Erasing accessor value inference
Wrong:
const columns: ColumnDef<typeof features, Person, unknown>[] = [
helper.accessor('age', {}),
]
Correct:
const columns = helper.columns([helper.accessor('age', {})])
The broad annotation discards the accessor-specific number value type.
Source: docs/guide/helpers.md#createcolumnhelper
[MEDIUM] Threading internal feature generics manually
Wrong:
type Features = TableFeatures
Correct:
type Features = typeof features
The concrete registry is the source of feature-gated APIs and registry keys.
Source: packages/table-core/src/types/TableFeatures.ts
[MEDIUM] Globally merging per-table meta
Wrong:
declare module '@tanstack/table-core' {
interface ColumnMeta<TData, TValue> {
align?: string
}
}
Correct:
const features = tableFeatures({
columnMeta: metaHelper<{ align?: 'start' | 'end' }>(),
})
V9 type-only feature slots keep meta types scoped to the table factory.
Source: docs/guide/table-and-column-meta.md
API Discovery
Inspect node_modules/@tanstack/table-core/dist/helpers/ and the signatures re-exported by dist/index.d.ts; avoid copying deep internal generic signatures into application code.
FAQ
What does the typescript skill do?
Preserve TanStack Table v9 inference with createColumnHelper, columns(), tableOptions, tableFeatures, and metaHelper. Load for ColumnDef errors, reusable tables, typed meta, named registries, or unnecessary manual feature generics.
How do I install typescript?
Run npx skills add https://github.com/tanstack/table --skill typescript in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/typescript/ (personal) or .claude/skills/typescript/ (project).
Which AI agents can use typescript?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is typescript safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains typescript?
It is published by tanstack in tanstack/table. It has 47 recorded installs.
More from tanstack/table
getting-started
tanstack/table
Create and render Table v9 with the react adapter. Route reusable createTableHook components, Query and Virtual integration, and framework setup; use table-state for reactive ownership.
Popular code quality & workflow skills
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
improve-codebase-architecture
mattpocock/skills
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
handoff
mattpocock/skills
Compact the current conversation into a handoff document for another agent to pick up.
domain-modeling
mattpocock/skills
Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.
codebase-design
mattpocock/skills
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
diagnosing-bugs
mattpocock/skills
Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.