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

column-visibility

Configure column hiding and render visibility-aware headers, rows, and cells in TanStack Table.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/table-core.

What problem does it solve?

Hidden columns often remain in the DOM because developers render all-cell APIs instead of visibility-aware ones, and the difference between an absent visibility entry and an explicit false value is frequently misunderstood.

Core Features & Use Cases

  • Visibility-aware rendering: Use getVisibleCells and visibility-aware header groups so hidden columns never appear in rendered table content.
  • Hide-toggle controls: Build column toggle menus from getAllLeafColumns filtered by getCanHide, keeping controls separate from rendered output.
  • Correct state semantics: Treat only explicit false in columnVisibility state as hidden, and keep enableHiding separate from actual visibility state.
  • Use Case: A React datagrid lets users hide an internal ID column via a settings dropdown while the table body and headers automatically exclude it.

Quick Start

Ask the AI to set up columnVisibilityFeature in a TanStack Table instance and render only visible cells and headers with a column hide toggle menu.

Frequently Asked Questions about column-visibility

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

FAQPage Schema
How do I hide columns in TanStack Table?▼

Register columnVisibilityFeature and set columnVisibility state with the column id mapped to false, such as { columnVisibility: { internalId: false } }. The column definition stays intact; only visibility-aware rendering APIs exclude it.

Why do hidden columns still render in my TanStack Table grid?▼

Hidden columns render when you use all-cell APIs like row.getAllCells(), which intentionally include hidden columns. Switch to row.getVisibleCells() and visibility-aware header groups so hidden columns are excluded from the DOM.

What is the difference between enableHiding and columnVisibility in TanStack Table?▼

enableHiding controls whether a column is allowed to be hidden, while columnVisibility state controls whether it actually is hidden. Setting enableHiding: false does not hide a column; set columnVisibility: { id: false } instead.

Does an absent entry in columnVisibility state mean the column is hidden?▼

No. Only an explicit false value hides a column; an absent entry means the column is visible. Check visibility with columnVisibility[column.id] === false rather than negating the lookup.

How do I build a column visibility toggle menu in TanStack Table?▼

Use table.getAllLeafColumns() filtered by column.getCanHide() to list hideable columns for the toggle controls. Use all-column APIs for controls and visible-column APIs only for the rendered table content.

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
janpeterdjanpeterd

tanstack-table

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

Community
Advanced
TanStackTanStack
28.3k

column-layout

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

Official
Advanced
omakeiomakei
2

nuxt-tables

Create Nuxt 4 data tables with a reusable column builder and DataTable component.

Community
Intermediate