React Form - In Columns

Fixed and Floating Number of Columns

The Form UI component can have a fixed number of columns in the layout...

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        formData: {
            firstName: "John",
            lastName: "Heart",
            position: "CEO"
        },
        colCount: 3
    });
});
Angular
HTML
TypeScript
<dx-form
    [(formData)]="employee"
    [colCount]="3">
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart",
        position: "CEO"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxForm
        :form-data="employee"
        :col-count="3">
        <DxSimpleItem data-field="firstName" />
        <DxSimpleItem data-field="lastName" />
        <DxSimpleItem data-field="position" />
    </DxForm>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxForm, DxSimpleItem } from 'devextreme-vue/form';

export default {
    components: {
        DxForm,
        DxSimpleItem
    },
    data() {
        return {
            employee: {
                firstName: 'John',
                lastName: 'Heart',
                position: 'CEO'
            }
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { Form, SimpleItem } from 'devextreme-react/form';

class App extends React.Component {
    employee = {
        firstName: 'John',
        lastName: 'Heart',
        position: 'CEO'
    }

    render() {
        return (
            <Form
                formData={this.employee}
                colCount={3}>
                <SimpleItem dataField="firstName" />
                <SimpleItem dataField="lastName" />
                <SimpleItem dataField="position" />
            </Form>
        );
    }
}
export default App;

... or it can vary the number of columns depending on the width of the container. To enable the latter mode, assign "auto" to the colCount property and specify the minimum column width using the minColWidth property. In this case, the maximum number of columns the layout can fit equals to floor(container_width / minColWidth). Note that groups and tabs can also have their own multi-column layouts inside.

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        formData: {
            firstName: "John",
            lastName: "Heart",
            position: "CEO",
            hireDate: new Date(2012, 4, 13),
            city: "Los Angeles",
            phone: "+1(213) 555-9392",
            email: "jheart@dx-email.com"
        },
        colCount: "auto",
        minColWidth: 500,
        items: ["firstName", "lastName", {
            itemType: "tabbed",
            tabs: [{
                title: "Info",
                colCount: 3,
                items: ["position", "hireDate", "city" ]
            }, {
                title: "Contacts",
                colCount: 2,
                items: ["phone", "email"]
            }]
        }]
    });
});
Angular
HTML
TypeScript
<dx-form
    [(formData)]="employee"
    colCount="auto"
    [minColWidth]="500">
    <dxi-item dataField="firstName"></dxi-item>
    <dxi-item dataField="lastName"></dxi-item>
    <dxi-item itemType="tabbed">
        <dxi-tab
            title="Info"
            [colCount]="3"
            [items]="['position', 'hireDate', 'city' ]">
        </dxi-tab>
        <dxi-tab
            title="Contacts"
            [colCount]="2"
            [items]="['phone', 'email']">
        </dxi-tab>
    </dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart",
        position: "CEO",
        hireDate: new Date(2012, 4, 13),
        city: "Los Angeles",
        phone: "+1(213) 555-9392",
        email: "jheart@dx-email.com"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxForm 
        :form-data="employee"
        col-count="auto"
        :min-col-width="500">
        <DxSimpleItem dataField="firstName" />
        <DxSimpleItem dataField="lastName" />
        <DxTabbedItem>
            <DxTab
                title="Info"
                :col-count="3">
                <DxSimpleItem dataField="position" />
                <DxSimpleItem dataField="hireDate" />
                <DxSimpleItem dataField="city" />
            </DxTab>
            <DxTab
                title="Contacts"
                :col-count="2">
                <DxSimpleItem dataField="phone" />
                <DxSimpleItem dataField="email" />
            </DxTab>
        </DxTabbedItem>
    </DxForm>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import { DxForm, DxTabbedItem, DxSimpleItem, DxTab } from 'devextreme-vue/form';

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    position: 'CEO',
    hireDate: new Date(2012, 4, 13),
    city: 'Los Angeles',
    phone: '+1(213) 555-9392',
    email: 'jheart@dx-email.com'
};

export default {
    components: {
        DxForm, DxTabbedItem, DxSimpleItem, DxTab
    },
    data() {
        return {
            employee
        };
    },
};
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { Form, SimpleItem, TabbedItem, Tab }  from 'devextreme-react/form';

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    position: 'CEO',
    hireDate: new Date(2012, 4, 13),
    city: 'Los Angeles',
    phone: '+1(213) 555-9392',
    email: 'jheart@dx-email.com'
};

class App extends React.Component {
    render() {
        return (
            <Form 
                formData={employee}
                colCount="auto"
                minColWidth={500}>
                <SimpleItem dataField="firstName" />
                <SimpleItem dataField="lastName" />
                <TabbedItem>
                    <Tab
                        title="Info"
                        colCount={3}>
                        <SimpleItem dataField="position" />
                        <SimpleItem dataField="hireDate" />
                        <SimpleItem dataField="city" />
                    </Tab>
                    <Tab
                        title="Contacts"
                        colCount={2}>
                        <SimpleItem dataField="phone" />
                        <SimpleItem dataField="email" />
                    </Tab>
                </TabbedItem>
            </Form>
        );
    }
}

export default App;

Span Columns

If an item should span more than one column, assign the required number to the colSpan property. Groups and tabs can also have individual colSpan values.

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        formData: {
            firstName: "John",
            lastName: "Heart",
            notes: "John has been in the Audio/Video industry since 1990.",
            phone: "+1(213) 555-9392",
            email: "jheart@dx-email.com"
        },
        colCount: 2,
        items: ["firstName", "lastName", {
            dataField: "notes",
            colSpan: 2
        }, {
            itemType: "tabbed",
            colSpan: 2,
            tabs: [{
                title: "Contacts",
                items: ["phone", "email"]
            }]
        }]
    });
});
Angular
HTML
TypeScript
<dx-form
    [(formData)]="employee"
    [colCount]="2">
    <dxi-item dataField="firstName"></dxi-item>
    <dxi-item dataField="lastName"></dxi-item>
    <dxi-item dataField="notes" [colSpan]="2"></dxi-item>
    <dxi-item itemType="tabbed" [colSpan]="2">
        <dxi-tab
            title="Contacts"
            [items]="['phone', 'email']">
        </dxi-tab>
    </dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart",
        notes: "John has been in the Audio/Video industry since 1990.",
        phone: "+1(213) 555-9392",
        email: "jheart@dx-email.com"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxForm
        :form-data="employee"
        :col-count="2">
        <DxSimpleItem data-field="firstName" />
        <DxSimpleItem data-field="lastName" />
        <DxSimpleItem data-field="notes" :col-span="2" />
        <DxTabbedItem :col-span="2">
            <DxTab title="Contacts">
                <DxSimpleItem data-field="phone" />
                <DxSimpleItem data-field="email" />
            </DxTab>
        </DxTabbedItem>
    </DxForm>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxForm, DxSimpleItem, DxTabbedItem, DxTab } from 'devextreme-vue/form';

export default {
    components: {
        DxForm, DxSimpleItem, DxTabbedItem, DxTab
    },
    data() {
        return {
            employee: {
                firstName: 'John',
                lastName: 'Heart',
                notes: 'John has been in the Audio/Video industry since 1990.',
                phone: '+1(213) 555-9392',
                email: 'jheart@dx-email.com'
            }
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { Form, SimpleItem, TabbedItem, Tab } from 'devextreme-react/form';

class App extends React.Component {
    employee = {
        firstName: 'John',
        lastName: 'Heart',
        notes: 'John has been in the Audio/Video industry since 1990.',
        phone: '+1(213) 555-9392',
        email: 'jheart@dx-email.com'
    }

    render() {
        return (
            <Form
                formData={this.employee}
                colCount={2}>
                <SimpleItem dataField="firstName" />
                <SimpleItem dataField="lastName" />
                <SimpleItem dataField="notes" colSpan={2} />
                <TabbedItem colSpan={2}>
                    <Tab title="Contacts">
                        <SimpleItem dataField="phone" />
                        <SimpleItem dataField="email" />
                    </Tab>
                </TabbedItem>
            </Form>
        );
    }
}
export default App;

Layout Depending on the Screen Width

The Form UI component enables you to specify different layouts for different screen widths. For this purpose, use the screenByWidth function and colCountByScreen property. The screenByWidth function returns a size qualifier depending on the screen width. The colCountByScreen property establishes the dependency between the size qualifier and the column count.

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        formData: {
            firstName: "John",
            lastName: "Heart",
            position: "CEO",
            hireDate: new Date(2012, 4, 13)
        },
        screenByWidth: function (width) {
            if (width < 768)  return "xs";
            if (width < 992)  return "sm";
            if (width < 1200) return "md";
            return "lg";
        },
        colCountByScreen: {
            "xs": 1, "md": 3,
            "sm": 2, "lg": 4
        }
    });
});
Angular
HTML
TypeScript
<dx-form
    [(formData)]="employee"
    [screenByWidth]="getSizeQualifier">
    <dxo-col-count-by-screen [xs]="1" [sm]="2" [md]="3" [lg]="4"></dxo-col-count-by-screen>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart",
        position: "CEO",
        hireDate: new Date(2012, 4, 13)
    }
    getSizeQualifier (width) {
        if (width < 768)  return "xs";
        if (width < 992)  return "sm";
        if (width < 1200) return "md";
        return "lg";
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxForm
        :form-data="employee"
        :col-count-by-screen="colCountByScreen"
        :screen-by-width="screenByWidth" />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxForm from 'devextreme-vue/form';

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    position: 'CEO',
    hireDate: new Date(2012, 4, 13)
}

export default {
    components: {
        DxForm
    },
    data() {
        return {
            employee
        };
    },
    computed: {
        colCountByScreen() {
            return {
                xs: 1,
                sm: 2,
                md: 3
                lg: 4
            };
        }
    },
    methods: {
        screenByWidth(width) {
            if (width < 768)  return 'xs';
            if (width < 992)  return 'sm';
            if (width < 1200) return 'md';
            return 'lg';
        }
    }
};
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Form from 'devextreme-react/form';

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    position: 'CEO',
    hireDate: new Date(2012, 4, 13)
};
const colCountByScreen = {
    xs: 1,
    sm: 2,
    md: 3
    lg: 4
};
class App extends React.Component {
    render() {
        return (
            <Form
                formData={employee}
                colCountByScreen={colCountByScreen}
                screenByWidth={screenByWidth} />
        );
    }
}

function screenByWidth(width) {
    if (width < 768)  return 'xs';
    if (width < 992)  return 'sm';
    if (width < 1200) return 'md';
    return 'lg';
}

export default App;

View Demo

See Also