Create a Group
In the context of the Form UI component, a group is called "group item". A group item can contain simple items, other groups, tabs or empty items. To create a group item, assign "group" to the itemType property. Items nested in the group are configured in the items array. To add a caption to the group, specify the caption property.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { Form, GroupItem, SimpleItem } from 'devextreme-react/form';
- const employee = {
- firstName: 'John',
- lastName: 'Heart',
- position: 'CEO',
- phone: '+1(213) 555-9392',
- email: 'jheart@dx-email.com'
- };
- class App extends React.Component {
- render() {
- return (
- <Form formData={employee}>
- <GroupItem caption="Personal Data">
- <SimpleItem dataField="firstName" />
- <SimpleItem dataField="lastName" />
- <SimpleItem dataField="position" />
- </GroupItem>
- <GroupItem caption="Contacts">
- <SimpleItem dataField="phone" />
- <SimpleItem dataField="email" />
- </GroupItem>
- </Form>
- );
- }
- }
- export default App;
Columns within a Group
Items within a group can be organized in several columns. To specify the number of columns, use the colCount property. Note that the entire Form layout can also be organized in columns if the colCount property is declared on the root level. In this case, use the colSpan property to define how many general columns the group must span.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { Form, GroupItem, SimpleItem } from 'devextreme-react/form';
- const employee = {
- firstName: 'John',
- lastName: 'Heart',
- position: 'CEO',
- phone: '+1(213) 555-9392',
- email: 'jheart@dx-email.com'
- };
- class App extends React.Component {
- render() {
- return (
- <Form
- formData={employee}
- colCount={2}>
- <GroupItem
- caption="Personal Data"
- colSpan={2}
- colCount={3}>
- <SimpleItem dataField="firstName" />
- <SimpleItem dataField="lastName" />
- <SimpleItem dataField="position" />
- </GroupItem>
- <GroupItem caption="Contacts">
- <SimpleItem dataField="phone" />
- <SimpleItem dataField="email" />
- </GroupItem>
- </Form>
- );
- }
- }
- export default App;
Custom Content within a Group
The Form UI component allows you to place custom content, for example, an image, under the group caption.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { Form, GroupItem, SimpleItem } from 'devextreme-react/form';
- const employee = {
- firstName: 'John',
- lastName: 'Heart',
- picture: 'http://here/goes/the/picture.jpg'
- };
- class App extends React.Component {
- render() {
- return (
- <Form formData={employee}>
- <GroupItem
- caption="Picture"
- render={pictureRender} />
- <GroupItem caption="Personal Data">
- <SimpleItem dataField="firstName" />
- <SimpleItem dataField="lastName" />
- </GroupItem>
- </Form>
- );
- }
- }
- function pictureRender(data) {
- return (
- <img src={data.formData.picture}/>
- );
- }
- export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.