The ability for a column to be pinned is determined by the following:
options.enablePinning
is not set to false
options.enableColumnPinning
is not set to false
columnDefinition.enablePinning
is not set to false
The ability for a row to be pinned is determined by the following:
options.enableRowPinning
resolves to true
options.enablePinning
is not set to false
Pinning state is stored on the table using the following shape:
export type ColumnPinningPosition = false | 'left' | 'right'export type RowPinningPosition = false | 'top' | 'bottom'
export type ColumnPinningState = { left?: string[] right?: string[]}export type RowPinningState = { top?: boolean bottom?: boolean}
export type ColumnPinningTableState = { columnPinning: ColumnPinningState}export type RowPinningRowState = { rowPinning: RowPinningState}
enablePinning
enablePinning?: boolean
Enables/disables all pinning for the table.
enableColumnPinning
enableColumnPinning?: boolean
Enables/disables column pinning for all columns in the table.
enableRowPinning
enableRowPinning?: boolean | ((row: Row<TData>) => boolean)
Enables/disables row pinning for all rows in the table.
keepPinnedRows
keepPinnedRows?: boolean
When false
, pinned rows will not be visible if they are filtered or paginated out of the table. When true
, pinned rows will always be visible regardless of filtering or pagination. Defaults to true
.
onColumnPinningChange
onColumnPinningChange?: OnChangeFn<ColumnPinningState>
If provided, this function will be called with an updaterFn
when state.columnPinning
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.
onRowPinningChange
onRowPinningChange?: OnChangeFn<RowPinningState>
If provided, this function will be called with an updaterFn
when state.rowPinning
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.
enablePinning
enablePinning?: boolean
Enables/disables pinning for the column.
setColumnPinning
setColumnPinning: (updater: Updater<ColumnPinningState>) => void
Sets or updates the state.columnPinning
state.
setRowPinning
setRowPinning: (updater: Updater<RowPinningState>) => void
Sets or updates the state.rowPinning
state.
resetColumnPinning
resetColumnPinning: (defaultState?: boolean) => void
Resets the columnPinning state to initialState.columnPinning
, or true
can be passed to force a default blank state reset to { left: [], right: [], }
.
resetRowPinning
resetRowPinning: (defaultState?: boolean) => void
Resets the rowPinning state to initialState.rowPinning
, or true
can be passed to force a default blank state reset to {}
.
getIsSomeColumnsPinned
getIsSomeColumnsPinned: (position?: ColumnPinningPosition) => boolean
Returns whether or not any columns are pinned. Optionally specify to only check for pinned columns in either the left
or right
position.
Note: Does not account for column visibility
getIsSomeRowsPinned
getIsSomeRowsPinned: (position?: RowPinningPosition) => boolean
Returns whether or not any rows are pinned. Optionally specify to only check for pinned rows in either the top
or bottom
position.
getLeftHeaderGroups
getLeftHeaderGroups: () => HeaderGroup < TData > []
Returns the left pinned header groups for the table.
getCenterHeaderGroups
getCenterHeaderGroups: () => HeaderGroup < TData > []
Returns the unpinned/center header groups for the table.
getRightHeaderGroups
getRightHeaderGroups: () => HeaderGroup < TData > []
Returns the right pinned header groups for the table.
getLeftFooterGroups
getLeftFooterGroups: () => HeaderGroup < TData > []
Returns the left pinned footer groups for the table.
getCenterFooterGroups
getCenterFooterGroups: () => HeaderGroup < TData > []
Returns the unpinned/center footer groups for the table.
getRightFooterGroups
getRightFooterGroups: () => HeaderGroup < TData > []
Returns the right pinned footer groups for the table.
getLeftFlatHeaders
getLeftFlatHeaders: () => Header < TData > []
Returns a flat array of left pinned headers for the table, including parent headers.
getCenterFlatHeaders
getCenterFlatHeaders: () => Header < TData > []
Returns a flat array of unpinned/center headers for the table, including parent headers.
getRightFlatHeaders
getRightFlatHeaders: () => Header < TData > []
Returns a flat array of right pinned headers for the table, including parent headers.
getLeftLeafHeaders
getLeftLeafHeaders: () => Header < TData > []
Returns a flat array of leaf-node left pinned headers for the table.
getCenterLeafHeaders
getCenterLeafHeaders: () => Header < TData > []
Returns a flat array of leaf-node unpinned/center headers for the table.
getRightLeafHeaders
getRightLeafHeaders: () => Header < TData > []
Returns a flat array of leaf-node right pinned headers for the table.
getLeftLeafColumns
getLeftLeafColumns: () => Column < TData > []
Returns all left pinned leaf columns.
getRightLeafColumns
getRightLeafColumns: () => Column < TData > []
Returns all right pinned leaf columns.
getCenterLeafColumns
getCenterLeafColumns: () => Column < TData > []
Returns all center pinned (unpinned) leaf columns.
getTopRows
getTopRows: () => Row < TData > []
Returns all top pinned rows.
getBottomRows
getBottomRows: () => Row < TData > []
Returns all bottom pinned rows.
getCenterRows
getCenterRows: () => Row < TData > []
Returns all rows that are not pinned to the top or bottom.
getCanPin
getCanPin: () => boolean
Returns whether or not the column can be pinned.
getPinnedIndex
getPinnedIndex: () => number
Returns the numeric pinned index of the column within a pinned column group.
getIsPinned
getIsPinned: () => ColumnPinningPosition
Returns the pinned position of the column. ('left'
, 'right'
or false
)
pin
pin: (position: ColumnPinningPosition) => void
Pins a column to the 'left'
or 'right'
, or unpins the column to the center if false
is passed.
pin
pin: (position: RowPinningPosition) => void
Pins a row to the 'top'
or 'bottom'
, or unpins the row to the center if false
is passed.
getCanPin
getCanPin: () => boolean
Returns whether or not the row can be pinned.
getIsPinned
getIsPinned: () => RowPinningPosition
Returns the pinned position of the row. ('top'
, 'bottom'
or false
)
getPinnedIndex
getPinnedIndex: () => number
Returns the numeric pinned index of the row within a pinned row group.
getLeftVisibleCells
getLeftVisibleCells: () => Cell < TData > []
Returns all left pinned leaf cells in the row.
getRightVisibleCells
getRightVisibleCells: () => Cell < TData > []
Returns all right pinned leaf cells in the row.
getCenterVisibleCells
getCenterVisibleCells: () => Cell < TData > []
Returns all center pinned (unpinned) leaf cells in the row.
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.