React Common Types - grids

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:

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:

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'

DragDropInfo

Describes whether a dragged row is dropped inside another row.

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

Object

This type supplies the dropInsideItem field for DataGrid and TreeList row-dragging events. Use this field in TreeList handlers to distinguish a drop inside a row from a drop between rows.

DragReorderInfo

Describes the drop location and asynchronous completion of a row reorder operation.

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

Object

This type supplies the dropInsideItem and promise fields for DataGrid and TreeList RowDraggingReorderEvent arguments. Use these fields to update the TreeList hierarchy or wait for an asynchronous data source update.

DragStartEventInfo

Describes a row at the start of a drag gesture.

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

This type supplies row data, the row element, the source index, and custom source data for DataGrid and TreeList RowDraggingStartEvent arguments. The TRowData type parameter specifies the type of itemData.

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:

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"

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:

RowDragging

Configures row reordering using drag and drop gestures.

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

RowDraggingEventInfo

Describes the row, source, and target of a row drag and drop operation.

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

This type supplies shared fields for DataGrid and TreeList row-dragging events. Use itemData to identify the dragged row and the source and target fields to update the corresponding data sources. The TRowData type parameter specifies the type of itemData.

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: