A plugin that renders the grouping panel used to display group names.
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';| 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. |
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. |
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. |
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. |
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. |
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. |
| 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.