Infinite Table Props

activeCellIndex

[number,number] | null

activeRowIndex

number | null

autoSizeColumnsKey

number|string|{key,includeHeader,columnsToSkip,columnsToResize}

columnDefaultDraggable

boolean

columnDefaultEditable

boolean

columnDefaultSortable

Default: true

boolean

columnDefaultWidth

Default: 200

number

columnGroupVisibility

Record<string, boolean>

columnHeaderHeight

number

columnMaxWidth

Default: 2000

number

columnMinWidth

Default: 30

number

columnOrder

string[]|true

columns

Record<string, InfiniteTableColumn<DATA_TYPE>>

columns.align

'start' | 'center' | 'end'

columns.className

string | (param: InfiniteTableColumnStyleFnParams) => string

columns.components

columns.components.ColumnCell

columns.components.Editor

columns.components.HeaderCell

columns.contentFocusable

boolean|(params) => boolean

columns.cssEllipsis

Default: true

boolean

columns.dataType

string

columns.defaultDraggable

boolean

columns.defaultEditable

boolean|(param)=>boolean|Promise<boolean>

columns.defaultFlex

number

columns.defaultHiddenWhenGroupedBy

'*'| true | keyof DATA_TYPE | { [keyof DATA_TYPE]: true }

columns.defaultWidth

number

columns.field

keyof DATA_TYPE

columns.filterType

string

columns.getValueToEdit

(params) => any|Promise<any>

columns.getValueToPersist

(params) => any|Promise<any>

columns.header

React.ReactNode|({column, columnSortInfo, columnApi})=>React.ReactNode

columns.headerAlign

'start' | 'center' | 'end'

columns.headerClassName

string | (args) => string

columns.headerCssEllipsis

Default: true

boolean

columns.headerStyle

CSSProperties | (args) => CSSProperties

columns.maxWidth

number

columns.minWidth

number

columns.render

(cellContext) => Renderable

columns.renderFilterIcon

columns.renderGroupIcon

(cellContext) => Renderable

columns.renderGroupValue

({ data, rowInfo, column, renderBag, rowIndex, ... })

columns.renderHeader

(param: InfiniteTableColumnHeaderParam) => ReactNode

columns.renderLeafValue

({ data, rowInfo, column, renderBag, rowIndex, ... })

columns.renderMenuIcon

boolean|(cellContext)=> ReactNode

columns.renderRowDetailIcon

boolean|(cellContext) => ReactNode

columns.renderSelectionCheckBox

boolean | ({ data, rowSelected: boolean | null, selectRow, deselectRow, ... })

columns.renderTreeIcon

boolean|(cellContext) => ReactNode

columns.renderValue

(cellContext) => Renderable

columns.resizable

boolean

columns.rowspan

({ rowInfo, data, rowIndex, column }) => number

columns.shouldAcceptEdit

(params) => boolean|Error|Promise<boolean|Error>

columns.sortable

boolean

columns.sortType

Default: 'string'

string | string[]

columns.style

CSSProperties | (param: InfiniteTableColumnStyleFnParams) => CSSProperties

columns.type

Default: 'default'

string | string[]

columns.valueFormatter

({ data?, isGroupRow, rowInfo, field?, rowSelected, rowActive, isGroupRow }) => Renderable

columns.valueGetter

({ data, field? }) => string | number | boolean | null | undefined

columns.verticalAlign

'start' | 'center' | 'end'

columnSizing

Record<string,{width,flex,...}>

columnSizing.flex

number

columnSizing.maxWidth

number

columnSizing.minWidth

number

columnSizing.width

number

columnsTypes.sortable

boolean

columnTypes

Record<string,InfiniteTableColumnType>

columnTypes.components

columnTypes.defaultFlex

number

columnTypes.defaultSortable

boolean

columnTypes.defaultWidth

number

columnTypes.headerClassName

string | (args) => string

columnTypes.headerStyle

CSSProperties | (args) => CSSProperties

columnTypes.maxWidth

number

columnTypes.minWidth

number

components

components.LoadMask

components.RowDetail

debugId

string

defaultActiveCellIndex

[number,number]

defaultActiveRowIndex

number

defaultColumnOrder

Default: true

string[]|true

defaultColumnSizing

Record<string,{width,flex,...}>

defaultColumnSizing.flex

number

defaultColumnSizing.maxWidth

number

defaultColumnSizing.minWidth

number

defaultColumnSizing.width

number

defaultRowDetailState

RowDetailState

domProps

React.HTMLProps<HTMLDivElement>

draggableColumns

boolean

editable

(param) => boolean | Promise<boolean>

focusedClassName

string

focusedStyle

focusedWithinClassName

string

focusedWithinStyle

getCellContextMenuItems

({data, column, rowInfo}) => MenuItem[] | null | { items: MenuItem[], columns: [{name}] } | Promise

getColumnMenuItems

(items, context) => MenuItem[]

getContextMenuItems

({event, data?, column?, rowInfo}, {api, dataSourceApi}) => MenuItem[] | null | { items: MenuItem[], columns: [{name}] } | Promise

groupColumn

InfiniteTableColumn|(colInfo, toggleGroupRow) => InfiniteTableColumn

groupRenderStrategy

'single-column'|'multi-column'

headerOptions

{alwaysReserveSpaceForSortIcon: boolean}

headerOptions.alwaysReserveSpaceForSortIcon

Default: true

boolean

hideColumnWhenGrouped

Default: false

boolean

hideEmptyGroupColumns

Default: false

boolean

isRowDetailEnabled

(rowInfo: InfiniteTableRowInfo<DATA_TYPE>) => boolean

isRowDetailExpanded

(rowInfo: InfiniteTableRowInfo) => boolean

keyboardNavigation

Default: 'cell'

'cell'|'row'|false

keyboardSelection

Default: true

boolean

keyboardShortcuts

{key,handler,when}[]

loadingText

Default: 'Loading'

ReactNode

multiSortBehavior

'append'|'replace'

onActiveCellIndexChange

(activeCellIndex:[number,number])=>void

onActiveRowIndexChange

(activeRowIndex:number)=>void

onBlurWithin

(event)=> void

onCellClick

({ colIndex, rowIndex, column, columnApi, api, dataSourceApi }, event) => void

onCellDoubleClick

({ colIndex, rowIndex, column, columnApi, api, dataSourceApi }, event) => void | {preventEdit?: boolean}

onColumnOrderChange

(columnOrder: string[])=>void

onColumnSizingChange

(columnSizing)=>void

onEditAccepted

({value, initialValue, column, rowInfo, ...}) => void

onEditPersistSuccess

({value, initialValue, column, rowInfo, ...})=>void

onEditRejected

({ value, initialValue, column, rowInfo, ... }) => void

onFocusWithin

(event)=> void

onKeyDown

({ api, dataSourceApi }, event) => void | InfiniteTablePropOnKeyDownResult

onReady

({api, dataSourceApi}) => void}

onRenderRangeChange

(range)=>void

onRowDetailStateChange

(rowDetailState: RowDetailState, {expandRow, collapseRow}) => void

onScrollStop

({renderRange, viewportSize, scrollTop, scrollLeft})=>void

onScrollToBottom

()=>void

onViewportReservedWidthChange

(reserved: number) => void

persistEdit

(params) => any|Error|Promise<any|Error>

pivotGrandTotalColumnPosition

Default: false

"start"|"end"|false

pivotTotalColumnPosition

Default: "end"

"start"|"end"|false

repeatWrappedGroupRows

Default: true

boolean|(rowInfo: InfiniteTableRowInfo<DATA_TYPE>) => boolean

resizableColumns

Default: true

boolean

rowClassName

string|(params:InfiniteTableStylingFnParams) => string

rowDetailCache

boolean|number

rowDetailHeight

Default: 300

number|CSSVar|(rowInfo)=>number

rowDetailRenderer

(rowInfo: InfiniteTableRowInfo<DATA_TYPE>) => ReactNode

rowDetailState

RowDetailState

rowHeight

Default: 40

number|string

rowStyle

CSSProperties|(params:InfiniteTableStylingFnParams) => CSSProperties

scrollStopDelay

Default: 250

number

scrollTopKey

number|string

shouldAcceptEdit

(params) => boolean|Error|Promise<boolean|Error>

showColumnFilters

Default: true

boolean

sortable

boolean | ({column, columns, api, columnApi}) => boolean

viewportReservedWidth

Default: 0

number

virtualizeColumns

Default: true

boolean

wrapRowsHorizontally

Default: false

boolean