Infinite Table Props
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
Specifies the active cell for keyboard navigation. This is a controlled prop. See the Keyboard Navigation page for more details.
activeRowIndex
Specifies the active row for keyboard navigation. This is a controlled prop. See the Keyboard Navigation page for more details.
autoSizeColumnsKey
Controls auto-sizing of columns.
columnDefaultEditable
Specifies whether columns are editable by default.
columnDefaultWidth
Specifies the a default width for all columns.
columnHeaderHeight
The height of the column header.
columnMaxWidth
Specifies the maximum width for all columns.
columnMinWidth
Specifies the minimum width for all columns.
columnOrder
Defines the order in which columns are displayed in the component
columns
Describes the columns available in the component.
columns.className
Controls styling via CSS classes for the column. Can be a string
or a function returning a string
(a valid className).
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.Editor
Specifies a custom React component to use for the editor, when editing is enabled for the column.
columns.components.HeaderCell
Specifies a custom React component to use for column headers
columns.contentFocusable
Specifies if the column (or cell, if a function is used) renders content that will/should be focusable (via tab-navigation)
columns.cssEllipsis
Specifies if the column should show ellipsis for content that is too long and does not fit the column width.
columns.dataType
Specifies the type of the data for the column. For now, it's better to simply use columns.type
.
columns.defaultEditable
Controls if the column is editable or not.
columns.defaultFlex
Specifies a default flex for the column
columns.defaultHiddenWhenGroupedBy
Controls default column visibility when groupBy
is used.
columns.defaultWidth
Specifies a default width for the column
columns.field
Binds the column to the specified data field. It should be a keyof DATA_TYPE
.
columns.filterType
Use this to configure the filter type for the column, when the filterType
needs to be different from the column type
.
columns.getValueToEdit
Allows customizing the value that will be passed to the cell editor when it is displayed (when editing starts).
columns.getValueToPersist
Allows customizing the value that will be persisted when an edit has been accepted.
columns.header
Specifies the column header. Can be a static value or a function that returns a React node.
columns.headerClassName
Controls the css class name for the column header. Can be a string or a function returning a string.
columns.headerCssEllipsis
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
Controls styling for the column header. Can be a style object or a function returning a style object.
columns.maxWidth
Configures the maximum width for the column.
columns.minWidth
Configures the minimum width for the column.
columns.render
Customizes the rendering of the column. The argument passed to the function is an object of type InfiniteTableColumnCellContextType
columns.renderFilterIcon
Customizes the rendering of the filter icon for the column.
columns.renderGroupIcon
Customizes the rendering of the collapse/expand group icon for group rows. The argument passed to the function is an object of type InfiniteTableColumnCellContextType
columns.renderMenuIcon
Allows customization of the context menu icon.
columns.renderSelectionCheckBox
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
Customizes the rendering of a group column content, but only for group rows.
columns.renderLeafValue
Customizes the rendering of the group column content, but only for non-group rows.
columns.renderValue
Customizes the rendering of the column content. The argument passed to the function is an object of type InfiniteTableColumnCellContextType
columns.resizable
Specifies if the current column is resizable or not.
columns.rowspan
Specifies the rowspan for cells on the current column.
columns.shouldAcceptEdit
Function specified for the column, that determines whether to accept an edit or not.
columns.sortable
Specifies the sorting behavior for the current column. Overrides the global sortable
prop.
columns.sortType
Specifies the sort type for the column. See related sortTypes
columns.style
Controls styling for the column. Can be a style object or a function returning a style object.
columns.type
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
Customizes the value that will be rendered
columns.valueGetter
Customizes the value that will be rendered
columnSizing
Defines the sizing of columns in the grid.
columnSizing.flex
Specifies the flex value for the column.
columnSizing.minWidth
Specifies the minimum width for a column. Especially useful for flexible columns.
columnSizing.maxWidth
Specifies the maximum width for a column. Especially useful for flexible columns.
columnSizing.width
Specifies the fixed width for the column.
columnTypes
Specifies an object that maps column type ids to column types. Column types are used to apply the same configuration/properties to multiple columns. See related columns.type
columnTypes.components
See related columns.components
.
columnTypes.defaultFlex
Specifies a default flex value for the column type. Will be overriden in any column that already specifies a defaultFlex
property.
columnTypes.headerClassName
Controls styling for the column header for columns with this column type. Can be a string or a function returning a string.
columnTypes.headerStyle
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
Specifies a default fixed width for the column type. Will be overriden in any column that already specifies a defaultWidth
property.
columnTypes.maxWidth
Specifies a default maximum width for the column type. Will be overriden in any column that already specifies a maxWidth
property.
columnTypes.minWidth
Specifies a default minimum width for the column type. Will be overriden in any column that already specifies a minWidth
property.
defaultActiveCellIndex
Specifies the active cell for keyboard navigation. This is an uncontrolled prop. See the Keyboard Navigation page for more details.
columnsTypes.sortable
Specifies the sorting behavior for columns of this type.
defaultActiveRowIndex
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
Defines a default sizing of columns in the grid.
defaultColumnSizing.flex
Specifies the flex value for the column.
defaultColumnSizing.minWidth
Specifies the minimum width for a column. Especially useful for flexible columns.
defaultColumnSizing.maxWidth
Specifies the maximum width for a column. Especially useful for flexible columns.
defaultColumnSizing.width
Specifies the fixed width for the column.
domProps
DOM properties to be applied to the component root element.
editable
Controls whether columns are editable or not.
focusedClassName
CSS class name to be applied to the component root element when it has focus.
focusedWithinClassName
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.
getCellContextMenuItems
Customises the context menu items for a cell.
getContextMenuItems
Customises the context menu items for the whole table.
getColumnMenuItems
Allows customization of the context menu items for a column.
groupColumn
Allows you to define a custom configuration for one or multiple group columns.
groupRenderStrategy
Determines how grouping is rendered - whether a single or multiple columns are generated.
hideColumnWhenGrouped
Allows you to hide group columns bound to fields that are grouped by (fields mentioned in groupBy.field
).
hideEmptyGroupColumns
Allows you to hide group columns which don't render any information (this happens when all previous groups are collapsed).
keyboardNavigation
Determines whether keyboard navigation is enabled.
keyboardSelection
Determines whether the keyboard can be used for selecting/deselecting rows/cells.
loadingText
The text inside the load mask - displayed when loading=true
.
onActiveCellIndexChange
Callback triggered by cell navigation. See the Keyboard Navigation page for more details.
onActiveRowIndexChange
Callback triggered by row navigation. See the Keyboard Navigation page for more details.
onBlurWithin
Function that is called when a focused element is blurred within the component.
onCellClick
Callback function called when a cell has been clicked.
onColumnOrderChange
Called as a result of user changing the column order
onColumnSizingChange
Called as a result of user doing a column resize.
onEditAccepted
Callback prop called when an edit is accepted
onEditPersistSuccess
Callback prop called when an edit is persisted successfully
onEditRejected
Callback prop called when an edit is rejected
onFocusWithin
Function that is called when the table receives focus within the component.
onKeyDown
Callback function called when the keydown
event occurs on the table.
onReady
Callback prop that is being called when the table is ready.
onScrollToBottom
Triggered when the user has scrolled to the bottom of the component
onViewportReservedWidthChange
Callback to be notified of changes to viewportReservedWidth
persistEdit
Custom function to persist an edit
pivotGrandTotalColumnPosition
Controls the position and visibility of pivot grand-total columns
pivotTotalColumnPosition
Controls the position and visibility of pivot total columns
resizableColumns
Controls if by default all columns are resizable or not.
rowHeight
Specifies the height for rows. If a string is passed, it should be the name of a CSS variable, eg --row-height
rowClassName
Specifies the className to be applied to all rows or conditionally to certain rows.
rowStyle
Specifies the style object to be applied to all rows or conditionally to certain rows.
viewportReservedWidth
Specifies the width of the space to be kept as blank - useful when there are flex columns. This number can even be negative.
shouldAcceptEdit
Function used to validate edits for all columns.
scrollTopKey
Determines scrolling the table to the top.
sortable
Specifies the sorting behavior for all columns. Can be overriden at column-level.
virtualizeColumns
Configures whether columns are virtualized or not