If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React from 'react';
import 'devextreme-react/text-area';
import Form, {
SimpleItem, GroupItem, TabbedItem, TabPanelOptions, Tab,
} from 'devextreme-react/form';
import GroupCaption from './GroupCaption.tsx';
import service from './data.ts';
const employee = service.getEmployee();
const groupCaptionNamedRender = (iconName) => {
const groupCaptionRender = (data) =>
(
<GroupCaption
iconName={iconName}
{data}
/>
);
return groupCaptionRender;
}
export default function App() {
return (
<React.Fragment>
<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>
</React.Fragment>
);
}
xxxxxxxxxx
import React from 'react';
import 'devextreme-react/text-area';
import Form, {
SimpleItem,
GroupItem,
TabbedItem,
TabPanelOptions,
Tab,
} from 'devextreme-react/form';
import GroupCaption from './GroupCaption.js';
import service from './data.js';
const employee = service.getEmployee();
const groupCaptionNamedRender = (iconName) => {
const groupCaptionRender = (data) => (
<GroupCaption
iconName={iconName}
{data}
/>
);
return groupCaptionRender;
};
export default function App() {
return (
<React.Fragment>
<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>
</React.Fragment>
);
}
xxxxxxxxxx
import React from "react";
const GroupCaption = ({ iconName, caption }) => (
<React.Fragment>
<i className={`dx-icon dx-icon-${iconName}`}></i>
<span>{caption}</span>
</React.Fragment>
);
export default GroupCaption;
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
xxxxxxxxxx
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;
},
};
xxxxxxxxxx
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': 'bundles/',
'externals:': 'bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// 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',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
xxxxxxxxxx
import React from 'react';
const GroupCaption = ({ iconName, caption }) => (
<React.Fragment>
<i className={`dx-icon dx-icon-${iconName}`}></i>
<span>{caption}</span>
</React.Fragment>
);
export default GroupCaption;
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
xxxxxxxxxx
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;
},
};
xxxxxxxxxx
<html lang="en">
<head></head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
xxxxxxxxxx
.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.