React Common Types

animation

charts

data

events

gauges

grids

ApplyValueMode

Specifies the way an end-user applies the selected value.

Type:

Literal Union

Accepted Values: 'instantly' | 'useButtons'

Used in:

ButtonStyle

Specifies how the button is styled.

Type:

Literal Union

Accepted Values: 'text' | 'outlined' | 'contained'

Used in:

ButtonType

Specifies the button type.

Type:

Literal Union

Accepted Values: 'danger' | 'default' | 'normal' | 'success'

Used in:

ComparisonOperator

Specifies the operator to be used for comparing the validated value with the target.

Type:

Literal Union

Accepted Values: '!=' | '!==' | '<' | '<=' | '==' | '===' | '>' | '>='

Used in:

DataStructure

Specifies the data structure.

Type:

Literal Union

Accepted Values: 'plain' | 'tree'

Used in:

DataType

Specifies a data type for a column/field value.

Type:

Literal Union

Accepted Values: 'string' | 'number' | 'date' | 'boolean' | 'object' | 'datetime'

Used in:

DefaultOptionsRule

Specifies the device-dependent default configuration properties for a component.

import { DefaultOptionsRule } from "devextreme/common"
Type:

Object

Direction

Specifies the animation direction for the "slideIn" and "slideOut" animation types.

Type:

Literal Union

Accepted Values: 'bottom' | 'left' | 'right' | 'top'

Used in:

DragDirection

Specifies the directions in which an item/row can be dragged.

Type:

Literal Union

Accepted Values: 'both' | 'horizontal' | 'vertical'

Used in:

DragHighlight

Specifies how to highlight the item/row's drop position.

Type:

Literal Union

Accepted Values: 'push' | 'indicate'

Used in:

EditorStyle

Specifies how the UI component's text field is styled.

Type:

Literal Union

Accepted Values: 'outlined' | 'underlined' | 'filled'

Used in:

ExportFormat

Specifies a set of export formats.

Type:

Literal Union

Accepted Values: 'GIF' | 'JPEG' | 'PDF' | 'PNG' | 'SVG'

Used in:

FieldChooserLayout

Specifies the field chooser layout.

Type:

Literal Union

Accepted Values: 0 | 1 | 2

Used in:

FirstDayOfWeek

Specifies the first day of a week.

Type:

Literal Union

Accepted Values: 0 | 1 | 2 | 3 | 4 | 5 | 6

Used in:

FloatingActionButtonDirection

Specifies the direction in which to open the speed dial menu.

Type:

Literal Union

Accepted Values: 'auto' | 'up' | 'down'

Used in:

Format

Specifies a predefined format.

Type:

Literal Union

Accepted Values: 'billions' | 'currency' | 'day' | 'decimal' | 'exponential' | 'fixedPoint' | 'largeNumber' | 'longDate' | 'longTime' | 'millions' | 'millisecond' | 'month' | 'monthAndDay' | 'monthAndYear' | 'percent' | 'quarter' | 'quarterAndYear' | 'shortDate' | 'shortTime' | 'thousands' | 'trillions' | 'year' | 'dayOfWeek' | 'hour' | 'longDateLongTime' | 'minute' | 'second' | 'shortDateShortTime'

Used in:

HorizontalAlignment

Specifies a position in the horizontal direction.

Type:

Literal Union

Accepted Values: 'center' | 'left' | 'right'

Used in:

HorizontalEdge

Specifies the position of a component's element relative to the component in the horizontal direction.

Type:

Literal Union

Accepted Values: 'left' | 'right'

Used in:

LabelMode

Specifies the label's display mode.

Type:

Literal Union

Accepted Values: 'static' | 'floating' | 'hidden' | 'outside'

Used in:

MaskMode

Specifies when the UI component shows the mask.

Type:

Literal Union

Accepted Values: 'always' | 'onFocus'

Used in:

Mode

Specifies an 'auto' mode.

Type:

Literal Union

Accepted Values: 'auto'

Used in:

Orientation

Specifies whether the UI component is oriented horizontally or vertically.

Type:

Literal Union

Accepted Values: 'horizontal' | 'vertical'

Used in:

PageLoadMode

Specifies whether the next page is loaded when a user scrolls the UI component to the bottom or when the "next" button is clicked.

Type:

Literal Union

Accepted Values: 'nextButton' | 'scrollBottom'

Used in:

PageOrientation

Specifies the page orientation.

Type:

Literal Union

Accepted Values: 'portrait' | 'landscape'

Used in:

Position

Specifies the position of the component's element.

Type:

Literal Union

Accepted Values: 'bottom' | 'left' | 'right' | 'top'

Used in:

PositionAlignment

Positions the UI component.

Type:

Literal Union

Accepted Values: 'bottom' | 'center' | 'left' | 'left bottom' | 'left top' | 'right' | 'right bottom' | 'right top' | 'top'

Used in:

ScrollbarMode

Specifies when the UI component shows the scrollbar.

Type:

Literal Union

Accepted Values: 'always' | 'never' | 'onHover' | 'onScroll'

Used in:

ScrollDirection

Specifies the available scrolling directions.

Type:

Literal Union

Accepted Values: 'both' | 'horizontal' | 'vertical'

Used in:

ScrollMode

Specifies the scrolling mode.

Type:

Literal Union

Accepted Values: 'standard' | 'virtual'

Used in:

SearchMode

Specifies a comparison operation used to search UI component items.

Type:

Literal Union

Accepted Values: 'contains' | 'startswith' | 'equals'

Used in:

SelectAllMode

Specifies the mode in which all items are selected.

Type:

Literal Union

Accepted Values: 'allPages' | 'page'

Used in:

SimplifiedSearchMode

Specifies a comparison operation used to search UI component items.

Type:

Literal Union

Accepted Values: 'contains' | 'startswith'

Used in:

SingleMultipleAllOrNone

Specifies whether the UI component enables an end-user to select only a single item, multiple items, all, or none.

Type:

Literal Union

Accepted Values: 'single' | 'multiple' | 'all' | 'none'

Used in:

SingleMultipleOrNone

Specifies whether the UI component enables an end-user to select only a single item, multiple items, or none.

Type:

Literal Union

Accepted Values: 'single' | 'multiple' | 'none'

Used in:

SingleOrMultiple

Specifies whether the UI component enables an end-user to select only a single item or multiple items.

Type:

Literal Union

Accepted Values: 'single' | 'multiple'

Used in:

SingleOrNone

Specifies whether the UI component enables an end-user to select only a single item or none.

Type:

Literal Union

Accepted Values: 'single' | 'none'

Used in:

SliderValueChangeMode

Specifies when to change the component's value.

Type:

Literal Union

Accepted Values: 'onHandleMove' | 'onHandleRelease'

Used in:

SortOrder

Specifies the sort order of column, header, field, or group summary values.

Type:

Literal Union

Accepted Values: 'asc' | 'desc'

Used in:

StoreType

Specifies the storage type the DataSource uses.

Type:

Literal Union

Accepted Values: 'array' | 'local' | 'odata'

Used in:

SubmenuShowMode

Specifies modes of submenu showing and hiding.

Type:

Literal Union

Accepted Values: 'onClick' | 'onHover'

Used in:

TabsIconPosition

Specifies icon position inside the tab.

Type:

Literal Union

Accepted Values: 'top' | 'end' | 'bottom' | 'start'

Used in:

TabsStyle

Specifies tab styling mode.

Type:

Literal Union

Accepted Values: 'primary' | 'secondary'

Used in:

TextBoxPredefinedButton

Specifies the predefined button for a textbox.

Type:

Literal Union

Accepted Values: 'clear'

Used in:

TextEditorButtonLocation

Specifies whether to place the button before or after the input text field.

Type:

Literal Union

Accepted Values: 'after' | 'before'

Used in:

ToolbarItemComponent

Specifies the UI component that presents a toolbar item.

Type:

Literal Union

Accepted Values: 'dxAutocomplete' | 'dxButton' | 'dxButtonGroup' | 'dxCheckBox' | 'dxDateBox' | 'dxDropDownButton' | 'dxMenu' | 'dxSelectBox' | 'dxSwitch' | 'dxTabs' | 'dxTextBox'

Used in:

ToolbarItemLocation

Specifies a location for the item on the toolbar.

Type:

Literal Union

Accepted Values: 'after' | 'before' | 'center'

Used in:

TooltipShowMode

Specifies when the UI component shows a tooltip.

Type:

Literal Union

Accepted Values: 'always' | 'onHover'

Used in:

ValidationMessageMode

Specifies how the message about the validation rules that are not satisfied by this editor's value is displayed.

Type:

Literal Union

Accepted Values: 'always' | 'auto'

Used in:

ValidationRule

Specifies a validation rule.

import { ValidationRule } from "devextreme/common"
Type:

AsyncRule

|

CompareRule

|

CustomRule

|

EmailRule

|

NumericRule

|

PatternRule

|

RangeRule

|

RequiredRule

|

StringLengthRule

ValidationRuleType

Specifies the validation rule type.

Type:

Literal Union

Accepted Values: 'required' | 'numeric' | 'range' | 'stringLength' | 'custom' | 'compare' | 'pattern' | 'email' | 'async'

Used in:

ValidationStatus

Specifies the validation status.

Type:

Literal Union

Accepted Values: 'valid' | 'invalid' | 'pending'

Used in:

VerticalAlignment

Specifies a position in the vertical direction.

Type:

Literal Union

Accepted Values: 'bottom' | 'center' | 'top'

Used in:

VerticalEdge

Specifies the position of a component's element relative to the component in the vertical direction.

Type:

Literal Union

Accepted Values: 'bottom' | 'top'

Used in: