GroupingPanel Plugin Reference

A plugin that renders the grouping panel used to display group names.

Import

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

import { GroupingPanel } from '@devexpress/dx-react-scheduler-material-ui';

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

import { GroupingPanel } from '@devexpress/dx-react-scheduler';

User Reference

Dependencies

Properties

Name Type Default Description
horizontalLayoutComponent ComponentType<GroupingPanel.HorizontalLayoutProps> A component that renders the grouping panel horizontally.
verticalLayoutComponent ComponentType<GroupingPanel.HorizontalLayoutProps> A component that renders the grouping panel vertically.
rowComponent ComponentType<GroupingPanel.RowProps> A component that renders a row on the grouping panel.
cellComponent ComponentType<GroupingPanel.CellProps> A component that renders a cell in a row on the grouping panel.

Interfaces

Group

Describes a group.

Field Type Description
id number | string The ID of the resource the appointments are grouped by.
text string The resource's title used as a group name.
fieldName string The resource's fieldName.

GroupingPanel.HorizontalLayoutProps

Describes properties passed to a component that renders the grouping panel horizontally.

Field Type Description
groups Array<Array<Group>> Specifies the final representation of Scheduler's groups and the order they will be rendered in.
colSpan number The layout's length measured in timetable cells.
cellStyle object The CSS styles of a cell on the grouping panel.
showHeaderForEveryDate? boolean Specifies whether to show group headings for every date or not.
rowComponent ComponentType<GroupingPanel.RowProps> A component that renders a row on the grouping panel.
cellComponent ComponentType<GroupingPanel.CellProps> A component that renders a cell in a row on the grouping panel.

GroupingPanel.VerticalLayoutProps

Describes properties passed to a component that renders the grouping panel vertically.

Field Type Description
groups Array<Array<Group>> Groups in the order in which they should be rendered.
rowSpan number The number of rows in the timetable.
viewType string The view in which the layout is rendered.
rowComponent ComponentType<GroupingPanel.RowProps> A component that renders a row on the grouping panel.
cellComponent ComponentType<GroupingPanel.CellProps> A component that renders a cell in a row on the grouping panel.

GroupingPanel.RowProps

Describes properties passed to a component that renders a row on the grouping panel.

Field Type Description
children? ReactNode A React node used to render the row's content.

GroupingPanel.CellProps

Describes properties passed to a component that renders a cell in a row on the grouping panel.

Field Type Description
group Group The group the cell represents.
colSpan number The number of columns the cell spans.
rowSpan? number The number of rows the cell spans.
left number The cell's offset from the left.
height? number The cell's height.
topOffSet? number The distance between the cell's text and the top edge of the Scheduler.
textStyle? object CSS properties to be applied to the cell's text.
groupOrientation? GroupOrientation The orientation of groups: Vertical or Horizontal.
endOfGroup? boolean true if this cell is last in its group.
groupedByDate? boolean Indicates whether grouping by date is enabled. Takes its value from the groupByDate property of the GroupingState plugin.
children? ReactNode A React node used to render additional content to the cell.

Plugin Components

Name Properties Description
GroupingPanel.HorizontalLayout GroupingPanel.HorizontalLayoutProps A component that renders the grouping panel horizontally.
GroupingPanel.VerticalLayout GroupingPanel.VerticalLayoutProps A component that renders the grouping panel vertically.
GroupingPanel.Row GroupingPanel.RowProps A component that renders a row on the grouping panel.
GroupingPanel.Cell GroupingPanel.CellProps A component that renders a cell in a row on the grouping panel.

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