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

column-sizing

Applies numeric column sizing state to table, grid, and flex CSS layouts.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/table-core.

What problem does it solve?

Developers using TanStack Table often misapply column sizing by expecting numeric state to style the DOM automatically, or by passing CSS values like percentages into numeric APIs, causing layout mismatches with totals and pinned offsets.

Core Features & Use Cases

  • Numeric Sizing APIs: Use size, minSize, maxSize, getSize, getStart, getAfter, and getTotalSize to manage column dimensions as numeric state.
  • Renderer Translation Guidance: Apply model sizes consistently to headers, cells, and pinned offsets in table, grid, or flex CSS layouts.
  • Common Mistake Prevention: Avoid passing CSS strings like '25%' into numeric APIs and prevent content from overriding offsets with min-width rules.
  • Use Case: When building a resizable data grid with pinned columns, use getSize() for cell widths and getTotalSize() for the table element so pinning offsets stay aligned with rendered geometry.

Quick Start

Ask the AI to set up TanStack Table column sizing with columnSizingFeature and apply getSize and getTotalSize to your table cells and container.

Frequently Asked Questions about column-sizing

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

FAQPage Schema
How do I set column widths in TanStack Table?▼

Set numeric size values in column definitions or defaultColumn, then apply them in your renderer with cell.style.width using column.getSize(). The table core stores sizing as numeric state and does not apply CSS automatically.

How to calculate total table width with TanStack Table?▼

Use table.getTotalSize() to get the sum of all visible column sizes, then set it on your table container element. This keeps the container width consistent with individual column sizes.

Can I use percentage or auto sizes for TanStack Table columns?▼

No, column sizing state is numeric only. Percentages and auto layout belong in your renderer's CSS, while size, minSize, and maxSize must be numbers passed to the table APIs.

Why do my pinned column offsets not match the rendered layout?▼

Offsets break when rendered cell widths differ from the sizing model, for example when min-width: max-content lets content override the width. Apply column.getSize() as the cell width and use overflow hidden to keep geometry aligned.

Does column sizing work with CSS grid or flexbox layouts?▼

Yes, the numeric sizing model works with table, grid, or flex CSS as long as you translate getSize() values into the appropriate layout properties consistently across headers, cells, and pinned regions.

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
TanStackTanStack
28.3k

column-layout

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

Official
Advanced
cromesdkcromesdk

nestjs-cqrs-setup

Automate CQRS installation and configuration in NestJS applications.

Official
Advanced
ynotradioynotradio

detecting-agent-environment

Detect CI/CD status, network accessibility, and Docker availability.

Official
Intermediate