Documentation

@kanunilabs/datagrid-react / GridHeaderProps

Interface: GridHeaderProps<TRow>

Type Parameters

TRow

TRow = GridRowData

Properties

bandOffset?

optional bandOffset?: number

Height of the band rows above, in px. The header sticks BELOW them rather than at 0 — otherwise scrolling down slides the header up over the bands it belongs to.

centerColumns

centerColumns: ReactColumnRuntime<TRow>[]

checkboxColumn?

optional checkboxColumn?: boolean

Leading select-all checkbox column.

detailColumn?

optional detailColumn?: boolean

Leading expander column for master-detail (Enterprise).

draggable?

optional draggable?: boolean

Make headers draggable onto the group panel.

filteredColumns?

optional filteredColumns?: string[]

Column ids that currently have a filter (funnel shown as active).

filterIconMode?

optional filterIconMode?: "hover" | "always"

When the funnel is visible. 'hover' (default) keeps the header clean and reveals it on hover/keyboard focus; 'always' pins it. A column that IS filtered shows its funnel in both modes — hiding the only indicator that a filter is active would make rows disappear for no visible reason.

headerFilter?

optional headerFilter?: boolean

Renders the funnel button that opens the distinct-value popup.

layout

layout: ColumnLayout<TRow>

leadingSpacer

leadingSpacer: number

onAutoFit?

optional onAutoFit?: (columnId) => void

Double-click on the resize handle, and the context-menu "best fit" item.

Parameters

columnId

string

Returns

void

onHeaderContextMenu?

optional onHeaderContextMenu?: (columnId, event) => void

Right-click on a header cell (Enterprise header menu).

Parameters

columnId

string

event

MouseEvent

Returns

void

onOpenFilter?

optional onOpenFilter?: (columnId, anchor) => void

Parameters

columnId

string

anchor

HTMLElement

Returns

void

onReorder?

optional onReorder?: (columnId, beforeId) => void

beforeId === undefined means "move to the end".

Parameters

columnId

string

beforeId

string | undefined

Returns

void

onResize?

optional onResize?: (columnId, width, finished?) => void

finished is false while dragging, true once on release. Absent = one-shot.

Parameters

columnId

string

width

number

finished?

boolean

Returns

void

onSort

onSort: (columnId, additive) => void

Parameters

columnId

string

additive

boolean

Returns

void

onToggleSelectAll?

optional onToggleSelectAll?: () => void

Returns

void

reorderable?

optional reorderable?: boolean

Drag a header onto another to change the column order.

resizable?

optional resizable?: boolean

Drag handle on the trailing edge of each header.

rowNumberColumn?

optional rowNumberColumn?: boolean

Leading row-number column (gap analysis P3.5).

rowNumberHeader?

optional rowNumberHeader?: ReactNode

What the row-number column's header shows. Defaults to #.

selectAllState?

optional selectAllState?: "all" | "some" | "none"

'all' | 'some' | 'none' — drives the tri-state select-all box.

sort

sort: SortDescriptor[]

sortable

sortable: boolean

stickyInsets?

optional stickyInsets?: ReadonlyMap<string, number>

Inset per STICKY center column, by id. See RenderGeometry.stickyInsets.

trailingSpacer

trailingSpacer: number