React Splitter - Getting Started

NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.

Splitter is a UI component designed to split a page layout into multiple panes.

This tutorial shows how to add Splitter to the page and configure the component's core settings. For example, you can create the following page layout:

Each section in this tutorial describes a single configuration step. You can also find the full source code in the following GitHub repository:

View on GitHub

Build a Layout

In this tutorial, the Splitter takes up only a part of the page. To achieve this goal, set the component's width and height properties to 500px and 400px respectively.

NOTE
If you want to split the entire page, place a Splitter in the <body> tag and set the width and height options to 100% for both the Splitter and the <html> tag.

A Splitter can arrange its items either horizontally (default) or vertically.

You can use two options to specify Splitter item content:

  • items
    Specifies pane content directly in code. This option is used in this tutorial.

  • dataSource
    Obtains pane content stored separately from the main code.

Each pane can hold another Splitter. Each nested Splitter uses the same configuration properties as its parent.

Once you set up pane layout, the Splitter displays separator bars between panes. You can specify the width of these bars in pixels.

App.js
  • import React from 'react';
  • import Splitter, { Item } from 'devextreme-react/splitter';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • const App = () => (
  • <React.Fragment>
  • <container>
  • <Splitter
  • width={500}
  • height={400}
  • separatorSize={5}
  • >
  • <Item />
  • <Item>
  • <Splitter orientation="vertical" separatorSize={5}>
  • <Item />
  • <Item />
  • <Item />
  • </Splitter>
  • </Item>
  • </Splitter>
  • </container>
  • </React.Fragment>
  • );
  •  
  • export default App;

Configure Panes

The following options specify the Splitter state and available user interaction capabilities:

  • resizable (default: true)
    If true, a handle appears on the pane separator. Drag the handle to adjust pane size.

  • collapsible (default: false)
    If true, an arrow appears on the handle. Click the arrow to collapse/expand the pane.

  • collapsed (default: false)
    Specifies whether the pane is collapsed.

Use the following properties to specify pane size. Note that all these properties depend on Splitter orientation. They specify width in 'horizontal' orientation and height in 'vertical' orientation.

  • size
    Pane width/height.

  • minSize
    Minimum width/height for a resizable pane.

  • maxSize
    Maximum width/height for a resizable pane.

  • collapsedSize
    Pane width/height in the collapsed state.

This tutorial explicitly specifies the following properties: size, minSize, maxSize, and collapsible. All panes are resizable, since this is a default behavior.

App.js
  • import React from 'react';
  • import Splitter, { Item } from 'devextreme-react/splitter';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • const App = () => (
  • <React.Fragment>
  • <container>
  • <Splitter ... >
  • <Item size="285px" />
  • <Item>
  • <Splitter orientation="vertical" separatorSize={5}>
  • <Item size="80%" />
  • <Item collapsible={true} minSize="40px" />
  • <Item collapsible={true} maxSize="30px"/>
  • </Splitter>
  • </Item>
  • </Splitter>
  • </container>
  • </React.Fragment>
  • );
  •  
  • export default App;

Fill Panes with Content

Splitter panes can include different content types, from simple HTML markup to components. You can declare HTML markup inside the item tag or use the following properties to populate panes with content:

  • text
    Specifies the text displayed in the pane.

  • itemTemplate
    Specifies a custom template for all panes.

  • template
    Specifies a custom template for an individual pane.

This tutorial uses templates to define components inside panes:

  • The first pane includes a Form component.
  • All changes made in Form are recorded in the second pane.
  • The third pane contains a button, and users can click it to erase the output in the second pane and reset the Form.
  • The last pane demonstrates the use of the text property.
App.js
  • import 'devextreme/dist/css/dx.light.css';
  • import { useState } from 'react';
  • import Form from 'devextreme-react/form';
  • import Button from 'devextreme-react/button';
  • import Splitter, { Item } from 'devextreme-react/splitter';
  •  
  • const App = () => {
  • const initialEmployee = {
  • ID: 1,
  • FirstName: 'John',
  • LastName: 'Heart',
  • Position: 'CEO',
  • BirthDate: '1964/03/16',
  • HireDate: '1995/01/15',
  • Notes: 'John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003.\r\n\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.',
  • Address: '351 S Hill St., Los Angeles, CA',
  • Phone: '360-684-1334',
  • Email: 'jheart@dx-email.com',
  • };
  •  
  • const [employee, setEmployee] = useState({ ...initialEmployee });
  • const [output, setOutput] = useState(['Output:']);
  • const [suppressFieldChangeEvent, setSuppressFieldChangeEvent] = useState(false);
  •  
  • const onFieldDataChanged = (e) => {
  • if (!suppressFieldChangeEvent) {
  • setOutput((prevOutput) => [...prevOutput, e.value]);
  • }
  • };
  •  
  • const resetFormAndOutput = () => {
  • setSuppressFieldChangeEvent(true);
  • setEmployee({ ...initialEmployee });
  • setOutput(['Output:']);
  • setTimeout(() => {
  • setSuppressFieldChangeEvent(false);
  • }, 0);
  • };
  •  
  • return (
  • <Splitter ... >
  • <Item ... >
  • <Form
  • formData={employee}
  • onFieldDataChanged={onFieldDataChanged}
  • />
  • </Item>
  • <Item>
  • <Splitter ... >
  • <Item ... >
  • <div>
  • {output.map((item, index) => (
  • <div key={index}>{item}</div>
  • ))}
  • </div>
  • </Item>
  • <Item ... >
  • <Button
  • text="Clear all entries"
  • onClick={resetFormAndOutput}
  • />
  • </Item>
  • <Item ...
  • text="All rights are reserved ©"
  • />
  • </Splitter>
  • </Item>
  • </Splitter>
  • );
  • };
  •  
  • export default App;