skills.rest
jason660519
jason660519COMMUNITY
Explore all skills by this author →
GitHub

Create TanStack Table

Create and extend TanStack Table v8 data tables in Project-Manager.

Updated May 11, 2026
Search Tags:#typescript#react#ui-patterns#tanstack-table#project-manager#datatable#table-core
One-click install
npx skills add https://github.com/jason660519/Project-Manager --skill create-tanstack-table
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Create TanStack Table
Source: https://github.com/jason660519/Project-Manager/tree/main/.agents/skills/create-tanstack-table
Command: npx skills add https://github.com/jason660519/Project-Manager --skill create-tanstack-table

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build or extend data tables in Project-Manager using raw TanStack Table v8. Triggered when creating a new table, adding columns, or modifying TableCore. Covers column patterns, numeric sort rules, complex cell extraction, layout pitfalls, and the project colour system.

Core Features & Use Cases

  • Create new tables in components/table/ or extend existing ones across app/ui/views and the project-dashboard.
  • Enforce column conventions, numeric handling, and robust cell rendering for stable sorting and layout.
  • Debug table rendering and refactor inline cells into dedicated components with guidance on performance considerations.

Quick Start

Create or modify a TanStack Table by updating components/table/TableCore.tsx and align with the conventions described here.

Frequently Asked Questions about Create TanStack Table

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

FAQPage Schema
How do I create a new TanStack Table v8 data table in a React project?▼

To create a TanStack Table v8 data table, you update the TableCore component and align with established column conventions, ensuring robust cell rendering and numeric handling for stable sorting.

What's the best way to add or refactor columns in an existing TanStack Table?▼

Refactoring TanStack Table columns involves modifying TableCore to enforce naming conventions and extracting complex inline cells into dedicated components for better layout and performance.

Why does my TanStack Table numeric sorting not work correctly?▼

Numeric sorting in TanStack Table fails when cells lack proper numeric handling; the Skill codifies numeric cell rules to ensure stable and accurate sorting across table views.

Can I use TanStack Table v8 for dashboard views and complex cell extraction?▼

Yes, TanStack Table v8 supports dashboard views by guiding complex cell extraction and addressing layout pitfalls to maintain performance-conscious rendering across project progress components.

What are common layout pitfalls when extending TanStack Table components?▼

Common TanStack Table layout pitfalls involve improper cell extraction and ignoring layout considerations; addressing these ensures stable rendering and prevents visual breakage across table views.

Related Skills

Explore More Product & Management Skills→
nklischnklisch
7

tanstack-table-v8

Configure useReactTable with column definitions and render rows via flexRender.

Community
Advanced
jason660519jason660519

Table and Sheet Layout

Configure data tables and workstation layouts in Project-Manager using WorkstationFrame and BottomSheetTabs contracts.

Community
Advanced
CleanExpoCleanExpo
1

scientific-luxury

Enforce Scientific Luxury design standards in React interfaces with OLED black, spectral colours, and single-pixel borders.

Community
Advanced
TanStackTanStack
28.3k

react/compose-with-tanstack-form

Compose TanStack Table v9 editable cell grids with TanStack Form fields.

Official
Advanced