Getting Started with KendoReact Splitter

The KendoReact Splitter splits the page into sections and allows the user to control the page layout.

The KendoReact Splitter is distributed through NPM under the kendo-react-layout package.

The Splitter component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Basic Usage

The following example demonstrates the Splitter in action.

<style>
.pane-content { padding: 0 10px; }
h3 { font-size: 1.2em; margin: 10px 0; padding: 0; }
p { margin: 0; padding: 0; }
</style>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            panes: [
                { size: '20%', min: '20px', collapsible: true },
                {},
                { size: '30%', min: '20px', collapsible: true }
            ],
            nestedPanes: [
                { size: '40%' },
                { },
                { size: '30%', resizable: false }
            ]
        };
    }

    onChange = (event) => {
        this.setState({
            panes: event.newState
        });
    }

    onNestedChange = (event) => {
        this.setState({
            nestedPanes: event.newState
        });
    }

    render() {
        return (
            <div>
                <Splitter
                    style={{height: 650}}
                    panes={this.state.nestedPanes}
                    orientation={'vertical'}
                    onChange={this.onNestedChange}
                >
                    <Splitter
                        panes={this.state.panes}
                        onChange={this.onChange}
                    >
                        <div className="pane-content">
                            <h3>Inner splitter / left pane</h3>
                            <p>Resizable and collapsible.</p>
                        </div>
                        <div className="pane-content">
                            <h3>Inner splitter / center pane</h3>
                            <p>Resizable only.</p>
                        </div>
                        <div className="pane-content">
                            <h3>Inner splitter / right pane</h3>
                            <p>Resizable and collapsible.</p>
                        </div>
                    </Splitter>

                     <div className="pane-content">
                        <h3>Outer splitter / Middle pane</h3>
                        <p>Resizable only.</p>
                    </div>
                    <div className="pane-content">
                        <h3>Outer splitter / Bottom pane</h3>
                        <p>Non-resizable and non-collapsible.</p>
                    </div>
                </Splitter>
            </div>
        );
    }
}
ReactDOM.render(
    <App/>,
    document.querySelector('my-app')
);

Functionality and Features