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

column-ordering

Controls TanStack Table v9 leaf column order with stable IDs across pinning and visibility regions.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/table-core.

What problem does it solve?

Drag-and-drop column reordering in TanStack Table v9 often breaks when developers treat the columnOrder state as the final rendered order, use unstable header labels as drag identities, or mutate the state array in place, causing desynchronized or non-reactive tables.

Core Features & Use Cases

  • Stable ID-based ordering: Uses leaf column IDs as drag identities and replaces the columnOrder array immutably via table.setColumnOrder.
  • Region-aware rendering: Explains how pinning regions, column visibility, and groupedColumnMode apply after base ordering, directing rendering through table.getAllLeafColumns() or table.getVisibleLeafColumns().
  • Use Case: When building a React data grid with drag-and-drop column reordering plus pinned columns, this Skill ensures the rendered order matches user expectations by combining columnOrderingFeature with pinning and visibility plugins correctly.

Quick Start

Register columnOrderingFeature in tableFeatures, initialize columnOrder state with leaf column IDs, and reorder by splicing a copied array before calling table.setColumnOrder.

Frequently Asked Questions about column-ordering

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

FAQPage Schema
How do I implement drag-and-drop column reordering in TanStack Table?▼

Register columnOrderingFeature in tableFeatures and store leaf column IDs in columnOrder state. On drag end, build a new array by removing the active ID and splicing it at the target index, then call table.setColumnOrder with the new array.

Why does my TanStack Table column order not match the columnOrder state?▼

The columnOrder state only orders unpinned leaf columns; pinning regions and groupedColumnMode apply afterward. Render using table.getAllLeafColumns() or table.getVisibleLeafColumns() instead of mapping over the raw columnOrder array.

Can I use column headers as drag identities in TanStack Table?▼

No, headers can collide or change at runtime, breaking ordering state. Always use column.id as the drag identity because ordering state stores stable leaf column IDs.

Why does setColumnOrder not update my table after mutating the array?▼

Mutating the columnOrder array in place keeps the same reference, so reactive frameworks skip the update. Always pass a new array, for example table.setColumnOrder(columnOrder.slice(1)).

Does column ordering work with column pinning and visibility in TanStack Table?▼

Yes, but each plugin affects a different stage. columnOrder orders unpinned leaf IDs, pinning defines visual regions, and visibility filters the result, so combine the skills and render via table.getVisibleLeafColumns() when visibility is registered.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

column-definitions

Define typed TanStack Table v9 column definitions with accessor keys and functions.

Official
Advanced
KuschiKuschbertKuschiKuschbert

Settings

Manage user-specific app preferences including privacy and notifications.

Community
Intermediate
TanStackTanStack
28.3k

column-layout

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

Official
Advanced
Montte-erpMontte-erp
6

tanstack-table

Manage sorting, filtering, pagination, grouping, and row state for dynamic data grids.

Official
Advanced