A plugin that renders the table’s header row. The Column’s title field specifies the column’s title in the header row.
The plugin also allows you to manage a column’s sorting and grouping state.
Import
Use the following statement to import a plugin with embedded theme components:
import { DxTableHeaderRow } from '@devexpress/dx-vue-grid-bootstrap4';
You can import a themeless plugin if you want to use custom components:
import { DxTableHeaderRow } from '@devexpress/dx-vue-grid';
User Reference
Dependencies
Properties
| Name |
Type |
Default |
Description |
| cellComponent |
DxTableHeaderRow.DxCell |
|
A component that renders a header cell. |
| rowComponent |
DxTableHeaderRow.DxRow |
|
A component that renders a header row. |
| showSortingControls? |
boolean |
false |
Specifies whether to render controls that toggle the column’s sorting state. Requires DxSortingState. |
| showGroupingControls? |
boolean |
false |
Specifies whether to display a button that groups data by column. Requires DxGroupingState. |
Component Types
Props
| Field |
Type |
Description |
| tableRow |
TableRow |
Specifies a table row. |
| tableColumn |
TableColumn |
Specifies a table column. |
| colSpan? |
number |
The count of columns that the root cell element spans. |
| rowSpan? |
number |
The count of rows that the root cell element spans. |
| column |
Column |
A column object associated with a header cell. |
| showSortingControls |
boolean |
Specifies whether to render controls that toggle the column’s sorting state. |
| sortingEnabled |
boolean |
Specifies whether sorting by a column is enabled. |
| sortingDirection? |
‘asc’ | ‘desc’ |
Specifies the associated column’s sorting direction. |
| showGroupingControls |
boolean |
Specifies whether to display a button that groups data by column. |
| groupingEnabled |
boolean |
Specifies whether grouping by a column is enabled. |
Events
| Field |
Type |
Description |
| sort |
(parameters: { direction?: ‘asc’ | ‘desc’ | null, keepOther?: boolean }) => void |
An event that initiates changing the column sorting direction. Keeps the current sorting state if keepOther is set to true. Cancels sorting by the current column if direction is set to null. |
| group |
() => void |
An event that invokes grouping by the associated column. |
Slots
| Field |
Description |
| before |
The Vue slot containing controls that are rendered before the column title. |
Props
| Field |
Type |
Description |
| tableRow |
TableRow |
A table row. |
Slots
| Field |
Description |
| default |
The default Vue slot. |
Plugin Components
Plugin Developer Reference
Imports
| Name |
Plugin |
Type |
Description |
| tableHeaderRows |
Getter |
Array<TableRow> |
Header rows to be rendered. |
| tableColumns |
Getter |
Array<TableColumn> |
Table columns. |
| sorting |
Getter |
Array<Sorting> |
Columns’ sorting state. |
| changeColumnSorting |
Action |
({ columnName: string, direction?: ‘asc’ | ‘desc’ | null, keepOther?: boolean | Array<String>, sortIndex?: number }) => void |
Changes the column sorting direction. keepOther accepts true (keeps existing sorting), a column name array (keeps sorting by specified columns) and false (resets sorting). Set direction to null to cancel sorting by the current column. If sortIndex is omitted, the sorting is added to the end of the sorting list. |
| changeColumnGrouping |
Action |
({ columnName: string, groupIndex?: number }) => void |
Groups data by a specified column or cancels grouping. If groupIndex is omitted, the group is added to the end of the group list. |
| isColumnSortingEnabled |
Getter |
(columnName: string) => boolean |
A function that returns a Boolean value that defines if sorting by a column is enabled. |
| isColumnGroupingEnabled |
Getter |
(columnName: string) => boolean |
A function that returns a Boolean value that defines if grouping by a column is enabled. |
| tableCell |
Template |
object? |
A template that renders a table cell. |
| tableRow |
Template |
object? |
A template that renders a table row. |
Exports
| Name |
Plugin |
Type |
Description |
| tableHeaderRows |
Getter |
Array<TableRow> |
Table header rows. |