DevExtremeReactive
Version 4.0.8DemosDocsBlogGitHubBuy

TableHeaderRow Plugin Reference

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 and initiate column dragging.

Import

Use the following statement to import a plugin with embedded theme components:

import { TableHeaderRow } from '@devexpress/dx-react-grid-material-ui';
// import { TableHeaderRow } from '@devexpress/dx-react-grid-bootstrap4';
// import { TableHeaderRow } from '@devexpress/dx-react-grid-bootstrap3';

If you want to use custom components, you can import the themeless plugin:

import { TableHeaderRow } from '@devexpress/dx-react-grid';

User Reference

Dependencies

Properties

Name Type Default Description
cellComponent ComponentType<TableHeaderRow.CellProps> A component that renders a header cell.
rowComponent ComponentType<Table.RowProps> A component that renders a header row.
contentComponent ComponentType<TableHeaderRow.ContentProps> A component that renders a header cell's content.
sortLabelComponent ComponentType<TableHeaderRow.SortLabelProps> A component that renders a sort label.
titleComponent ComponentType<object> A component that renders a title.
groupButtonComponent ComponentType<TableHeaderRow.GroupButtonProps> A component that renders a group button.
showSortingControls? boolean false Specifies whether to render controls that toggle the column's sorting state. Requires the SortingState dependency.
showGroupingControls? boolean false Specifies whether to display a button that groups data by column. Requires the GroupingState dependency.
messages? TableHeaderRow.LocalizationMessages An object that specifies localization messages.

Interfaces

TableHeaderRow.CellProps

Describes properties used to render a table header cell.

Extends Table.CellProps

Field Type Description
column Column A column object associated with the header cell.
resizingEnabled boolean Specifies whether the column's resizing is enabled.
onWidthChange (parameters: { shift: number }) => void An event that initiates the column width change. The initial column width increases by the shift value or decreases if shift is negative.
onWidthDraft (parameters: { shift: number }) => void An event that changes the column width used for preview. The initial column width increases by the shift value or decreases if shift is less than zero.
onWidthDraftCancel () => void An event that cancels the column width change used for preview.
draggingEnabled boolean Specifies whether drag-and-drop is enabled.
children ReactNode The header cell's children.

TableHeaderRow.SortLabelProps

Describes properties used to render a sort label.

Field Type Description
column Column A column object associated with the sort label.
align string The sort label alignment.
direction 'asc' | 'desc' The sorting direction.
onSort (parameters: { direction?: 'asc' | 'desc' | null, keepOther?: boolean }) => void An event that invokes a sorting direction change. Keeps the current sorting state if keepOther is set to true. Cancels sorting by the current column if direction is set to null.
disabled boolean Specifies whether the sort label is disabled.
getMessage (messageKey: string) => string Returns the sort label's text.
children ReactNode The sort label's children.

TableHeaderRow.ContentProps

Describes properties used to render a cell content.

Field Type Description
column Column A column object associated with the cell content.
align string The content alignment.
children ReactNode The content's children.

TableHeaderRow.GroupButtonProps

Describes properties used to render a group button.

Field Type Description
disabled boolean Specifies whether the group button is disabled.
onGroup () => void An event that invokes grouping by the associated column.

Localization Messages

Field Type Default Description
sortingHint? string 'Sort' Specifies the 'Sort' hint's text. Available in the "@devexpress/dx-react-grid-material-ui" package.

Plugin Components

Name Properties Description
TableHeaderRow.Row Table.RowProps A component that renders a header row.
TableHeaderRow.Cell TableHeaderRow.CellProps A component that renders a header cell.
TableHeaderRow.Content TableHeaderRow.ContentProps A component that renders a cell content.
TableHeaderRow.SortLabel TableHeaderRow.SortLabelProps A component that renders a sort label.
TableHeaderRow.Title object A component that renders a title.
TableHeaderRow.GroupButton TableHeaderRow.GroupButtonProps A component that renders a group button.

Additional properties are added to the component's root element.

Static Fields

Field Type Description
ROW_TYPE symbol The header row type's identifier.

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.
tableColumnResizingEnabled Getter boolean Specifies whether table column resizing is enabled.
changeTableColumnWidth Action ({ columnName: string, shift: number }) => void Changes the column width. The initial column width increases by the shift value or decreases if shift is negative.
draftTableColumnWidth Action ({ columnName: string, shift: number }) => void Changes the column width used for preview. The initial column width increases by the shift value or decreases if shift is less than zero.
cancelTableColumnWidthDraft Action () => void Cancels changes to the column width used for preview.
draggingEnabled Getter boolean Specifies whether drag-and-drop is enabled.
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 Table.CellProps A template that renders a table cell.
tableRow Template Table.RowProps A template that renders a table row.

Exports

Name Plugin Type Description
tableHeaderRows Getter Array<TableRow> Table header rows.
tableHeaderCellBefore Template object? A template used to prepend additional components to the header table cell.

Grid

Chart

Scheduler

Common Concepts

Core