export const features = tableFeatures({ columnSizingFeature, columnResizingFeature, }) export const options = { columnResizeMode: 'onChange' as const, columnResizeDirection: 'ltr' as const, }


## Core Patterns

```ts
const handler = header.getResizeHandler()
handle.addEventListener('mousedown', handler)
handle.addEventListener('touchstart', handler)

For large grids, compute all visible sizes once per update and expose them as CSS variables.

Common Mistakes

[CRITICAL] Omitting sizing prerequisite

Wrong: tableFeatures({ columnResizingFeature })

Correct: tableFeatures({ columnSizingFeature, columnResizingFeature })

Resizing modifies the sizing state and requires columnSizingFeature.

Source: packages/table-core/src/types/TableFeatures.ts#FeatureSlotPrereqs

[HIGH] Rendering an inert handle

Wrong: handle.addEventListener('pointerdown', header.getResizeHandler())

Correct:

const handler = header.getResizeHandler()
handle.addEventListener('mousedown', handler)
handle.addEventListener('touchstart', handler)

The shipped handler distinguishes touchstart from the mouse path. A single pointerdown listener does not provide working touch resizing; wire both mouse and touch start events.

Source: docs/framework/react/guide/column-resizing.md#connect-column-resizing-apis-to-ui

[MEDIUM] Reading sizes in every cell

Wrong: cells.forEach(cell => cell.style.width = ${cell.column.getSize()}px)

Correct: root.style.setProperty(--col-${header.id}, ${header.getSize()}px)

Caching sizes or CSS variables avoids repeated work during onChange resizing.

Source: examples/react/column-resizing-performant/src/main.tsx

API Discovery

Inspect node_modules/@tanstack/table-core/dist/features/column-resizing/ and the sizing feature directory for the state it updates.

tanstack-table-core-column-resizing

Setup