React Form - Grouping

You can organize Form items in groups and tabs. To do this, declare Group and Tabbed items in the items[] array. Each group and tab can have their own layout and contain other item types.

TS JS

Backend API

import React from 'react'; import 'devextreme-react/text-area'; import Form, { GroupItem, SimpleItem, Tab, TabbedItem, TabPanelOptions, } from 'devextreme-react/form'; import GroupCaption from './GroupCaption.tsx'; import type { GroupCaptionProps } from './GroupCaption.tsx'; import { employee } from './data.ts'; const groupCaptionNamedRender = (iconName: string) => (data: GroupCaptionProps) => ( <GroupCaption {...data} iconName={iconName} /> ); export default function App() { return ( <> <div className="long-title"><h3>Personal details</h3></div> <div className="form-container"> <Form colCount={2} id="form" formData={employee}> <GroupItem captionRender={groupCaptionNamedRender('info')} caption="System Information"> <SimpleItem dataField="ID" /> <GroupItem captionRender={groupCaptionNamedRender('user')} caption="Main Information"> <SimpleItem dataField="FirstName" /> <SimpleItem dataField="LastName" /> <SimpleItem dataField="HireDate" /> <SimpleItem dataField="Position" /> <SimpleItem dataField="OfficeNo" /> </GroupItem> </GroupItem> <GroupItem captionRender={groupCaptionNamedRender('card')} caption="Personal Data"> <SimpleItem dataField="BirthDate" /> <GroupItem captionRender={groupCaptionNamedRender('home')} caption='Home Address'> <SimpleItem dataField="Address" /> <SimpleItem dataField="City" /> <SimpleItem dataField="State" /> <SimpleItem dataField="Zipcode" /> </GroupItem> </GroupItem> <GroupItem captionRender={groupCaptionNamedRender('tel')} caption="Contact Information"> <TabbedItem> <TabPanelOptions deferRendering={false} /> <Tab title="Phone"> <SimpleItem dataField="Phone" /> </Tab> <Tab title="Skype"> <SimpleItem dataField="Skype" /> </Tab> <Tab title="Email"> <SimpleItem dataField="Email" /> </Tab> </TabbedItem> </GroupItem> </Form> </div> </> ); }

import React from 'react'; import 'devextreme-react/text-area'; import Form, { GroupItem, SimpleItem, Tab, TabbedItem, TabPanelOptions, } from 'devextreme-react/form'; import GroupCaption from './GroupCaption.js'; import { employee } from './data.js'; const groupCaptionNamedRender = (iconName) => (data) => ( <GroupCaption {...data} iconName={iconName} /> ); export default function App() { return ( <> <div className="long-title"> <h3>Personal details</h3> </div> <div className="form-container"> <Form colCount={2} id="form" formData={employee} > <GroupItem captionRender={groupCaptionNamedRender('info')} caption="System Information" > <SimpleItem dataField="ID" /> <GroupItem captionRender={groupCaptionNamedRender('user')} caption="Main Information" > <SimpleItem dataField="FirstName" /> <SimpleItem dataField="LastName" /> <SimpleItem dataField="HireDate" /> <SimpleItem dataField="Position" /> <SimpleItem dataField="OfficeNo" /> </GroupItem> </GroupItem> <GroupItem captionRender={groupCaptionNamedRender('card')} caption="Personal Data" > <SimpleItem dataField="BirthDate" /> <GroupItem captionRender={groupCaptionNamedRender('home')} caption="Home Address" > <SimpleItem dataField="Address" /> <SimpleItem dataField="City" /> <SimpleItem dataField="State" /> <SimpleItem dataField="Zipcode" /> </GroupItem> </GroupItem> <GroupItem captionRender={groupCaptionNamedRender('tel')} caption="Contact Information" > <TabbedItem> <TabPanelOptions deferRendering={false} /> <Tab title="Phone"> <SimpleItem dataField="Phone" /> </Tab> <Tab title="Skype"> <SimpleItem dataField="Skype" /> </Tab> <Tab title="Email"> <SimpleItem dataField="Email" /> </Tab> </TabbedItem> </GroupItem> </Form> </div> </> ); }

import React from 'react'; export interface GroupCaptionProps { iconName: string; caption: string; } const GroupCaption = ({ iconName, caption }: GroupCaptionProps) => ( <> <i className={`dx-icon dx-icon-${iconName}`}></i> <span>{caption}</span> </> ); export default GroupCaption;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

import type { Employee } from './types.ts'; export const employee: Employee = { ID: 1, FirstName: 'John', LastName: 'Heart', CompanyName: 'Super Mart of the West', Position: 'CEO', OfficeNo: '901', BirthDate: new Date(1964, 2, 16), HireDate: new Date(1995, 0, 15), Address: '351 S Hill St.', City: 'Los Angeles', State: 'CA', Zipcode: '90013', Phone: '(213) 555-9392', Email: 'jheart@dx-email.com', Skype: 'jheart_DX_skype', };

export type Employee = { ID: number; FirstName: string; LastName: string; CompanyName: string; Position: string; OfficeNo: string; BirthDate: Date; HireDate: Date; Address: string; City: string; State: string; Zipcode: string; Phone: string; Email: string; Skype: string; };

import React from 'react'; const GroupCaption = ({ iconName, caption }) => ( <> <i className={`dx-icon dx-icon-${iconName}`}></i> <span>{caption}</span> </> ); export default GroupCaption;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

export const employee = { ID: 1, FirstName: 'John', LastName: 'Heart', CompanyName: 'Super Mart of the West', Position: 'CEO', OfficeNo: '901', BirthDate: new Date(1964, 2, 16), HireDate: new Date(1995, 0, 15), Address: '351 S Hill St.', City: 'Los Angeles', State: 'CA', Zipcode: '90013', Phone: '(213) 555-9392', Email: 'jheart@dx-email.com', Skype: 'jheart_DX_skype', };

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> <script src="bundles/vendor/react.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

.form-container { margin: 10px; } .long-title h3 { font-size: 24px; text-align: center; line-height: 2em; } .dx-form-group-custom-caption .dx-icon { color: var(--dx-color-spin-icon); } .dx-form-group-custom-caption span { line-height: 1; }

To create a group item, assign "group" to the itemType property. To specify a group's title, use the caption property. To replace a group's title with custom content, implement a caption template. This demo shows three groups. The Personal Data group is nested in the System Information group.

To create a tabbed item, assign "tabbed" to the itemType property. This demo shows a tabbed item nested in the Contact Information group. The Form uses the TabPanel component to display tabs. You can specify the TabPanel's properties in the tabPanelOptions object. This demo disables the deferRendering property to render TabPanel's content immediately.