Column Sizing APIs

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

export type ColumnSizingTableState = { columnSizing: ColumnSizing columnSizingInfo: ColumnSizingInfoState } export type ColumnSizing = Record<string, number> export type ColumnSizingInfoState = { startOffset: null | number startSize: null | number deltaOffset: null | number deltaPercentage: null | number isResizingColumn: false | string columnSizingStart: [string, number][] } 

export type ColumnSizingTableState = { columnSizing: ColumnSizing columnSizingInfo: ColumnSizingInfoState } export type ColumnSizing = Record<string, number> export type ColumnSizingInfoState = { startOffset: null | number startSize: null | number deltaOffset: null | number deltaPercentage: null | number isResizingColumn: false | string columnSizingStart: [string, number][] } 

enableResizing?: boolean 

enableResizing?: boolean 

Enables or disables column resizing for the column.

size?: number 

size?: number 

The desired size for the column

minSize?: number 

minSize?: number 

The minimum allowed size for the column

maxSize?: number 

maxSize?: number 

The maximum allowed size for the column

getSize: () => number 

getSize: () => number 

Returns the current size of the column

getStart: (position?: ColumnPinningPosition) => number 

getStart: (position?: ColumnPinningPosition) => number 

Returns the offset measurement along the row-axis (usually the x-axis for standard tables) for the column, measuring the size of all preceding columns.

Useful for sticky or absolute positioning of columns. (e.g. left or transform)

getAfter: (position?: ColumnPinningPosition) => number 

getAfter: (position?: ColumnPinningPosition) => number 

Returns the offset measurement along the row-axis (usually the x-axis for standard tables) for the column, measuring the size of all succeeding columns.

Useful for sticky or absolute positioning of columns. (e.g. right or transform)

getCanResize: () => boolean 

getCanResize: () => boolean 

Returns true if the column can be resized.

getIsResizing: () => boolean 

getIsResizing: () => boolean 

Returns true if the column is currently being resized.

resetSize: () => void 

resetSize: () => void 

Resets the column size to its initial size.

getSize: () => number 

getSize: () => number 

Returns the size for the header, calculated by summing the size of all leaf-columns that belong to it.

getStart: (position?: ColumnPinningPosition) => number 

getStart: (position?: ColumnPinningPosition) => number 

Returns the offset measurement along the row-axis (usually the x-axis for standard tables) for the header. This is effectively a sum of the offset measurements of all preceding headers.

getResizeHandler: () => (event: unknown) => void 

getResizeHandler: () => (event: unknown) => void 

Returns an event handler function that can be used to resize the header. It can be used as an:

• onMouseDown handler
• onTouchStart handler

The dragging and release events are automatically handled for you.

enableColumnResizing?: boolean 

enableColumnResizing?: boolean 

Enables/disables column resizing for *all columns**.

columnResizeMode?: 'onChange' | 'onEnd' 

columnResizeMode?: 'onChange' | 'onEnd' 

Determines when the columnSizing state is updated. onChange updates the state when the user is dragging the resize handle. onEnd updates the state when the user releases the resize handle.

columnResizeDirection?: 'ltr' | 'rtl' 

columnResizeDirection?: 'ltr' | 'rtl' 

Enables or disables right-to-left support for resizing the column. defaults to 'ltr'.

onColumnSizingChange?: OnChangeFn<ColumnSizingState> 

onColumnSizingChange?: OnChangeFn<ColumnSizingState> 

This optional function will be called when the columnSizing state changes. If you provide this function, you will be responsible for maintaining its state yourself. You can pass this state back to the table via the state.columnSizing table option.

onColumnSizingInfoChange?: OnChangeFn<ColumnSizingInfoState> 

onColumnSizingInfoChange?: OnChangeFn<ColumnSizingInfoState> 

This optional function will be called when the columnSizingInfo state changes. If you provide this function, you will be responsible for maintaining its state yourself. You can pass this state back to the table via the state.columnSizingInfo table option.

setColumnSizing: (updater: Updater<ColumnSizingState>) => void 

setColumnSizing: (updater: Updater<ColumnSizingState>) => void 

Sets the column sizing state using an updater function or a value. This will trigger the underlying onColumnSizingChange function if one is passed to the table options, otherwise the state will be managed automatically by the table.

setColumnSizingInfo: (updater: Updater<ColumnSizingInfoState>) => void 

setColumnSizingInfo: (updater: Updater<ColumnSizingInfoState>) => void 

Sets the column sizing info state using an updater function or a value. This will trigger the underlying onColumnSizingInfoChange function if one is passed to the table options, otherwise the state will be managed automatically by the table.

resetColumnSizing: (defaultState?: boolean) => void 

resetColumnSizing: (defaultState?: boolean) => void 

Resets column sizing to its initial state. If defaultState is true, the default state for the table will be used instead of the initialValue provided to the table.

resetHeaderSizeInfo: (defaultState?: boolean) => void 

resetHeaderSizeInfo: (defaultState?: boolean) => void 

Resets column sizing info to its initial state. If defaultState is true, the default state for the table will be used instead of the initialValue provided to the table.

getTotalSize: () => number 

getTotalSize: () => number 

Returns the total size of the table by calculating the sum of the sizes of all leaf-columns.

getLeftTotalSize: () => number 

getLeftTotalSize: () => number 

If pinning, returns the total size of the left portion of the table by calculating the sum of the sizes of all left leaf-columns.

getCenterTotalSize: () => number 

getCenterTotalSize: () => number 

If pinning, returns the total size of the center portion of the table by calculating the sum of the sizes of all unpinned/center leaf-columns.

getRightTotalSize: () => number 

getRightTotalSize: () => number 

If pinning, returns the total size of the right portion of the table by calculating the sum of the sizes of all right leaf-columns.