Column Ordering

State

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

export type ColumnOrderTableState = {
  columnOrder: ColumnOrderState
}
 
export type ColumnOrderState = string[]

export type ColumnOrderTableState = {
  columnOrder: ColumnOrderState
}
 
export type ColumnOrderState = string[]

Table Options

onColumnOrderChange

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

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

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

Sets or updates the state.columnOrder state.

resetColumnOrder

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 [].

Credits

• Column Ordering - TanStack Table v8 Docs