GridProps

Deprecated. Not needed any more.

When set to true it sets the alternating of the rows per groups so each group could start with the same color row. There is a known limitation when virtual scrolling with groups and alternatePerGroup set to true- there may be a slight flicker of the alternating rows in groups with larger amount of items - in this case we would rather recommend using rowTemplates and set the row alternating based on the data or dataItems.

Enables data-processing inside the GridComponent based on its state. Provides an easy, built-in way to handle data operations like sorting, filtering, grouping, and paging.

obsolete Will be removed in the next major release. Use 'cells' prop instead.

Defines a set of custom cell components that the Grid will render instead of the default cells.

Enables clipboard copy, cut, and paste manipulations. Accepts ClipboardSettings or a boolean value.

Deprecated Use 'groupExpand' instead.

Passes the collection of all collapsed groups for every grouped level.

Defines if the column menu will be shown for the column. Accepts Boolean, a Vue component, a render function, or a slot name

Controls the ColumnMenu animation. By default, the opening and closing animations are enabled.

Globally overrides the default(three vertical dots) column menu icon for the whole Grid. If set, the prop can be overridden on column level using the (menuIcon) property.

Sets the properties of the columns that are used by the Grid.

The collection of column states of the grid.

Enables virtualization of the columns. If virtualization is enabled, the columns outside the view are not rendered.

Configures the context menu of the Grid. If set to true, the default context menu is rendered. Can be a GridContextMenuOptions object to configure head/body items separately, or a function that returns the configuration based on cell options.

Enables CSV export functionality when set to true or provides CSV export configuration options.

Sets the Grid row key prop to the value of this field in the dataItem. If not set, the dataItem index will be used for the row key, which might lead to row not updated during paging or scrolling.

Sets the data of the Grid (see example). If you use paging, the data option has to contain only the items for the current page.

The default collection of column states of the grid.

The default detailExpand state applied to the Grid when using uncontrolled mode.

The default descriptor by which the data is filtered (more information and examples).

The default group state applied to the Grid when using uncontrolled mode.

The default groupExpand state applied to the Grid when using uncontrolled mode.

The default pinnedBottomRows state applied to the Grid when using uncontrolled mode. Requires pinnable={true}.

The default pinnedTopRows state applied to the Grid when using uncontrolled mode. Requires pinnable={true}.

The descriptor by which the data is searched by default. Its first FilterDescriptor populates the GridSearchBox.

The default select state applied to the Grid when using uncontrolled mode.

The default skip state applied to the Grid when using uncontrolled mode.

The descriptors by which the data is sorted. Applies the sorting styles and buttons to the affected columns.

The default take state applied to the Grid when using uncontrolled mode.

Specifies a custom rendering that will be cloned and rendered inside the detail rows of the currently expanded items (see example. Accepts a Vue component, a render function, or a slot name. The expand will be active if the dataItemKey is set.

The descriptor by which the detail rows are expanded.

Defines the height of the detail row and forces an equal height to all detail rows

Sets the dir HTML attribute of the Grid wrapper element. Use 'rtl' to enable right-to-left rendering.

Specifies the name of the field which will provide a Boolean representation of the edit state of the current item (more information and examples).

Defines the GridColumnProps of the expand column.

obsolete Will be removed in the next major release. Set dataItemKey property instead.

Specifies the name of the field which will provide a Boolean representation of the expanded state of the item (see example.

The descriptor by which the data is filtered (more information and examples). Affects the values and buttons in the FilterRow of the Grid.

Enables the filtering of the columns with their field option set (more information and examples).

obsolete Will be removed in the next major release. Use 'cells.filterCell' prop instead.

The filter operators for the Grid filters.

Determines if the scroll position will be updated after a data change. If set to true, the scroll will remain in the same position.

The descriptors by which the data will be grouped (more information and examples).

Determines if grouping by dragging and dropping the column headers is allowed (more information and examples).

The descriptor by which the group is expanded.

obsolete Will be removed in the next major release. Use 'cells.headerCell' prop instead.

The descriptor by which the highlight state of an item is defined. Passing a boolean value will highlight the whole row, while passing an object will highlight individual cells by their field.

Sets the id property of the top div element of the component.

The boolean option is Deprecated. Use 'showLoader' instead.

Defines if the loader will be shown. Accepts a slot name, a render function, or a Vue component.

Defines if the group descriptor columns are locked (frozen or sticky). Locked columns are the columns that are visible at all times while the user scrolls the component horizontally. Defaults to false.

If set to true, the user can use dedicated shortcuts to interact with the Grid. By default, navigation is disabled and the Grid content is accessible in the normal tab sequence.

Fires when the user triggers a canceling operation from a cell.

Fires when the user clicks a cell.

Fires when clipboard support is enabled, and one of the actions (e.g., copy) is triggered. Accepts a GridClipboardEvent object.

Fires when columns are reordered.

Fires when a column is resized

Fires when the context menu is activated on a cell.

Fires when a context menu item is clicked.

A callback that receives the raw source data (before sort, filter, and group operations) and returns a transformed array. Use it to filter out rows or modify values before CSV generation. The returned array is then processed through the Grid's data operations (sort, filter, group) before being exported.

Fires when the data state of the Grid is changed.

Fires when the user expands or collapses a detail row.

Fires when the user triggers an edit operation from a cell.

Deprecated. Use 'onDetailexpandchange' or 'onGroupexpandchange' instead.

Fires when the Grid filter is modified through the UI (more information and examples). You have to handle the event yourself and filter the data.

Fires when the grouping of the Grid is changed. You have to handle the event yourself and group the data (more information and examples).

Fires when the user expands or collapses a group.

Fires when the user clicks the checkbox of a column header whose field matches selectedField. (see example).

Fires when the user changes the values of the item. The event is not debounced and fires on every onChange event of the input in the current EditCell. (more information and examples).

Fires when the user press keyboard key.

Fires when Grid keyboard navigation position is changed.

Fires when the page of the Grid is changed (see example). You have to handle the event yourself and page the data.

Fires when the user triggers a removal operation from a cell.

Fires when the user clicks a row.

Fires when the user double clicks a row.

Fires when a row is pinned, unpinned, or moved between pinned zones. Requires pinnable={true}.

Fires when the user triggers a saving operation from a cell.

Fires when Grid is scrolled.

Fires when the search descriptor of the Grid is changed. You have to handle the event yourself and search the data.

Fires when the user tries to select or deselect a row (see example).

Fires when the sorting of the Grid is changed (see example). You have to handle the event yourself and sort the data.

Configures the pager of the Grid (see example).

The available options are:

• buttonCount: Number—Sets the maximum numeric buttons count before the buttons are collapsed.
• info: Boolean—Toggles the information about the current page and the total number of records.
• type: PagerType—Accepts the numeric (buttons with numbers)

and input (input for typing the page number) values.

• pageSizes: Boolean or Array<number>—Shows a menu for selecting the page size.
• previousNext: Boolean—Toggles the Previous and Next buttons.

Defines the custom rendering of the pager. Accepts a slot name, a render function, or a Vue component.

Defines the page size that is used by the Grid pager (see example). Required by the paging functionality.

Enables the row pinning feature. When false or omitted, the row pinning feature is inactive.

The array of data items pinned to the bottom of the Grid. Pinned rows remain visible while the body scrolls and are immune to filtering and pagination. Requires pinnable={true}.

The array of data items pinned to the top of the Grid. Pinned rows remain visible while the body scrolls and are immune to filtering and pagination. Requires pinnable={true}.

If set to true, the user can reorder columns by dragging their header cells (see example.

If set to true, the user can resize columns by dragging the edges (resize handles) of their header cells (see example.

A function that returns a custom class applied to the row.

Defines the row height and forces an equal height to all rows (see example).

obsolete Will be removed in the next major release. Use 'rows' prop instead.

Defines a set of custom row components that the Grid will render instead of the default rows.

Enables the built-in row span feature of the Grid.

Defines the scroll mode that is used by the Grid (see example.

The available options are:

• none—Renders no scrollbar.
• scrollable—This is the default scroll mode. It requires the setting of the height option.
• virtual—Displays no pager and renders a portion of the data (optimized rendering)

while the user is scrolling the content.

The descriptor by which the data is searched. Its first FilterDescriptor populates the GridSearchBox.

Defines the fields of the data that are filtered by the GridSearchBox.

The descriptor by which the selected state of an item is defined. Passing a boolean value will select the whole row, while passing an array of strings will select individual.

The Grid selectable settings.

obsolete Will be removed in the next major release. Use selectable instead.

Specifies whether the loader of the Grid will be displayed. Defaults to false.

Configures the size of the Grid.

The available options are:

• small
• medium

Defines the number of records that will be skipped by the pager (see example). Required by the paging functionality.

The descriptors by which the data is sorted. Applies the sorting styles and buttons to the affected columns.

Enables the sorting for the columns with their field option set (see example).

Represents the style HTML attribute.

Alias of the pageSize property. If take is set, pageSize will be ignored.

Deprecated. Not needed any more.

Defines the total number of data items in all pages (see example). Required by the paging functionality.

Deprecated. Not needed any more.

Deprecated. Not needed any more. Use 'dataItemKey' instead.