GridProps

Providing different rendering of the popup element based on the screen dimensions.

Specifies the text that is rendered as title in the adaptive popup.

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.

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

Determines the children nodes.

Sets a class for the Grid DOM element.

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

Specifies a React element that will be cloned and rendered inside the column menu of the Grid.

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.

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.

Specifies the context menu settings applied to the Grid.

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

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. It takes values of type null, any or DataResult Accepts values of type null, any[], or DataResult.

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 rows not updating during paging or scrolling.

Specifies the data layout mode for the Grid.

• "columns": Traditional column-based table layout (default).
• "stacked": Card-based layout where each row displays as a vertical stack of field label/value pairs. Useful for responsive layouts and mobile devices.

The stacked mode is independent of adaptiveMode and can be used separately.

Note: Row/column spanning is not supported in stacked mode.

The default columns state, used only for the initial load.

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

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

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

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 default sort state applied to the Grid when using uncontrolled mode. (see example)

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

Specifies a React element that will be cloned and rendered inside the detail rows of the currently expanded items (see example).

The descriptor by which the detail row is expanded.

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

The descriptor by which the in-edit mode of an item is defined.

The Grid editable settings.

Sets a custom edit dialog component that the Grid will render instead of the built-in edit dialog.

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

Enables filtering for the columns with their field option set.

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.

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.

Sets the language of the Grid when used as a server component. Have not effect when the Grid is used as a client component.

A custom component that the Grid will render instead of the built-in loader.

Sets the locale of the Grid when used as a server component. Have not effect when the Grid is used as a client 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 clipboard support is enabled, and one of the actions (e.g., copy) is triggered. Accepts a GridClipboardEvent object.

Fires when the columns are reordered.

Fires when a column is resized. Only fired when the Grid is run as a client component.

Fires when the columns state of the Grid is changed.

The event that is fired when the ContextMenu is activated. Only fired when the Grid is run as a client component.

The event that is fired when the ContextMenu item is clicked. Only fired when the Grid is run as a client component.

Fires when the user clicks the CSV export button. Allows custom data transformation before export.

Fires when the data state of the Grid is changed (more information and example).

Fires when the user expands or collapses a detail row.

Fires when the user enters or exits an in-edit mode of a row or cell.

Fires when the Grid filter is modified through the UI. You must handle the event 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 type is set to checkbox.

Fires when the Grid highlight is modified. You must handle the event and filter the data.

Fires when the user changes the values of the item.

Fires when the user press keyboard key. Only fired when the Grid is run as a client component.

Fires when Grid keyboard navigation position is changed. Only fired when the Grid is run as a client component.

Fires when the page of the Grid is changed.

Fires when the user clicks the PDF export button.

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 reorders a row.

Fires when Grid is scrolled. Only fired when the Grid is run as a client component.

Fires when the search value of the GridSearchBox is changed.

Fires when the user tries to select or deselect a row or cell.

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

Configures the pager of the Grid. Accepts GridPagerSettings or a boolean value.(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.
• pageSizeValue: String or Number—Sets the selected value of the page size Dropdownlist. It is useful when the selected value could also be a string not only a number.
• previousNext: Boolean—Toggles the Previous and Next buttons.
• navigatable: Boolean—Defines if the pager will be navigatable.
• responsive: Boolean—Defines if the pager will be responsive. If true, hides the tools that do not fit to the available space.
• adaptive: Boolean—Providing different rendering of the page sizes select element based on the screen dimensions.
• adaptiveTitle: String—Specifies the text that is rendered as title in the adaptive page sizes select element.

The pager component that the Grid will render instead of the built-in pager. It takes values of type null and ComponentType<PagerProps&gt

Defines the page size used by the Grid pager. Required for paging functionality.

When set to true the Grid pdf export will be enabled. If set to an object, the Grid will use the provided settings to export the PDF.

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

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

Defines the row reorder settings.

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.

Specifies whether the loader of the Grid will be displayed.

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 sorting for the columns with their field option set. (see example)

Configuration for the stacked layout mode. Only applicable when dataLayoutMode="stacked".

The cols property defines how stacked cells are arranged:

• As a number: Creates that many equal-width columns
• As an array: The length defines column count, values define widths

Represents the style HTML attribute.

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

Defines the total number of data items in all pages. Required for paging functionality.

Enables Web MCP tools for browser-native AI agent interaction (Chrome 146+).

When enabled, the Grid registers tools that AI agents can discover and invoke. Data reading tools (get_data, get_state) are always registered. Additional tools are registered based on Grid props:

• sortable → sort and clear_sort tools.

Pass true for defaults or an object for fine-grained control. AI agents are multilingual — dataName accepts any language.