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.

domProps

React.HTMLProps<HTMLDivElement>

DOM properties to be applied to the component root element.

columnDefaultWidth

number

Specifies the a default width for all columns.

columnMaxWidth

number

Specifies the maximum width for all columns.

columnMinWidth

number

Specifies the minimum width for all columns.

columns

Map<string, InfiniteTableColumn<DATA_TYPE>>

Describes the columns available in the component.

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

'string'|'number'

Specifies the type of values displayed in the column.

columns.width

number

Specifies the fixed width of the column. NOTE - will probably be deprecated in the near future, for a better API.

columnOrder

Defines the order in which columns are displayed in the component

defaultColumnOrder

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

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

boolean

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

loadingText

Default: 'Loading'

ReactNode

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

onColumnOrderChange

(columnOrder: string[])=>void

Called as a result of user changing the column order

onBlurWithin

(event)=> void

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

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

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.