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 draggable by default (for reordering columns).

Specifies whether columns are editable by default.

Specifies whether columns are sortable by default.

Specifies the a default width for all columns.

Controls the visibility of column groups. By default, column groups are visible.

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 the alignment of text in column cells and also the alignment of the column header. To only apply alignment to the column header, use columns.headerAlign. For vertical alignment, see columns.verticalAlign.

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.

Specifies whether the column is draggable by default (for reordering columns).

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 alignment of the column header. See related columns.align and columns.headerCssEllipsis.

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.

Renders the tree expand/collapse icon in the column cells. If you want default behavior, specify true and the default icon will be used.

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

Controls the vertical alignment of text in column cells. For horizontal alignment, see columns.align.

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.

Component to use for rendering the row details section in the master-detail DataGrid. When specified, it makes InfiniteTable be a master-detail DataGrid. For configuring the height of row details, see rowDetailHeight

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.

Specifies whether columns are draggable (for reordering columns).

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.

Various header configurations for the DataGrid.

Whether to reserve space in the column header for the sort icon or not.

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. See Master Detail for more information.

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.

An array that specifies the keyboard shortcuts for the DataGrid.

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 whenever the render range changes, that is, additional rows or columns come into view.

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

Triggered when the user has stopped scrolling (after scrollStopDelay milliseconds).

Triggered when the user has scrolled to the bottom of the component. Also see onScrollToTop and onScrollStop.

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

When enabled, and wrapRowsHorizontally is also enabled, if there is grouping configured or if you're using tree data, the group/tree rows will be repeated at the top of each column set if the group/parent starts in the previous column set.

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. See related components.RowDetail.

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.

The delay in milliseconds that the DataGrid waits until it considers scrolling to be stopped. Also used when lazy loading is to fetch the next batch of data.

Determines scrolling the table to the top.

Function used to validate edits for all columns.

Whether to show the column filters or not (only applicable when the <DataSource> is configured with filtering - either with defaultFilterValue or filterValue).

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

Whether to wrap rows horizontally or not. Horizontal Layout is a very different approach to the normal grid layout and only useful in very advanced scenarios.