Infinite Table Props

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

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

Controls auto-sizing of columns.

Specifies whether columns are editable by default.

Specifies whether columns are sortable by default.

Specifies the a default width for all columns.

The height of the column header.

Specifies the maximum width for all columns.

Specifies the minimum width for all columns.

Defines the order in which columns are displayed in the component

Describes the columns available in the component.

Controls styling via CSS classes for the column. Can be a string or a function returning a string (a valid className).

Specifies custom React components to use for column cells or header

Specifies a custom React component to use for column cells

Specifies a custom React component to use for the editor, when editing is enabled for the column.

Specifies a custom React component to use for column headers

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

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

Specifies the type of the data for the column. For now, it's better to simply use columns.type.

Controls if the column is editable or not.

Specifies a default flex for the column

Controls default column visibility when groupBy is used.

Specifies a default width for the column

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

Use this to configure the filter type for the column, when the filterType needs to be different from the column type.

Allows customizing the value that will be passed to the cell editor when it is displayed (when editing starts).

Allows customizing the value that will be persisted when an edit has been accepted.

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

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

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

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

Configures the maximum width for the column.

Configures the minimum width for the column.

Customizes the rendering of the column. The argument passed to the function is an object of type InfiniteTableColumnCellContextType

Customizes the rendering of the filter icon for the column.

Customizes the rendering of the collapse/expand group icon for group rows. The argument passed to the function is an object of type InfiniteTableColumnCellContextType

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

A custom rendering function for the column header. Called with an object of type InfiniteTableColumnHeaderParam.

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

Allows customization of the context menu icon.

Renders the row detail expand/collapse icon in the column cell. Only used when master-detail is enabled.

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.

Customizes the rendering of the column content. The argument passed to the function is an object of type InfiniteTableColumnCellContextType

Specifies if the current column is resizable or not.

Specifies the rowspan for cells on the current column.

Function specified for the column, that determines whether to accept an edit or not.

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

Specifies the sort type for the column. See related sortTypes

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

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.

Customizes the value that will be rendered

Customizes the value that will be rendered

Defines the sizing of columns in the grid.

Specifies the flex value for the column.

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

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

Specifies the fixed width for the column.

Specifies the sorting behavior for columns of this type.

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

See related columns.components.

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

Specifies whether columns of this type are sortable.

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

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

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

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

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

Components to override the default ones used by the DataGrid.

Allows customising the LoadMask displayed over the DataGrid when it's loading data.

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

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

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

Defines a default sizing of columns in the grid.

Specifies the flex value for the column.

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

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

Specifies the fixed width for the column.

Specifies the default expanded/collapsed state of row details.

DOM properties to be applied to the component root element.

Controls whether columns are editable or not.

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

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

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

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

Customises the context menu items for a cell.

Allows customization of the context menu items for a column.

Customises the context menu items for the whole table.

Allows you to define a custom configuration for one or multiple group columns. When this prop is defined, it gets merged onto any values specified in the groupBy.column property.

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

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

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

Decides on a per-row basis if the row details are enabled or not.

This function ultimately decides if a row detail is expanded or not.

Determines whether keyboard navigation is enabled.

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

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

Specifies the behavior of the DataGrid when multiple sorting is configured. Defaults to 'replace'.

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

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

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

Callback function called when a cell has been clicked.

Called as a result of user changing the column order

Called as a result of user doing a column resize.

Callback prop called when an edit is accepted

Callback prop called when an edit is persisted successfully

Callback prop called when an edit is rejected

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

Callback function called when the keydown event occurs on the table.

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

Called when the expand/collapse state of row details changes.

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

Callback to be notified of changes to viewportReservedWidth

Custom function to persist an edit

Controls the position and visibility of pivot grand-total columns

Controls the position and visibility of pivot total columns

Controls if by default all columns are resizable or not.

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

Controls the caching of detail DataGrids. By default, caching is disabled.

Controls the height of the row details section, in master-detail DataGrids.

When specified, it makes InfiniteTable be a master-detail DataGrid. For configuring the height of row details, see rowDetailHeight

Specifies the expanded/collapsed state of row details.

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

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

Determines scrolling the table to the top.

Function used to validate edits for all columns.

This prop is the ultimate source of truth on whether (and which) columns are sortable.

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

Configures whether columns are virtualized or not