Vue DataGrid - SummaryGroupItem

Specifies items of the group summary.

import { DxDataGridTypes } from "devextreme-vue/data-grid"

alignByColumn

Indicates whether to display group summary items in parentheses after the group row header or to align them by the corresponding columns within the group row.

Type:

Boolean

Default Value: false

column

Specifies the column that provides data for a group summary item.

Type:

String

Default Value: undefined

customizeText

Customizes the text to be displayed in the summary item.

Type:

Function

Function parameters:
itemInfo:

Object

The summary item's data.

Object structure:
Name Type Description
value

String

|

Number

|

Date

The summary item's value as it was calculated.
valueText

String

The summary item's formatted value.
Return Value:

String

The text for the summary item to display.

displayFormat

Specifies the summary item's text.

Type:

String

Default Value: undefined

name

Specifies the group summary item's identifier.

Type:

String

Default Value: undefined

showInColumn

Specifies the column that must hold the summary item when this item is displayed in the group footer or aligned by a column in the group row.

Type:

String

Default Value: undefined

showInGroupFooter

Specifies whether or not a summary item must be displayed in the group footer.

Type:

Boolean

Default Value: false

skipEmptyValues

Specifies whether to skip empty strings, null, and undefined values when calculating a summary. Does not apply when you use a remote data source.

Type:

Boolean

summaryType

Specifies how to aggregate data for the group summary item.

Type:

SummaryType

|

String

Default Value: undefined

valueFormat

Specifies a summary item value's display format.

Type:

Format

Default Value: undefined