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

column-layout

Implement column visibility, ordering, pinning, sizing, and resizing for TanStack Table v9.

28.3k|3.6k|Updated Oct 20, 2016
Search Tags:#tanstack#datagrid#column pinning#table layout#column visibility#column resizing#state slices
One-click install
npx skills add https://github.com/TanStack/table --skill column-layout
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: column-layout
Source: https://github.com/TanStack/table/tree/main/packages/table-core/skills/column-layout
Command: npx skills add https://github.com/TanStack/table --skill column-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the challenge of getting consistent, predictable column rendering behavior when users need to toggle visibility, reorder columns, pin them, resize them, and handle resize interactions correctly in TanStack Table v9.

Core Features & Use Cases

  • Column visibility: manage which columns are shown and ensure your rendering uses the visible APIs (so toggles actually affect the UI).
  • Column ordering: reorder only the center (unpinned) column region using columnOrder and the correct index APIs.
  • Column pinning, sizing, and resizing: pin columns left/right, commit and read pixel-based sizes, and implement resize handlers and performant resize patterns.

Quick Start

Create a table with tableFeatures({ columnVisibilityFeature, columnOrderingFeature, columnPinningFeature, columnSizingFeature, columnResizingFeature }), initialize the related state slices, and render body cells from row.getVisibleCells() to reflect visibility correctly.

Frequently Asked Questions about column-layout

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

FAQPage Schema
How do I manage column visibility in a TanStack Table v9 datagrid?▼

Column visibility in TanStack Table v9 requires enabling the columnVisibilityFeature via tableFeatures, wiring the specified state slices, and rendering body cells from row.getVisibleCells() so toggles correctly affect the UI.

How do I implement column resizing and pinning in TanStack Table v9?▼

Column pinning and resizing in TanStack Table v9 require enabling the columnPinningFeature, columnSizingFeature, and columnResizingFeature via tableFeatures, then wiring the state slices to commit pixel-based sizes and implement resize handler patterns for performant interactions.

Can I reorder columns in TanStack Table without needing a row model?▼

Yes, you can reorder columns in TanStack Table without needing any row model by using the columnOrderingFeature to reorder only the center unpinned column region, utilizing the correct index APIs and state slices.

What is the best way to control datagrid column layout state in TanStack Table?▼

The best way to control datagrid column layout state in TanStack Table is by enabling the five column layout features via tableFeatures, wiring the specified state slices, and using the correct visible, ordered, and render accessors for predictable rendering behavior.

Why are my column visibility toggles not affecting the datagrid UI in TanStack Table?▼

Column visibility toggles may not affect the datagrid UI if you are not using the correct visible APIs; ensure you render body cells from row.getVisibleCells() and wire the column visibility state slices properly.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

preact/getting-started

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

Official
Intermediate
DrLuggelsDrLuggels
3

react-native-design

Guide React Native UI development with styling, navigation, and animations.

Community
Advanced
janpeterdjanpeterd

tanstack-table

Configure headless TanStack Table logic for sorting, filtering, pagination, and grouping.

Community
Advanced
TanStackTanStack
28.3k

vue/compose-with-tanstack-pacer

Debounce and throttle TanStack Vue Table state writes with Pacer.

Official
Intermediate