React UI Components Documentation

Getting started with the React Splitter

The React Splitter splits a container into resizable, collapsible panels, side by side or one above the other. This guide adds the React Splitter (jqxSplitter) to an app, then shows how to set its options, handle its events and call its methods.

Package: jqwidgets-scripts
Import: jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter
Demos: React Splitter demos
API: Properties, events and methods

jqxSplitter in its Default Functionality demo, with the Fluent theme — jqxSplitter in the Default Functionality demo, with the Fluent theme (Tailwind Dark in dark mode).

1 Install #

In a React project (to start one, see Getting started with React), add the package:

npm install jqwidgets-scripts

2 Import the component and a theme #

src/App.tsx

import JqxSplitter from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.tailwind-blue-dark.css';

jqx.base.css is required. The second file is a theme; pick one of the jqx.*.css files (material, fluent, light, dark and more) and pass its name to the theme prop.

3 A complete example #

The source of the live Toggle Bottom Panel demo:

src/App.tsx

import type { JSX } from 'react';
import JqxSplitter from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';

interface Panel {
    size: number;
    collapsible?: boolean;
}

function App(): JSX.Element {
    const panels: Panel[] = [{ size: 300, collapsible: false }, { size: 100 }];

    return (
        <JqxSplitter
            theme="tailwind-blue-dark"
            width={850}
            height={400}
            panels={panels}
            orientation="horizontal"
        >
            <div className="splitter-panel">Panel 1</div>
            <div className="splitter-panel">Panel 2</div>
        </JqxSplitter>
    );
}

export default App;

Options are props. Keep objects such as the data adapter and the columns stable across renders with useMemo, so the component does not reload them.

4 Handle events #

Each event is a prop named on plus the event name with a capital first letter. For example, collapsed: This event is triggered when a panel is collapsed.

const handleCollapsed = (event: any): void => {
    console.log(event.args);
};

return <JqxSplitter onCollapsed={handleCollapsed} />;

5 Call methods #

Call methods through a ref. For example, expand: Expands a panel.

import { useRef } from 'react';

const mySplitter = useRef<JqxSplitter>(null);

const onClick = () => {
    mySplitter.current!.expand();
};

return <JqxSplitter ref={mySplitter} />;

Every component also has setOptions({ … }) and getOptions('name'), to change or read options after the first render.

Next steps #

Splitter API reference: every property, event and method, with examples.
Styling and appearance: themes and CSS classes.
React Splitter demos: live examples with their source code.