Grouped Fields
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.
To create a group item, assign "group" to the itemType property. To specify a group's title, use the caption property. 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.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
import React from 'react';
import 'devextreme-react/text-area';
import Form, { SimpleItem, GroupItem, TabbedItem, TabPanelOptions, Tab } from 'devextreme-react/form';
import service from './data.js';
class App extends React.Component {
constructor(props) {
super(props);
this.employee = service.getEmployee();
}
render() {
return (
<React.Fragment>
<div className="long-title"><h3>Personal details</h3></div>
<div className="form-container">
<Form
colCount={2}
id="form"
formData={this.employee}>
<GroupItem caption="System Information">
<SimpleItem dataField="ID" />
<SimpleItem dataField="FirstName" />
<SimpleItem dataField="LastName" />
<SimpleItem dataField="HireDate" />
<SimpleItem dataField="Position" />
<SimpleItem dataField="OfficeNo" />
</GroupItem>
<GroupItem caption="Personal Data">
<SimpleItem dataField="BirthDate" />
<GroupItem caption='Home Address'>
<SimpleItem dataField="Address" />
<SimpleItem dataField="City" />
<SimpleItem dataField="State" />
<SimpleItem dataField="Zipcode" />
</GroupItem>
</GroupItem>
<GroupItem 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>
</React.Fragment>
);
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(
<App />,
document.getElementById('app')
);
<!DOCTYPE html>
<html>
<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=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.7/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.7/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="styles.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import('./index.js');
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
.form-container {
margin: 10px;
}
.long-title h3 {
font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
}
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': '+1(213) 555-9392',
'Email': 'jheart@dx-email.com',
'Skype': 'jheart_DX_skype'
};
export default {
getEmployee() {
return employee;
}
};
System.config({
transpiler: 'plugin-babel',
meta: {
'devextreme/localization.js': {
"esModule": true
},
},
paths: {
'npm:': 'https://unpkg.com/'
},
defaultExtension: 'js',
map: {
'react': 'npm:react@16.14.0/umd/react.development.js',
'react-dom': 'npm:react-dom@16.14.0/umd/react-dom.development.js',
'prop-types': 'npm:prop-types@15.7.2/prop-types.js',
'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.26.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@20.2.7',
'devextreme-react': 'npm:devextreme-react@20.2.7',
'jszip': 'npm:jszip@3.6.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@0.10.3/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.0.23/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@2.0.29/dist/dx-gantt.js',
'preact': 'npm:preact@10.5.13/dist/preact.js',
'preact/hooks': 'npm:preact@10.5.13/hooks/dist/hooks.js',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js'
},
packages: {
'devextreme': {
defaultExtension: 'js'
},
'devextreme-react': {
main: 'index.js'
},
'devextreme/events/utils': {
main: 'index'
},
'devextreme/events': {
main: 'index'
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js'
}
},
babelOptions: {
sourceMaps: false,
stage0: true,
react: true
}
});