Infinite Table Reference

In the API Reference below we’ll use DATA_TYPE to refer to the TypeScript type that represents the data the component is bound to.

activeCellIndex

[number,number] | null

Specifies the active cell for keyboard navigation. This is a controlled prop. See the Keyboard Navigation page for more details.

activeRowIndex

number | null

Specifies the active row for keyboard navigation. This is a controlled prop. See the Keyboard Navigation page for more details.

autoSizeColumnsKey

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

Controls auto-sizing of columns.

columnDefaultWidth

Default: 200
number

Specifies the a default width for all columns.

columnMaxWidth

Default: 2000
number

Specifies the maximum width for all columns.

columnMinWidth

Default: 30
number

Specifies the minimum width for all columns.

columnOrder

string[]|true

Defines the order in which columns are displayed in the component

columns

Record<string, InfiniteTableColumn<DATA_TYPE>>

Describes the columns available in the component.

columns.components

Specifies custom React components to use for column cells or header

columns.components.ColumnCell

Specifies a custom React component to use for column cells

columns.components.HeaderCell

Specifies a custom React component to use for column headers

columns.contentFocusable

boolean|(params) => boolean

Specifies if the column (or cell, if a function is used) renders content that will/should be focusable (via tab-navigation)

columns.cssEllipsis

Default: true
boolean

Specifies if the column should show ellipsis for content that is too long and does not fit the column width.

columns.defaultFlex

number

Specifies a default flex for the column

columns.defaultHiddenWhenGroupedBy

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

Controls default column visibility when groupBy is used.

columns.defaultWidth

number

Specifies a default width for the column

columns.field

keyof DATA_TYPE

Binds the column to the specified data field. It should be a keyof DATA_TYPE.

columns.header

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

Specifies the column header. Can be a static value or a function that returns a React node.

columns.headerClassName

string | (args) => string

Controls the css class name for the column header. Can be a string or a function returning a string.

columns.headerCssEllipsis

Default: true
boolean

Specifies if the column should show ellipsis in the column header if the header is too long and does not fit the column width.

columns.headerStyle

CSSProperties | (args) => CSSProperties

Controls styling for the column header. Can be a style object or a function returning a style object.

columns.maxWidth

number

Configures the maximum width for the column.

columns.minWidth

number

Configures the minimum width for the column.

columns.render

({ value, data, rowInfo, column, rowIndex, pivotBy, groupBy, toggleCurrentGroupRow}) => Renderable

Customizes the rendering of the column.

columns.renderGroupIcon

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

Customizes the rendering of the collapse/expand group icon for group rows.

columns.renderMenuIcon

boolean|({column, columnApi})=> ReactNode

Allows customization of the context menu icon.

columns.renderSelectionCheckBox

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

Specifies that the current column will have a selection checkbox - if a function is provided, will be used to customizes the rendering of the checkbox rendered for selection.

columns.renderGroupValue

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

Customizes the rendering of a group column content, but only for group rows.

columns.renderLeafValue

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

Customizes the rendering of the group column content, but only for non-group rows.

columns.renderValue

({ value, data, rowInfo, column, renderBag, rowIndex, pivotBy, groupBy, toggleCurrentGroupRow}) => Renderable

Customizes the rendering of the column content.

columns.resizable

boolean

Specifies if the current column is resizable or not.

columns.rowspan

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

Specifies the rowspan for cells on the current column.

columns.sortable

boolean

Specifies the sorting behavior for the current column. Overrides the global sortable prop.

columns.sortType

Default: 'string'
string

Specifies the sort type for the column. See related sortTypes

columns.style

CSSProperties | (args) => CSSProperties

Controls styling for the column. Can be a style object or a function returning a style object.

columns.type

Default: 'default'
string | string[]

Specifies the column type - a column type is a set of properties that describes the column. Column types allow to easily apply the same properties to multiple columns.

columns.valueFormatter

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

Customizes the value that will be rendered

columns.valueGetter

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

Customizes the value that will be rendered

columnSizing

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

Defines the sizing of columns in the grid.

columnSizing.flex

number

Specifies the flex value for the column.

columnSizing.minWidth

number

Specifies the minimum width for a column. Especially useful for flexible columns.

columnSizing.maxWidth

number

Specifies the maximum width for a column. Especially useful for flexible columns.

columnSizing.width

number

Specifies the fixed width for the column.

columnTypes

Record<string,InfiniteTableColumnType>

Specifies an object that maps column type ids to column types. Column types are used to apply the same configuration/properties to multiple columns.

columnTypes.defaultFlex

number

Specifies a default flex value for the column type. Will be overriden in any column that already specifies a defaultFlex property.

columnTypes.headerClassName

string | (args) => string

Controls styling for the column header for columns with this column type. Can be a string or a function returning a string.

columnTypes.headerStyle

CSSProperties | (args) => CSSProperties

Controls styling for the column header for columns with this column type. Can be a style object or a function returning a style object.

columnTypes.defaultWidth

number

Specifies a default fixed width for the column type. Will be overriden in any column that already specifies a defaultWidth property.

columnTypes.maxWidth

number

Specifies a default maximum width for the column type. Will be overriden in any column that already specifies a maxWidth property.

columnTypes.minWidth

number

Specifies a default minimum width for the column type. Will be overriden in any column that already specifies a minWidth property.

defaultActiveCellIndex

[number,number]

Specifies the active cell for keyboard navigation. This is an uncontrolled prop. See the Keyboard Navigation page for more details.

columnsTypes.sortable

boolean

Specifies the sorting behavior for columns of this type.

defaultActiveRowIndex

number

Specifies the active row for keyboard navigation. This is an uncontrolled prop. See the Keyboard Navigation page for more details.

defaultColumnOrder

Default: true
string[]|true

Defines the order in which columns are displayed in the component.

defaultColumnSizing

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

Defines a default sizing of columns in the grid.

defaultColumnSizing.flex

number

Specifies the flex value for the column.

defaultColumnSizing.minWidth

number

Specifies the minimum width for a column. Especially useful for flexible columns.

defaultColumnSizing.maxWidth

number

Specifies the maximum width for a column. Especially useful for flexible columns.

defaultColumnSizing.width

number

Specifies the fixed width for the column.

domProps

React.HTMLProps<HTMLDivElement>

DOM properties to be applied to the component root element.

focusedClassName

string

CSS class name to be applied to the component root element when it has focus.

focusedWithinClassName

string

CSS class name to be applied to the component root element when there is focus within (inside) the component.

focusedStyle

Specifies the style to be applied to the component root element when it has focus.

focusedWithinStyle

Specifies the style to be applied to the component root element when there is focus within (inside) the component.

getColumnContextMenuItems

(items, context) => MenuItem[]

Allows customization of the context menu items for a column.

groupColumn

InfiniteTableColumn|(colInfo, toggleGroupRow) => InfiniteTableColumn

Allows you to define a custom configuration for one or multiple group columns.

groupRenderStrategy

'single-column'|'multi-column'

Determines how grouping is rendered - whether a single or multiple columns are generated.

hideColumnWhenGrouped

Default: false
boolean

Allows you to hide group columns bound to fields that are grouped by (fields mentioned in groupBy.field).

hideEmptyGroupColumns

Default: false
boolean

Allows you to hide group columns which don’t render any information (this happens when all previous groups are collapsed).

keyboardNavigation

Default: 'cell'
'cell'|'row'|false

Determines whether keyboard navigation is enabled.

keyboardSelection

Default: true
boolean

Determines whether the keyboard can be used for selecting/deselecting rows/cells.

loadingText

Default: 'Loading'
ReactNode

The text inside the load mask - displayed when loading=true.

onActiveCellIndexChange

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

Callback triggered by cell navigation. See the Keyboard Navigation page for more details.

onActiveRowIndexChange

(activeRowIndex:number)=>void

Callback triggered by row navigation. See the Keyboard Navigation page for more details.

onBlurWithin

(event)=> void

Function that is called when a focused element is blurred within the component.

onColumnOrderChange

(columnOrder: string[])=>void

Called as a result of user changing the column order

onColumnSizingChange

(columnSizing)=>void

Called as a result of user doing a column resize.

onFocusWithin

(event)=> void

Function that is called when the table receives focus within the component.

onReady

InfiniteTableApi<DATA_TYPE>

Callback prop that is being called when the table is ready.

onScrollToBottom

()=>void

Triggered when the user has scrolled to the bottom of the component

onViewportReservedWidthChange

(reserved: number) => void

Callback to be notified of changes to viewportReservedWidth

pivotGrandTotalColumnPosition

Default: false
"start"|"end"|false

Controls the position and visibility of pivot grand-total columns

pivotTotalColumnPosition

Default: "end"
"start"|"end"|false

Controls the position and visibility of pivot total columns

resizableColumns

Default: true
boolean

Controls if by default all columns are resizable or not.

rowHeight

Default: 40
number|string

Specifies the height for rows. If a string is passed, it should be the name of a CSS variable, eg --row-height

rowClassName

string|({data, rowInfo, rowIndex}) => string

Specifies the className to be applied to all rows or conditionally to certain rows.

rowStyle

CSSProperties|({data, rowInfo, rowIndex}) => CSSProperties

Specifies the style object to be applied to all rows or conditionally to certain rows.

viewportReservedWidth

Default: 0
number

Specifies the width of the space to be kept as blank - useful when there are flex columns. This number can even be negative.

scrollTopKey

number|string

Determines scrolling the table to the top.

sortable

Default: true
boolean

Specifies the sorting behavior for all columns. Can be overriden at column-level.

virtualizeColumns

Default: true
boolean

Configures whether columns are virtualized or not