Pin table columns into start and end regions with sticky CSS offsets.
npx skills add https://github.com/TanStack/table --skill column-pinning
Please help me install this Agent Skill. Skill: column-pinning Source: https://github.com/TanStack/table/tree/main/packages/table-core/skills/column-pinning Command: npx skills add https://github.com/TanStack/table --skill column-pinning
Keeping key columns visible while scrolling wide TanStack Table datagrids requires coordinating pinning state, numeric offsets, and sticky CSS, which is easy to get wrong and produces gaps, overlaps, or broken RTL layouts.
start and end regions using columnPinningFeature, with direction-aware offsets via getStart and getAfter.position: sticky, insetInlineStart/insetInlineEnd, z-index, and background styles so pinned cells stay visible over scrolling content.column.getSize() so sticky offsets match the DOM and avoid gaps or overlaps.name column to the start and an actions column to the end of a wide React data grid so both remain visible during horizontal scrolling, including in RTL locales.Pin the name column to the start and the actions column to the end of my TanStack table with sticky positioning that works in RTL layouts.
High-intent search queries and answers about installing and using this skill.
Register columnPinningFeature with tableFeatures, set initialState.columnPinning with start and end column ID arrays, then call column.pin('start') or column.pin('end'). Apply sticky positioning styles yourself since the feature only computes regions and offsets.
The columnPinningFeature only computes pinning state and offsets; it does not apply CSS. You must set position: sticky, insetInlineStart or insetInlineEnd from getStart/getAfter, plus a background and z-index on the cell.
Yes, version 9 uses logical start and end regions instead of physical left and right. Use CSS logical properties like insetInlineStart and insetInlineEnd so offsets adapt automatically to the document direction.
Gaps and overlaps occur when rendered cell widths diverge from the model sizes used for sticky offsets. Set each cell's width to column.getSize() in pixels so the DOM matches the computed offset values.
Version 9 replaced physical left and right pinning with logical start and end regions across state and collection APIs. Calls like column.pin('left') must be updated to column.pin('start').
TanStackImplement column visibility, ordering, pinning, sizing, and resizing for TanStack Table v9.
TanStackCompose TanStack Table with @tanstack/angular-virtual to render large row sets.
harlan-zwManage state and events for Vue.js tables with sorting, filtering, and pagination.
adaptive-enforcement-labAutomate GitHub secret scanning configuration and push protection enforcement.