Documentation
Framework
Version
Enterprise

Column Ordering APIs

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

Column API

getIndex

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

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

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.

Our Partners
Code Rabbit
Cloudflare
AG Grid
Subscribe to Bytes

Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.

Bytes

No spam. Unsubscribe at any time.

Subscribe to Bytes

Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.

Bytes

No spam. Unsubscribe at any time.