React Common Types - grids

AIAssistant

Configures the grids AI Assistant.

import { AIAssistant } from "devextreme/common/grids"
Type:

Object

AIColumnMode

Specifies how an AI column sends requests.

Type:

Literal Union

Accepted Values: 'auto' | 'manual'

DataGrid Demo TreeList Demo

Used in:

ApplyChangesMode

Specifies when to apply changes made in the field chooser to the PivotGrid.

Type:

Literal Union

Accepted Values: 'instantly' | 'onDemand'

Used in:

ApplyFilterMode

Specifies when to apply a filter.

Type:

Literal Union

Accepted Values: 'auto' | 'onClick'

Used in:

BasicFilterExpr

A basic DataGrid/TreeList filter expression.

import { BasicFilterExpr } from "devextreme/common/grids"
Type:

Object

This object includes the following fields:

  • type: The expression type. Set to "basic".
  • field: The filtered data field.
  • operator: A SearchOperation comparison operator.
  • value: The comparison value. Can be one of the following types:
    • string
    • number
    • boolean
    • null

ColumnAIOptions

Configures AI options for a column.

import { ColumnAI_Options } from "devextreme/common/grids"
Type:

Object

ColumnChooser

Configures the column chooser.

import { ColumnChooser } from "devextreme/common/grids"
Type:

Object

ColumnChooserMode

Specifies how a user manages columns using the column chooser.

Type:

Literal Union

Accepted Values: 'dragAndDrop' | 'select'

Used in:

ColumnChooserSearchConfig

Configures the column chooser's search functionality.

import { ColumnChooserSearchConfig } from "devextreme/common/grids"
Type:

Object

ColumnChooserSelectionConfig

Configures column selection functionality within the column chooser.

import { ColumnChooserSelectionConfig } from "devextreme/common/grids"
Type:

Object

ColumnFixing

Configures column fixing.

import { ColumnFixing } from "devextreme/common/grids"

ColumnFixingIcons

Configures column fixing icons.

import { ColumnFixingIcons } from "devextreme/common/grids"

ColumnFixingTexts

Contains properties that specify texts for column fixing commands in the context menu of a column header.

import { ColumnFixingTexts } from "devextreme/common/grids"

ColumnHeaderFilter

Specifies data settings for the header filter.

import { ColumnHeaderFilter } from "devextreme/common/grids"
Type:

Object

ColumnHeaderFilterSearchConfig

Configures the header filter's search.

import { ColumnHeaderFilterSearchConfig } from "devextreme/common/grids"
Type:

HeaderFilterSearchConfig

|

Object

ColumnResizeMode

Specifies how the UI component resizes columns.

Type:

Literal Union

Accepted Values: 'nextColumn' | 'widget'

Used in:

CombinedFilterExpr

A combined DataGrid/TreeList filter expression.

import { CombinedFilterExpr } from "devextreme/common/grids"
Type:

Object

This object includes the following fields:

  • type: The expression type. Set to "combined".
  • leftId: The ID of the first filter expression's node (FilterExprNode).
  • combiner: The combination operation. Accepted values: "and", "or".
  • rightId: The ID of the second filter expression's node (FilterExprNode).

CommandInfo

Information about a predefined DataGrid/TreeList command.

import { CommandInfo } from "devextreme/common/grids"
Type: any

CommandInfo contains the following fields:

CompositeKeyPair

A field/value pair used in composite DataGrid or TreeList keys.

import { CompositeKeyPair } from "devextreme/common/grids"
Type:

Object

This object includes the following fields:

  • field: The key field's name.
  • value: The key field's value. Can be a string or number.

DataChangeType

Data change type.

Type:

Literal Union

Accepted Values: 'insert' | 'update' | 'remove'

Used in:

DataRenderMode

Specifies the rendering mode for columns and rows.

Type:

Literal Union

Accepted Values: 'standard' | 'virtual'

EnterKeyAction

Specifies whether the Enter key switches the cell or row to the edit state or moves focus in the enterKeyDirection.

Type:

Literal Union

Accepted Values: 'startEdit' | 'moveFocus'

Used in:

EnterKeyDirection

Specifies the direction in which to move focus when a user presses Enter.

Type:

Literal Union

Accepted Values: 'none' | 'column' | 'row'

Used in:

FilterExpr

A DataGrid/TreeList filter expression.

import { FilterExpr } from "devextreme/common/grids"
Type:

BasicFilterExpr

|

CombinedFilterExpr

|

NegatedFilterExpr

FilterExpr is a union of multiple types whose structure depends on the represented filter expression. For additional information, see the following topics:

FilterExprNode

A node in a filter expression tree (FilterExprTree).

import { FilterExprNode } from "devextreme/common/grids"

This object includes the following fields:

  • id: A unique identifier for the node. Nodes reference each other by ID.
  • expr: The filter expression (FilterExpr).

FilterExprTree

A complex filter expression in a flat data structure.

import { FilterExprTree } from "devextreme/common/grids"

FilterExprTree stores a filter expression tree as a flat list rather than a hierarchical structure. This flat structure improves compatibility with AI services for the AI Assistant's filterValue command.

This object includes the following fields:

  • rootId: The ID of the root FilterExprNode. This node is evaluated first. rootId must match the id value of an object in the nodes array.
  • nodes: An array of FilterExprNode objects. Each node must have a unique id.

FilterOperation

Specifies available filter operations.

Type:

Literal Union

Accepted Values: '=' | '<>' | '<' | '<=' | '>' | '>=' | 'contains' | 'endswith' | 'isblank' | 'isnotblank' | 'notcontains' | 'startswith' | 'between' | 'anyof' | 'noneof'

Used in:

FilterPanel

Configures the filter panel.

import { FilterPanel } from "devextreme/common/grids"

FilterPanelTexts

Specifies texts for the filter panel's elements.

import { FilterPanelTexts } from "devextreme/common/grids"
Type:

Object

FilterRow

Configures the filter row.

import { FilterRow } from "devextreme/common/grids"

FilterRowOperationDescriptions

Specifies descriptions for filter operations on the filter list.

import { FilterRowOperationDescriptions } from "devextreme/common/grids"

FilterType

Specifies whether a user changes the current filter by including (selecting) or excluding (clearing the selection of) values.

Type:

Literal Union

Accepted Values: 'exclude' | 'include'

Used in:

FixedPosition

Specifies a position type for fixed columns.

Type:

Literal Union

Accepted Values: 'left' | 'right' | 'sticky'

Used in:

GridsContextMenuTarget

Specifies a target for triggering context menu.

Type:

Literal Union

Accepted Values: 'toolbar' | 'header' | 'content' | 'footer'

Used in:

GridsEditMode

Specifies how a user edits data.

Type:

Literal Union

Accepted Values: 'batch' | 'cell' | 'row' | 'form' | 'popup'

GridsEditRefreshMode

Specifies operations that are performed after saving changes.

Type:

Literal Union

Accepted Values: 'full' | 'reshape' | 'repaint'

GroupExpandMode

Specifies the event on which a group will be expanded/collapsed.

Type:

Literal Union

Accepted Values: 'buttonClick' | 'rowClick'

Used in:

HeaderFilter

Configures the header filter feature.

import { HeaderFilter } from "devextreme/common/grids"
Type:

Object

HeaderFilterGroupInterval

Specifies how the header filter combines values into groups.

Type:

Literal Union

Accepted Values: 'day' | 'hour' | 'minute' | 'month' | 'quarter' | 'second' | 'year'

Used in:

HeaderFilterSearchConfig

Configures the header filter's search functionality.

import { HeaderFilterSearchConfig } from "devextreme/common/grids"
Type:

Object

HeaderFilterTexts

Contains properties that specify text for various elements of the popup menu.

import { HeaderFilterTexts } from "devextreme/common/grids"
Type:

Object

KeyboardNavigation

Configures keyboard navigation.

import { KeyboardNavigation } from "devextreme/common/grids"

LoadPanel

Configures the load panel.

import { LoadPanel } from "devextreme/common/grids"

NegatedFilterExpr

A negated (unary NOT) DataGrid/TreeList filter expression.

import { NegatedFilterExpr } from "devextreme/common/grids"
Type:

Object

This object includes the following fields:

  • type: The expression type. Set to "negated".
  • expressionId: The ID of a filter expression node (FilterExprNode) to negate.

NewRowPosition

Specifies a position for a new row.

Type:

Literal Union

Accepted Values: 'first' | 'last' | 'pageBottom' | 'pageTop' | 'viewportBottom' | 'viewportTop'

Used in:

Pager

Configures the pager.

import { Pager } from "devextreme/common/grids"
Type:

Object

Function parameters:
allowedPageSizes:
Object structure:
Name Type Description

Array

|

Mode

Specifies the available page sizes in the page size selector.
visible:
Object structure:
Name Type Description

Boolean

|

Mode

Specifies whether the pager is visible.

PagerPageSize

Specifies the available page sizes in the page size selector.

Type:

Literal Union

Accepted Values: 'all' | 'auto'

Used in:

PredefinedCommandNames

Names of predefined commands available in the DevExtreme DataGrid and TreeList.

import { PredefinedCommandNames } from "devextreme/common/grids"
Type:

String

The following commands are available:

  • columnsVisibility
  • columnsReorder
  • columnsPinning
  • columnsResize
  • filterValue
  • clearFilter
  • focusRowByKey
  • focusRowByIndex
  • paging
  • pageSize
  • pageIndex
  • searching
  • selectByKeys
  • selectByIndexes
  • selectAll
  • deselectAll
  • clearSelection
  • sorting
  • clearSorting
See Also

PredefinedCommands

Predefined commands available in the DevExtreme DataGrid and TreeList.

import { PredefinedCommands } from "devextreme/common/grids"
Type:

Object

The following code snippet lists available commands with their arguments:

Code
columnsVisibility: {
    dataField: string;
    visible: boolean;
};
columnsReorder: {
    dataField: string;
    visibleIndex: number;
};
columnsPinning: {
    dataField: string;
    fixed: boolean;
    fixedPosition?: 'left' | 'right';
};
columnsResize: {
    dataField: string;
    width: number | string;
};
filterValue: {
    expression: FilterExprTree | null;
};
clearFilter: {};
focusRowByKey: {
    key: string | number | Array<CompositeKeyPair>;
};
focusRowByIndex: {
    index: number;
};
paging: {
    enabled: boolean;
};
pageSize: {
    pageSize: number;
};
pageIndex: {
    pageIndex: number;
};
searching: {
    text: string;
};
selectByKeys: {
    keys: Array<string | number | Array<CompositeKeyPair>>;
    preserve: boolean;
};
selectByIndexes: {
    indexes: number[];
};
selectAll: {};
deselectAll: {};
clearSelection: {};
sorting: {
    dataField: string;
    sortOrder: SortOrder | 'none';
};
clearSorting: {};

ResponseStatus

The AI response status.

Type:

Literal Union

Accepted Values: 'success' | 'failure'

Used in:

ResponseStatusTexts

Response messages for each status.

import { ResponseStatusTexts } from "devextreme/common/grids"
Type:

Object

This object can contain both success and failure.

RowDragging

Configures row reordering using drag and drop gestures.

import { RowDragging } from "devextreme/common/grids"

SearchPanel

Configures the search panel.

import { SearchPanel } from "devextreme/common/grids"
Type:

Object

SelectedFilterOperation

Specifies a filter operation that applies when users use the filter row to filter the column.

Type:

Literal Union

Accepted Values: '<' | '<=' | '<>' | '=' | '>' | '>=' | 'between' | 'contains' | 'endswith' | 'notcontains' | 'startswith'

Used in:

SelectionColumnDisplayMode

Specifies when to display the selection column and row selection checkboxes.

Type:

Literal Union

Accepted Values: 'always' | 'none' | 'onClick' | 'onLongTap'

Used in:

Sorting

Configures runtime sorting.

import { Sorting } from "devextreme/common/grids"
Type:

Object

StartEditAction

Specifies whether a single or double click should switch a cell to the editing state.

Type:

Literal Union

Accepted Values: 'click' | 'dblClick'

StateStoreType

Specifies the type of storage where the state is saved.

Type:

Literal Union

Accepted Values: 'custom' | 'localStorage' | 'sessionStorage'

Used in:

StateStoring

Configures state storing.

import { StateStoring } from "devextreme/common/grids"

SummaryType

Specifies how to aggregate data for the group summary item, total summary item, or the field's data.

Type:

Literal Union

Accepted Values: 'avg' | 'count' | 'custom' | 'max' | 'min' | 'sum'

Used in: