DevExtreme – Create Flexible Layouts with the DevExtreme Splitter Component

When building an app, static layouts may not be enough. By using a "splitter" component, you can convert static page layouts to one that adapts to the needs of each individual user.

As you'll soon see, the DevExtreme Splitter UI component was designed to split a page layout into multiple resizable panes (page sections).

In this blog post, I'll explore a simple yet highly popular layout-related use case: resizing layout "sections" to display more business data (and of course, I'll be using the DevExtreme Splitter to do so). Below is the final page layout. Click the gif to see it in full screen:

Implementation Details

The DevExtreme Splitter divides a layout into panes. These panes can be configured with the following basic settings:

DevExtreme UI components rely on Item declarations for nested configurations (including panes). To include a component in a Splitter pane, you’ll need to create a separate template or use the following method (declare directly using Item markup).

<Splitter onResize={onResize} id="splitter" height="auto"> 
    <Item minSize={250}> 
        <DataGridComponent ref={grid} /> 
    </Item> 
    <Item minSize={250} size="55%"> 
        <ChartComponent /> 
    </Item> 
</Splitter> 

This example adds the DevExtreme DataGrid and Chart components to the pane.

In this particular instance, users can view hidden DataGrid columns by expanding the Splitter's leftmost pane. For DataGrid adaptive mode, enable the columnHidingEnabled option. Call the updateDimensions method within the onResize function to adapt container size changes (for additional information in this regard, please refer to our Adaptability help topic).

const onResize = useCallback(() => { 
    cancelAnimationFrame(animationRefFrame.current); 
    animationRefFrame.current = requestAnimationFrame(() => 
        grid.current.instance().updateDimensions() 
    ); 
}, [grid]); 

Customize Splitter Appearance

Once you set up a pane layout, our Splitter displays separator bars between panes. You can customize this visual element to match relevant design requirements.

For instance, you can modify separator bar width in pixels. You can also modify component appearance with custom CSS rules.

For this sample, we used custom CSS to modify both the Splitter and its panes:

// modifies the Splitter separator bar: 
.dx-resize-handle { 
    border-radius: 50px; 
} 

// rounds the corners of the pane content: 
.dx-datagrid-headers.dx-datagrid-nowrap.dx-bordered-top-view { 
     border-radius: 8px 8px 0 0 !important; 
} 
.dx-gridbase-container > .dx-bordered-bottom-view { 
     border-radius: 0 0 8px 8px !important; 
} 

As the following image illustrates, you can personalize the Splitter separator as requirements dictate (through settings, CSS styles, etc).

UI Templates for Additional Layout Strategies

This sample layout was inspired by the DevExtreme UI Template Gallery. Our UI Template Gallery (for Angular, React, and Vue) includes app templates for a variety of page layouts/usage scenarios including the following:

• CRM

• Planning

• Dashboards

• Authentication forms

• User profiles

Whether you're building a customer management system, a project planning tool, or user authentication flows, UI templates provide a solid foundation that you can easily modify to address specific business requirements.

Your Feedback Counts

Please take a moment and share your thoughts/requirements with us.

Free DevExpress Products - Get Your Copy Today