📄 tanstack/table/latest/docs/api/features/column-ordering

File: column-ordering.md | Updated: 11/15/2025

Source: https://tanstack.com/table/latest/docs/api/features/column-ordering



TanStack

Table v8v8

Search...

+ K

Auto

Log In

TanStack StartRC

Docs Examples GitHub Contributors

TanStack Router

Docs Examples GitHub Contributors

TanStack Query

Docs Examples GitHub Contributors

TanStack Table

Docs Examples Github Contributors

TanStack Formnew

Docs Examples Github Contributors

TanStack DBbeta

Docs Github Contributors

TanStack Virtual

Docs Examples Github Contributors

TanStack Paceralpha

Docs Examples Github Contributors

TanStack Storealpha

Docs Examples Github Contributors

TanStack Devtoolsalpha

Docs Github Contributors

More Libraries

Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide

Documentation

Framework

React logo

React

Version

Latest

Search...

+ K

Menu

Getting Started

Core Guides

Feature Guides

Core APIs

Feature APIs

Enterprise

Examples

Framework

React logo

React

Version

Latest

Menu

Getting Started

Core Guides

Feature Guides

Core APIs

Feature APIs

Enterprise

Examples

On this page

Column Ordering APIs

Copy Markdown

State
-----

Column ordering state is stored on the table using the following shape:

tsx

export type ColumnOrderTableState = {
  columnOrder: ColumnOrderState
}

export type ColumnOrderState = string[]


export type ColumnOrderTableState = {
  columnOrder: ColumnOrderState
}

export type ColumnOrderState = string[]

Table Options
-------------
### onColumnOrderChange

tsx

onColumnOrderChange?: OnChangeFn<ColumnOrderState>


onColumnOrderChange?: OnChangeFn<ColumnOrderState>

If provided, this function will be called with an updaterFn when state.columnOrder changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.

Table API
---------
### setColumnOrder

tsx

setColumnOrder: (updater: Updater<ColumnOrderState>) => void


setColumnOrder: (updater: Updater<ColumnOrderState>) => void

Sets or updates the state.columnOrder state.

### resetColumnOrder

tsx

resetColumnOrder: (defaultState?: boolean) => void


resetColumnOrder: (defaultState?: boolean) => void

Resets the columnOrder state to initialState.columnOrder, or true can be passed to force a default blank state reset to [].

Column API
----------
### getIndex

tsx

getIndex: (position?: ColumnPinningPosition) => number


getIndex: (position?: ColumnPinningPosition) => number

Returns the index of the column in the order of the visible columns. Optionally pass a position parameter to get the index of the column in a sub-section of the table.

### getIsFirstColumn

tsx

getIsFirstColumn: (position?: ColumnPinningPosition) => boolean


getIsFirstColumn: (position?: ColumnPinningPosition) => boolean

Returns true if the column is the first column in the order of the visible columns. Optionally pass a position parameter to check if the column is the first in a sub-section of the table.

### getIsLastColumn

tsx

getIsLastColumn: (position?: ColumnPinningPosition) => boolean


getIsLastColumn: (position?: ColumnPinningPosition) => boolean

Returns true if the column is the last column in the order of the visible columns. Optionally pass a position parameter to check if the column is the last in a sub-section of the table.

Edit on GitHub

Column Faceting

Column Pinning

Partners Become a Partner

Code RabbitCode Rabbit CloudflareCloudflare AG GridAG Grid NetlifyNetlify NeonNeon WorkOSWorkOS ClerkClerk ConvexConvex ElectricElectric SentrySentry PrismaPrisma StrapiStrapi UnkeyUnkey

scarf analytics