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

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.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

'*'| 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})=>React.ReactNode

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

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.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.renderValue

({ value, data, rowInfo, column, 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.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.valueGetter

({ data, rowInfo }) => 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.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.

defaultActiveRowIndex

number

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

defaultColumnOrder

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.

groupColumn

InfiniteTableColumn|({options, toggleGroupRow}) => InfiniteTableColumn

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

groupRenderStrategy

'single-column'|'multi-column'|'inline'

Determines how grouping is rendered - whether a single or multiple columns are generated. In case of inline, no group column is generated but the column corresponding to the group field is used.

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.

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.

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.

virtualizeColumns

Default: true
boolean

Configures whether columns are virtualized or not