File: column-ordering.md | Updated: 11/15/2025
Search...
+ K
Auto
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide
Documentation
Framework
React
Version
v8
Search...
+ K
Menu
Getting Started
Core Guides
Feature Guides
Core APIs
Feature APIs
Enterprise
Examples
Framework
React
Version
v8
Menu
Getting Started
Core Guides
Feature Guides
Core APIs
Feature APIs
Enterprise
Examples
On this page
Copy Markdown
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.
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.
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.
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.
