# Coveo Matrix Component (CoveoMatrix)

The Matrix component uses the values of two fields (row and column) to display the results of the specified computed field in a table.

The user specifies the values to use for the columns. An IGroupByRequest operation performed at the same time as the main query retrieves the values to use for the rows.

In a way that is similar to the Facet component, selecting a Matrix cell allows the end user to drill down inside the results by restricting the row field and the column field to match the values of the selected cell.

Not supported in

  Coveo for Salesforce Free

## Index

### Methods

- debugInfo
- disable
- enable
- getBindings
- getCellElement
- getCellValue
- getSelectedColumnValue
- getSelectedRowValue
- selectCell
- get

### Properties

- bind
- componentOptionsModel
- componentStateModel
- data
- disabled
- logger
- queryController
- queryStateModel
- root
- searchInterface
- selectedColumnValue
- selectedRowValue
- ID

### Accessors

- usageAnalytics

### Component Options

- cellFontSize
- columnField
- columnFieldValues
- columnHeader
- columnLabels
- computedField
- computedFieldFormat
- computedFieldOperation
- enableColumnTotals
- enableHoverPreview
- enableRowTotals
- maximumNumberOfRows
- maximumNumberOfValuesInGroupBy
- previewDelay
- previewMaxWidth
- previewMinWidth
- previewSortCriteria
- previewSortField
- previewTemplate
- rowField
- sortCriteria
- title

### Constructors

- constructor

## Methods

### debugInfo

- debugInfo(): any

- Inherited from BaseComponent.debugInfo

  - Defined in ui/Base/BaseComponent.ts :41

  Return the debug info about this component.

  #### Returns any

### disable

- disable(): void

- Inherited from BaseComponent.disable

  - Defined in ui/Base/BaseComponent.ts :52

  Disable the component. Normally this means that the component will not execute handlers for the framework events (query events, for example). Components are enabled by default on creation.

  #### Returns void

### enable

- enable(): void

- Inherited from BaseComponent.enable

  - Defined in ui/Base/BaseComponent.ts :61

  Enable the component. Normally this means that the component will execute handlers for the framework events (query events, for example). Components are enabled by default on creation.

  #### Returns void

### getBindings

- getBindings(): IComponentBindings

- Inherited from Component.getBindings

  - Defined in ui/Base/Component.ts :328

  Return the bindings, or environment, for the current component.

  #### Returns IComponentBindings

### getCellElement

- getCellElement(rowNumber: number, columnNumber: number): HTMLElement

- - Defined in ui/Matrix/Matrix.ts :408

  Gets the HTMLElement associated to a cell.

  #### Parameters

  - ##### rowNumber: number

    The row number of the cell.

  - ##### columnNumber: number

    The column number of the cell.

  #### Returns HTMLElement

  The associated HTMLElement.

### getCellValue

- getCellValue(rowNumber: number, columnNumber: number): string

- - Defined in ui/Matrix/Matrix.ts :418

  Gets the string associated to a cell.

  #### Parameters

  - ##### rowNumber: number

    The row number of the cell.

  - ##### columnNumber: number

    The column number of the cell.

  #### Returns string

  The associated string.

### getSelectedColumnValue

- getSelectedColumnValue(): string

- - Defined in ui/Matrix/Matrix.ts :391

  Returns the currently selected column value.

  #### Returns string

### getSelectedRowValue

- getSelectedRowValue(): string

- - Defined in ui/Matrix/Matrix.ts :398

  Returns the currently selected row value.

  #### Returns string

### selectCell

- selectCell(rowNumber: number, columnNumber: number): void

- - Defined in ui/Matrix/Matrix.ts :363

  Selects a cell by its row and column number. Does not execute a query.

  #### Parameters

  - ##### rowNumber: number

    The row number of the cell to select.

  - ##### columnNumber: number

    The column number of the cell to select.

  #### Returns void

### Static get

- get(element: HTMLElement, componentClass?: any, noThrow?: boolean): BaseComponent

- Inherited from Component.get

  - Defined in ui/Base/Component.ts :410

  Get the bound component to the given HTMLElement. Throws an assert if the HTMLElement has no component bound, unless using the noThrow argument.
  If there is multiple component bound to the current HTMLElement, you must specify the component class.

  #### Parameters

  - ##### element: HTMLElement

    HTMLElement for which to get the bound component.

  - ##### Optional componentClass: any

    Optional component class. If the HTMLElement has multiple components bound, you must specify which one you are targeting.

  - ##### Optional noThrow: boolean

    Boolean option to tell the method to not throw on error.

  #### Returns BaseComponent

## Properties

### bind

bind: ComponentEvents

Inherited from Component.bind

- Defined in ui/Base/Component.ts :270

Allows the component to bind events and execute them only when it is enabled.

type

  {Coveo.ComponentEvents}

### componentOptionsModel

componentOptionsModel: ComponentOptionsModel

Inherited from Component.componentOptionsModel

- Defined in ui/Base/Component.ts :294

Contains the state of options for different components. Mainly used by ResultLink.

### componentStateModel

componentStateModel: ComponentStateModel

Inherited from Component.componentStateModel

- Defined in ui/Base/Component.ts :282

Contains the state of different components (enabled vs disabled). Allows to get/set values. Triggers component state event when modified. Each component can listen to those events.

### data

data: Cell[][]

- Defined in ui/Matrix/Matrix.ts :300

Holds the data for the Matrix.

### disabled

disabled: boolean

Inherited from BaseComponent.disabled

- Defined in ui/Base/BaseComponent.ts :23

A disabled component will not participate in the query, or listen to ComponentEvents.

type

  {boolean}

### logger

logger: Logger

Inherited from BaseComponent.logger

- Defined in ui/Base/BaseComponent.ts :18

Allows component to log in the dev console.

### queryController

queryController: QueryController

Inherited from Component.queryController

- Defined in ui/Base/Component.ts :286

Contains the singleton that allows to trigger queries.

### queryStateModel

queryStateModel: QueryStateModel

Inherited from Component.queryStateModel

- Defined in ui/Base/Component.ts :278

Contains the state of the query. Allows to get/set values. Trigger query state event when modified. Each component can listen to those events.

### root

root: HTMLElement

Inherited from Component.root

- Defined in ui/Base/Component.ts :274

A reference to the root HTMLElement (the SearchInterface).

### searchInterface

searchInterface: SearchInterface

Inherited from Component.searchInterface

- Defined in ui/Base/Component.ts :290

A reference to the root of every component, the SearchInterface.

### selectedColumnValue

selectedColumnValue: any

- Defined in ui/Matrix/Matrix.ts :313

The currently selected column value, or `undefined` if nothing is selected.

### selectedRowValue

selectedRowValue: string

- Defined in ui/Matrix/Matrix.ts :308

The currently selected row value, or `undefined` if nothing is selected.

### Static ID

ID: string

Inherited from BaseComponent.ID

- Defined in ui/Base/BaseComponent.ts :28

The static ID that each component needs in order to be identified.
For example, SearchButton -> static ID: SearchButton -> className: CoveoSearchButton

## Accessors

### usageAnalytics

- get (): IAnalyticsClient

- Inherited from Component.usageAnalytics

  - Defined in ui/Base/Component.ts :343

  A reference to the Analytics.client.

  #### Returns IAnalyticsClient

## Component Options

### cellFontSize

cellFontSize: string

- Defined in ui/Matrix/Matrix.ts :208

Specifies the font-size to use for displaying text inside the cells.

This option is mainly useful to prevent a Matrix containing many columns from cropping some of its values.

However, instead of using this option to solve this kind of issue, you could also remove some of the less important columns from your Matrix or modify the CSS of your page to allow the Matrix to occupy a larger space.

Default value is `''`.

Default

  ``

Markup configuration example(s) :

    data-cell-font-size='foo'

### columnField

columnField: IFieldOption

- Defined in ui/Matrix/Matrix.ts :97

Specifies the field to use for the columns.

Specifying a value for this options is required for this component to work.

Required

  Specifying a value for this option is required for the component to work

Markup configuration example(s) :

    data-column-field='@foo'

### columnFieldValues

columnFieldValues: string[]

- Defined in ui/Matrix/Matrix.ts :130

Specifies the field values to use for each column.

See also Matrix.options.columnLabels.

Default value is `[]`, which means that the Matrix will not generate any column (except the Total column, if Matrix.options.enableRowTotals is `true`).

Default

  `[]`

### columnHeader

columnHeader: string

- Defined in ui/Matrix/Matrix.ts :144

Specifies the label for the first column on the left as a description of the Matrix.options.columnField.

Default value is `undefined`.

Markup configuration example(s) :

    data-column-header='foo'

### columnLabels

columnLabels: string[]

- Defined in ui/Matrix/Matrix.ts :137

Specifies the label values to use for each column.

Default value is `[]`. The array set for this options should match the Matrix.options.columnFieldValues.

Default

  `[]`

### computedField

computedField: IFieldOption

- Defined in ui/Matrix/Matrix.ts :168

Specifies the field whose computed values you want to display in the cells.

Specifying a value for this options is required for this component to work.

Required

  Specifying a value for this option is required for the component to work

Markup configuration example(s) :

    data-computed-field='@foo'

### computedFieldFormat

computedFieldFormat: string

- Defined in ui/Matrix/Matrix.ts :196

Specifies how to format the values resulting from a Matrix.options.computedFieldOperation.

The Globalize library defines all available formats (see Globalize).

The most commonly used formats are:

- `c0` - Formats the value as a currency.
- `n0` - Formats the value as an integer.
- `n2` - Formats the value as a floating point with 2 decimal digits.

Default value is `c0`.

Default

  `c0`

Markup configuration example(s) :

    data-computed-field-format='foo'

### computedFieldOperation

computedFieldOperation: string

- Defined in ui/Matrix/Matrix.ts :181

Specifies the type of aggregate operation to perform on the Matrix.options.computedField.

The possible values are:

- `sum` - Computes the sum of the computed field values.
- `average` - Computes the average of the computed field values.
- `minimum` - Finds the minimum value of the computed field values.
- `maximum` - Finds the maximum value of the computed field values.

Default value is `sum`.

Default

  `sum`

Markup configuration example(s) :

    data-computed-field-operation='foo'

### enableColumnTotals

enableColumnTotals: boolean

- Defined in ui/Matrix/Matrix.ts :161

Specifies whether to add a Total row containing the total of each column.

Default value is `true`

Default

  `true`

Markup configuration example(s) :

    data-enable-column-totals='true'
    data-enable-column-totals='false'

### enableHoverPreview

enableHoverPreview: boolean

- Defined in ui/Matrix/Matrix.ts :219

Specifies whether to show a preview popup of cell results when hovering over a cell.

See also Matrix.options.previewSortCriteria, Matrix.options.previewMaxWidth, Matrix.options.previewMinWidth, Matrix.options.previewDelay and Matrix.options.previewTemplate.

Default value is `true`.

Default

  `true`

Markup configuration example(s) :

    data-enable-hover-preview='true'
    data-enable-hover-preview='false'

### enableRowTotals

enableRowTotals: boolean

- Defined in ui/Matrix/Matrix.ts :120

Specifies whether to display a Total column containing the sum of each row.

Default value is `true`.

Default

  `true`

Markup configuration example(s) :

    data-enable-row-totals='true'
    data-enable-row-totals='false'

### maximumNumberOfRows

maximumNumberOfRows: number

- Defined in ui/Matrix/Matrix.ts :113

Specifies the maximum number of rows to display in the Matrix.

Default value is `10`. Minimum value is `0`.

Minimum

  `0`

Default

  `10`

Markup configuration example(s) :

    data-maximum-number-of-rows='10'

### maximumNumberOfValuesInGroupBy

maximumNumberOfValuesInGroupBy: number

- Defined in ui/Matrix/Matrix.ts :154

Specifies the maximum number of results to include in the IGroupByRequest for the columns.

This value should always be greater than the Matrix.options.maximumNumberOfRows. If it is too small, some of the results will not be displayed in the Matrix.

Default value is `100`. Minimum value is `0`.

Minimum

  `0`

Default

  `100`

Markup configuration example(s) :

    data-maximum-number-of-values-in-group-by='10'

### previewDelay

previewDelay: number

- Defined in ui/Matrix/Matrix.ts :273

If Matrix.options.enableHoverPreview is `true`, specifies the delay (in milliseconds) before sending the query to get the preview results.

Default value is `500`.

Default

  `500`

Markup configuration example(s) :

    data-preview-delay='10'

### previewMaxWidth

previewMaxWidth: string

- Defined in ui/Matrix/Matrix.ts :257

If Matrix.options.enableHoverPreview is `true`, specifies the maximum width (in pixels) of the preview popup.

Default value is `500px`.

Default

  `500px`

Markup configuration example(s) :

    data-preview-max-width='foo'

### previewMinWidth

previewMinWidth: string

- Defined in ui/Matrix/Matrix.ts :265

If Matrix.options.enableHoverPreview is `true`, specifies the minimum width (in pixels) of the preview popup.

Default value is `0`.

Default

  `0`

Markup configuration example(s) :

    data-preview-min-width='foo'

### previewSortCriteria

previewSortCriteria: string

- Defined in ui/Matrix/Matrix.ts :241

If Matrix.options.enableHoverPreview is `true`, specifies the criteria to use for sorting the results of the hover preview.

The available sort criteria values are the same as those of the IQuery.

The possible values are:

- `relevancy`: Uses all configured ranking weights and any specified ranking expressions to sort the results.
- `dateascending` / `datedescending`: Sorts the results using the `@date` field value, which is typically the last modification date of an item in the index.
- `qre`: Sorts the results using only the weights applied by ranking expressions. Using `qre` is much like using `relevancy`, except that `qre` does not compute automatic weights, such as weights based on keyword proximity.
- `nosort`: Does not sort the results. Using `nosort` returns the items in an essentially random order.
- `fieldascending` / `fielddescending`: Sorts the results using the value of a custom field.
- `fieldascending` / `fielddescending`: Sorts the results using the value of a custom field.

See also Matrix.options.previewSortField.

Default value is `FieldDescending`.

Default

  `FieldDescending`

Markup configuration example(s) :

    data-preview-sort-criteria='foo'

### previewSortField

previewSortField: IFieldOption

- Defined in ui/Matrix/Matrix.ts :249

If Matrix.options.previewSortCriteria is `fieldascending` or `fielddescending`, specifies the field to use for sorting the results of the hover preview.

Default value is the value of Matrix.options.computedField.

Markup configuration example(s) :

    data-preview-sort-field='@foo'

### previewTemplate

previewTemplate: Template

- Defined in ui/Matrix/Matrix.ts :294

If Matrix.options.enableHoverPreview is `true`, specifies the template ID or CSS selector of the template to use to render the results of the hover preview.

You must use either `data-template-id` or `data-template-selector` in the markup to specify a value for this option.

Examples:

Specifying what template to use by referring to its template ID:

    <div class='CoveoMatrix' data-template-id='TemplateId'></div>

Specifying what template to use by referring to its CSS selector:

    <div class='CoveoMatrix' data-template-selector='.templateSelector'></div>

### rowField

rowField: IFieldOption

- Defined in ui/Matrix/Matrix.ts :90

Specifies the field to use for the rows.

Specifying a value for this options is required for this component to work.

Required

  Specifying a value for this option is required for the component to work

Markup configuration example(s) :

    data-row-field='@foo'

### sortCriteria

sortCriteria: string

- Defined in ui/Matrix/Matrix.ts :106

Specifies the criteria to use for sorting the rows.

See IGroupByRequest.sortCriteria for the list of possible values.

Default value is `computedfielddescending`.

Default

  `computedfielddescending`

Markup configuration example(s) :

    data-sort-criteria='foo'

### title

title: string

- Defined in ui/Matrix/Matrix.ts :83

Specifies the text to display at the top of the Matrix.

Markup configuration example(s) :

    data-title='foo'

## Constructors

### constructor

- new Matrix(element: HTMLElement, options?: IMatrixOptions, bindings?: IComponentBindings): Matrix

- Overwrites Component.constructor

  - Defined in ui/Matrix/Matrix.ts :317

  Creates a new Matrix. Also verifies whether options are valid and coherent. Binds query events.

  #### Parameters

  - ##### element: HTMLElement

    The HTMLElement on which to instantiate the component.

  - ##### Optional options: IMatrixOptions

    The options for the Matrix component.

  - ##### Optional bindings: IComponentBindings

    The bindings that the component requires to function normally. If not set, these will be automatically resolved (with a slower execution time).

  #### Returns Matrix