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

column-resizing

Implements column resizing gestures and performant width updates for TanStack Table grids.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/table-core.

What problem does it solve?

Column resizing in TanStack Table often fails silently: resize state changes but column widths do not update, touch handles stay inert, or large grids lag during drag. This Skill wires the columnResizingFeature correctly so resize gestures actually change rendered widths.

Core Features & Use Cases

  • Feature wiring: Registers columnSizingFeature and columnResizingFeature together with tableFeatures, plus columnResizeMode and columnResizeDirection options.
  • Gesture handling: Connects header.getResizeHandler to both mousedown and touchstart events so mouse and touch resizing both work.
  • Performance patterns: Exposes column sizes as CSS variables computed once per update instead of reading sizes in every cell, keeping large grids responsive during onChange resizing.
  • Use Case: You have a data grid with hundreds of columns where dragging a resize handle stutters; apply the CSS-variable pattern to compute visible sizes once per update.

Quick Start

Ask the AI to wire up column resizing in my TanStack Table grid with touch support and performant CSS-variable width updates.

Frequently Asked Questions about column-resizing

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

FAQPage Schema
How do I enable column resizing in TanStack Table?▼

Register both columnSizingFeature and columnResizingFeature via tableFeatures, then set columnResizeMode and columnResizeDirection in the table options. Attach header.getResizeHandler() to your resize handle element to activate gestures.

Why does column resize state change but column widths do not update?▼

Resizing only updates sizing state; the renderer must apply widths. Read header.getSize() or expose sizes as CSS variables on the root element and reference them in your cell styles so state changes propagate to the layout.

Does TanStack Table column resizing support touch events?▼

Yes, but you must wire both mousedown and touchstart listeners to header.getResizeHandler(). A single pointerdown listener does not activate the touch path, leaving touch resizing inert.

Why is column resizing slow on large tables?▼

Reading cell.column.getSize() in every cell during onChange resizing causes repeated work per frame. Compute all visible sizes once per update and expose them as CSS variables, as shown in the column-resizing-performant example.

Do I need columnSizingFeature for column resizing to work?▼

Yes. columnResizingFeature modifies the sizing state and declares columnSizingFeature as a prerequisite. Registering columnResizingFeature alone in tableFeatures will not produce working resize behavior.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

react/compose-with-tanstack-pacer

Debounces TanStack Table v9 column filter commits and throttles resize updates with @tanstack/react-pacer.

Official
Intermediate
cristoslccristoslc

swain-session

Restore terminal tab names, preferences, and context bookmarks across AI agent sessions.

Community
Intermediate
TanStackTanStack
28.3k

column-layout

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

Official
Advanced
rust-worksrust-works
51

markdown-tables

Format Markdown tables with fixed-width columns and aligned headers.

Official
Intermediate