Split panes in React Splitter component

30 Jan 202324 minutes to read

This section explain about split panes behaviors.

Horizontal layout

By default, splitter will render in horizontal orientation. Splitter container will be split as panes in horizontal flow direction with vertical separator.

[Class-component]

app.jsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    leftContent() {
        return (<div>
        <div className="content">
          <h3>Grid </h3>
          The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.
        </div>
      </div>);
    }
    middleContent() {
        return (<div>
        <div className="content">
          <h3>Schedule </h3>
          The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently.
        </div>
      </div>);
    }
    rightContent() {
        return (<div>
        <div className="content">
          <h3>Chart </h3>
          ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications.
        </div>
      </div>);
    }
    render() {
        return (<div className="App">
      <SplitterComponent id="horizontal" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content={this.leftContent}/>
        <PaneDirective size='200px' content={this.middleContent}/>
        <PaneDirective size='200px' content={this.rightContent}/>
      </PanesDirective>
      </SplitterComponent>
  </div>);
    }
}
export default App;

app.tsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

class App extends React.Component {
  public leftContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>Grid </h3>
          The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.
        </div>
      </div>
    );
  }
  public middleContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>Schedule </h3>
          The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently.
        </div>
      </div>
    );
  }
  public rightContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>Chart </h3>
          ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications.
        </div>
      </div>
    );
  }
  public render() {
    return (<div className="App">
      <SplitterComponent id="horizontal" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content = {this.leftContent}/>
        <PaneDirective size='200px' content = {this.middleContent}/>
        <PaneDirective size='200px' content = {this.rightContent}/>
      </PanesDirective>
      </SplitterComponent>
  </div>);
  }
}
export default App;

[Functional-component]

app.jsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    function leftContent() {
        return (<div>
        <div className="content">
          <h3>Grid </h3>
          The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.
        </div>
      </div>);
    }
    function middleContent() {
        return (<div>
        <div className="content">
          <h3>Schedule </h3>
          The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently.
        </div>
      </div>);
    }
    function rightContent() {
        return (<div>
        <div className="content">
          <h3>Chart </h3>
          ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications.
        </div>
      </div>);
    }
    return (<div className="App">
      <SplitterComponent id="horizontal" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content={leftContent}/>
        <PaneDirective size='200px' content={middleContent}/>
        <PaneDirective size='200px' content={rightContent}/>
      </PanesDirective>
      </SplitterComponent>
    </div>);
}
export default App;

app.tsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App () {
  function leftContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>Grid </h3>
          The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.
        </div>
      </div>
    );
  }
  function middleContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>Schedule </h3>
          The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently.
        </div>
      </div>
    );
  }
  function rightContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>Chart </h3>
          ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications.
        </div>
      </div>
    );
  }

    return (<div className="App">
      <SplitterComponent id="horizontal" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content = {leftContent}/>
        <PaneDirective size='200px' content = {middleContent}/>
        <PaneDirective size='200px' content = {rightContent}/>
      </PanesDirective>
      </SplitterComponent>
    </div>);

}
export default App;

Vertical layout

By setting orientation property as Vertical, splitter will render in vertical orientation. Splitter container will be split as panes in vertical flow direction with horizontal separator.

[Class-component]

app.jsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    leftContent() {
        return (<div>
        <div className="content">
          <h3>Grid </h3>
          The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.
        </div>
      </div>);
    }
    middleContent() {
        return (<div>
        <div className="content">
          <h3>Schedule </h3>
          The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently.
        </div>
      </div>);
    }
    rightContent() {
        return (<div>
        <div className="content">
          <h3>Chart </h3>
          ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications.
        </div>
      </div>);
    }
    render() {
        return (<div className="App">
      <SplitterComponent id="vertical" height="300px" width='600px' orientation='Vertical'>
      <PanesDirective>
        <PaneDirective size='100px' content={this.leftContent}/>
        <PaneDirective size='100px' content={this.middleContent}/>
        <PaneDirective size='100px' content={this.rightContent}/>
      </PanesDirective>
      </SplitterComponent>
    </div>);
    }
}
export default App;

app.tsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

class App extends React.Component {
  public leftContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>Grid </h3>
          The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.
        </div>
      </div>
    );
  }
  public middleContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>Schedule </h3>
          The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently.
        </div>
      </div>
    );
  }
  public rightContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>Chart </h3>
          ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications.
        </div>
      </div>
    );
  }
  public render() {
    return (<div className="App">
      <SplitterComponent id="vertical" height="300px" width='600px' orientation='Vertical'>
      <PanesDirective>
        <PaneDirective size='100px' content = {this.leftContent}/>
        <PaneDirective size='100px' content = {this.middleContent}/>
        <PaneDirective size='100px' content = {this.rightContent}/>
      </PanesDirective>
      </SplitterComponent>
    </div>);
  }
}
export default App;

[Functional-component]

app.jsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    function leftContent() {
        return (<div>
        <div className="content">
          <h3>Grid </h3>
          The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.
        </div>
      </div>);
    }
    function middleContent() {
        return (<div>
        <div className="content">
          <h3>Schedule </h3>
          The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently.
        </div>
      </div>);
    }
    function rightContent() {
        return (<div>
        <div className="content">
          <h3>Chart </h3>
          ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications.
        </div>
      </div>);
    }
    return (<div className="App">
      <SplitterComponent id="vertical" height="300px" width='600px' orientation='Vertical'>
      <PanesDirective>
        <PaneDirective size='100px' content={leftContent}/>
        <PaneDirective size='100px' content={middleContent}/>
        <PaneDirective size='100px' content={rightContent}/>
      </PanesDirective>
      </SplitterComponent>
    </div>);
}
export default App;

app.tsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App () {
  function leftContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>Grid </h3>
          The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.
        </div>
      </div>
    );
  }
  function middleContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>Schedule </h3>
          The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently.
        </div>
      </div>
    );
  }
  function rightContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>Chart </h3>
          ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications.
        </div>
      </div>
    );
  }

    return (<div className="App">
      <SplitterComponent id="vertical" height="300px" width='600px' orientation='Vertical'>
      <PanesDirective>
        <PaneDirective size='100px' content = {leftContent}/>
        <PaneDirective size='100px' content = {middleContent}/>
        <PaneDirective size='100px' content = {rightContent}/>
      </PanesDirective>
      </SplitterComponent>
    </div>);

}
export default App;

Multiple panes

You can render the multiple panes with both Horizontal and Vertical orientations.

[Class-component]

app.jsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    pane1Content() {
        return (<div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>);
    }
    pane2Content() {
        return (<div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>);
    }
    pane3Content() {
        return (<div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>);
    }
    pane4Content() {
        return (<div>
        <div className="content">
          <h3>AUSTRALIA </h3>
           Australia is a country and continent surrounded by the Indian and Pacific oceans. Its major cities – Sydney, Brisbane, Melbourne, Perth, Adelaide – are coastal. Its capital, Canberra, is inland.
        </div>
      </div>);
    }
    render() {
        return (<div className="App">
      <SplitterComponent id="multiple" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='150px' content={this.pane1Content}/>
        <PaneDirective size='150px' content={this.pane2Content}/>
        <PaneDirective size='150px' content={this.pane3Content}/>
        <PaneDirective size='150px' content={this.pane4Content}/>
      </PanesDirective>
      </SplitterComponent>
  </div>);
    }
}
export default App;

app.tsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

class App extends React.Component {
  public pane1Content(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>
    );
  }
  public pane2Content(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>
    );
  }
  public pane3Content(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>
    );
  }
  public pane4Content(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>AUSTRALIA </h3>
           Australia is a country and continent surrounded by the Indian and Pacific oceans. Its major cities – Sydney, Brisbane, Melbourne, Perth, Adelaide – are coastal. Its capital, Canberra, is inland.
        </div>
      </div>
    );
  }
  public render() {
    return (<div className="App">
      <SplitterComponent id="multiple" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='150px' content = {this.pane1Content}/>
        <PaneDirective size='150px' content = {this.pane2Content}/>
        <PaneDirective size='150px' content = {this.pane3Content}/>
        <PaneDirective size='150px' content = {this.pane4Content}/>
      </PanesDirective>
      </SplitterComponent>
  </div>);
  }
}
export default App;

[Functional-component]

app.jsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    function pane1Content() {
        return (<div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>);
    }
    function pane2Content() {
        return (<div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>);
    }
    function pane3Content() {
        return (<div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>);
    }
    function pane4Content() {
        return (<div>
        <div className="content">
          <h3>AUSTRALIA </h3>
           Australia is a country and continent surrounded by the Indian and Pacific oceans. Its major cities – Sydney, Brisbane, Melbourne, Perth, Adelaide – are coastal. Its capital, Canberra, is inland.
        </div>
      </div>);
    }
    return (<div className="App">
      <SplitterComponent id="multiple" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='150px' content={pane1Content}/>
        <PaneDirective size='150px' content={pane2Content}/>
        <PaneDirective size='150px' content={pane3Content}/>
        <PaneDirective size='150px' content={pane4Content}/>
      </PanesDirective>
      </SplitterComponent>
    </div>);
}
export default App;

app.tsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App () {
  function pane1Content(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>PARIS </h3>
          Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
        </div>
      </div>
    );
  }
  function pane2Content(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>CAMEMBERT </h3>
          The village in the Orne département of Normandy where the famous French cheese is originated from.
        </div>
      </div>
    );
  }
  function pane3Content(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>GRENOBLE </h3>
          The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
        </div>
      </div>
    );
  }
  function pane4Content(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>AUSTRALIA </h3>
           Australia is a country and continent surrounded by the Indian and Pacific oceans. Its major cities – Sydney, Brisbane, Melbourne, Perth, Adelaide – are coastal. Its capital, Canberra, is inland.
        </div>
      </div>
    );
  }

    return (<div className="App">
      <SplitterComponent id="multiple" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='150px' content = {pane1Content}/>
        <PaneDirective size='150px' content = {pane2Content}/>
        <PaneDirective size='150px' content = {pane3Content}/>
        <PaneDirective size='150px' content = {pane4Content}/>
      </PanesDirective>
      </SplitterComponent>
    </div>);

}
export default App;

Separator

By default, pane separator will be render with 1px width/height. You can customize the separator size by using separatorSize property.

For Horizontal orientation, it will be considered as separator width.
For Vertical orientation, it will be considered as separator height.

[Class-component]

app.jsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    leftContent() {
        return (<div>
        <div className="content">
          <h3>Grid </h3>
          The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.
        </div>
      </div>);
    }
    middleContent() {
        return (<div>
        <div className="content">
          <h3>Schedule </h3>
          The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently.
        </div>
      </div>);
    }
    rightContent() {
        return (<div>
        <div className="content">
          <h3>Chart </h3>
          ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications.
        </div>
      </div>);
    }
    render() {
        return (<div className="App">
      <SplitterComponent id="separator" height="250px" width='600px' separatorSize={5}>
      <PanesDirective>
        <PaneDirective size='200px' content={this.leftContent}/>
        <PaneDirective size='200px' content={this.middleContent}/>
        <PaneDirective size='200px' content={this.rightContent}/>
      </PanesDirective>
      </SplitterComponent>
  </div>);
    }
}
export default App;

app.tsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

class App extends React.Component {
  public leftContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>Grid </h3>
          The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.
        </div>
      </div>
    );
  }
  public middleContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>Schedule </h3>
          The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently.
        </div>
      </div>
    );
  }
  public rightContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>Chart </h3>
          ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications.
        </div>
      </div>
    );
  }
  public render() {
    return (<div className="App">
      <SplitterComponent id="separator" height="250px" width='600px' separatorSize={5}>
      <PanesDirective>
        <PaneDirective size='200px' content = {this.leftContent as any}/>
        <PaneDirective size='200px' content = {this.middleContent as any}/>
        <PaneDirective size='200px' content = {this.rightContent as any}/>
      </PanesDirective>
      </SplitterComponent>
  </div>);
  }
}
export default App;

[Functional-component]

app.jsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    function leftContent() {
        return (<div>
        <div className="content">
          <h3>Grid </h3>
          The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.
        </div>
      </div>);
    }
    function middleContent() {
        return (<div>
        <div className="content">
          <h3>Schedule </h3>
          The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently.
        </div>
      </div>);
    }
    function rightContent() {
        return (<div>
        <div className="content">
          <h3>Chart </h3>
          ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications.
        </div>
      </div>);
    }
    return (<div className="App">
        <SplitterComponent id="separator" height="250px" width='600px' separatorSize={5}>
        <PanesDirective>
          <PaneDirective size='200px' content={leftContent}/>
          <PaneDirective size='200px' content={middleContent}/>
          <PaneDirective size='200px' content={rightContent}/>
        </PanesDirective>
        </SplitterComponent>
      </div>);
}
export default App;

app.tsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App () {
  function leftContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>Grid </h3>
          The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.
        </div>
      </div>
    );
  }
  function middleContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>Schedule </h3>
          The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently.
        </div>
      </div>
    );
  }
  function rightContent(): JSX.Element {
    return (
      <div>
        <div className="content">
          <h3>Chart </h3>
          ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications.
        </div>
      </div>
    );
  }

    return (
      <div className="App">
        <SplitterComponent id="separator" height="250px" width='600px' separatorSize={5}>
        <PanesDirective>
          <PaneDirective size='200px' content = {leftContent as any}/>
          <PaneDirective size='200px' content = {middleContent as any}/>
          <PaneDirective size='200px' content = {rightContent as any}/>
        </PanesDirective>
        </SplitterComponent>
      </div>
    );

}
export default App;

Nested Splitter

Splitter provides support to render the nested pane to achieve the complex layouts. You can use the same <div> element for splitter pane and nested splitter.

Also you can render the nested splitter using direct child of the splitter pane. For this, nested splitter should have 100% width and height to match with the parent pane dimensions.

[Class-component]

app.jsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    innerSplitterInstance;
    splitterInstance;
    leftPaneContent() {
        return (<div>
          <div className="content">
              <a href="https://www.syncfusion.com/ebooks/neuralnetworks" target="_blank">Neural Networks Using C# Succinctly</a>
              <p>Neural networks are an exciting field of software development used to calculate outputs from input data.
              While the idea seems simple enough, the implications of such networks are staggering—think optical character recognition,
              speech recognition, and regression analysis. With Neural Networks Using C# Succinctly by James McCaffrey, you’ll learn
              how to create your own neural network to solve classification problems, or problems where the outcomes can only be one of
              several values. <br /><br />Learn about encoding and normalizing data, activation functions and how to choose the right one, and ultimately
              how to train a neural network to find weights and bias values that provide accurate predictions.
              An artificial neural network (sometimes abbreviated ANN, or shortened to just "neural network" when the context is clear) is
              a software system that loosely models biological neurons and synapses. Before explaining exactly how neural networks work, it is
              useful to understand what types of problems they can solve.
          </p>
          </div>
      </div>);
    }
    rightPaneContent1() {
        return (<div>
      <div className="content">
      <a href="https://www.syncfusion.com/ebooks/data_capture_and_extraction_with_c_sharp_succinctly" target="_blank"> Data Capture and Extraction with C# Succinctly </a>
      <p>Capturing and extracting information is one of the most important tasks a developer can perform, and making this task more
        engaging without relying entirely on specialized tools is an efficient way to improve productivity.
        In Data Capture and Extraction with C# Succinctly, author Ed Freitas guides readers toward getting more out of C# in minimal time.
        Email has become a pillar of our modern and connected society, and it now serves as a primary means of communication. Because each email
        is filled with valuable information, data extraction has emerged as a worthwhile skill set for developers in today’s business world.
      </p>
      </div>
      </div>);
    }
    rightPaneContent2() {
        return (<div>
        <div className="content">
          <a href="https://www.syncfusion.com/ebooks/spark" target="_blank">Spark Succinctly</a>
          <p>Mastering big data requires an aptitude at every step of information processing.
              Post-processing, one of the most important steps, is where you find Apache Spark frequently employed.
              Spark Succinctly, by Marko Svaljek, addresses Spark’s use in the ultimate step in handling big data. This e-book, the
              third installment in Svaljek’s IoT series, teaches the basics of using Spark and explores how to work with RDDs, Scala and
              Python tasks, JSON files, and Cassandra.Many of the leading companies in the world today face the problem of big data.
          </p>
       </div>
      </div>);
    }
    onCreate() {
        // Initialize Splitter component
        const cont = this.innerSplitterInstance.element.querySelectorAll(".e-pane")[1];
        cont.appendChild(this.splitterInstance.element);
    }
    render() {
        return (<div id="target" className="control-section splitter-expand">
          <SplitterComponent id="splitter1" separatorSize={3} height="350px" width="100%" ref={(splitter) => { this.innerSplitterInstance = splitter; }}>
          <PanesDirective>
              <PaneDirective size='48%' content={this.leftPaneContent}/>
              <PaneDirective />
          </PanesDirective>
          </SplitterComponent>
          <SplitterComponent id="splitter2" separatorSize={3} orientation="Vertical" ref={(splitter) => { this.splitterInstance = splitter; }} created={this.onCreate = this.onCreate.bind(this)}>
            <PanesDirective>
                <PaneDirective size='50%' content={this.rightPaneContent1}/>
                <PaneDirective content={this.rightPaneContent2}/>
            </PanesDirective>
          </SplitterComponent>
          </div>);
    }
}
export default App;

app.tsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

class App extends React.Component {
  private innerSplitterInstance: any;
  private splitterInstance: any;
  public leftPaneContent(): JSX.Element {
    return (
      <div>
          <div className="content">
              <a href="https://www.syncfusion.com/ebooks/neuralnetworks" target="_blank">Neural Networks Using C# Succinctly</a>
              <p>Neural networks are an exciting field of software development used to calculate outputs from input data.
              While the idea seems simple enough, the implications of such networks are staggering—think optical character recognition,
              speech recognition, and regression analysis. With Neural Networks Using C# Succinctly by James McCaffrey, you’ll learn
              how to create your own neural network to solve classification problems, or problems where the outcomes can only be one of
              several values. <br/><br/>Learn about encoding and normalizing data, activation functions and how to choose the right one, and ultimately
              how to train a neural network to find weights and bias values that provide accurate predictions.
              An artificial neural network (sometimes abbreviated ANN, or shortened to just "neural network" when the context is clear) is
              a software system that loosely models biological neurons and synapses. Before explaining exactly how neural networks work, it is
              useful to understand what types of problems they can solve.
          </p>
          </div>
      </div>
    );
  }

  public rightPaneContent1(): JSX.Element {
    return (
      <div>
      <div className="content">
      <a href = "https://www.syncfusion.com/ebooks/data_capture_and_extraction_with_c_sharp_succinctly" target = "_blank" > Data Capture and Extraction with C# Succinctly </a>
      <p>Capturing and extracting information is one of the most important tasks a developer can perform, and making this task more
        engaging without relying entirely on specialized tools is an efficient way to improve productivity.
        In Data Capture and Extraction with C# Succinctly, author Ed Freitas guides readers toward getting more out of C# in minimal time.
        Email has become a pillar of our modern and connected society, and it now serves as a primary means of communication. Because each email
        is filled with valuable information, data extraction has emerged as a worthwhile skill set for developers in today’s business world.
      </p>
      </div >
      </div>
    );
  }

  public rightPaneContent2(): JSX.Element {
    return (
      <div>
        <div className="content">
          <a href="https://www.syncfusion.com/ebooks/spark" target="_blank">Spark Succinctly</a>
          <p>Mastering big data requires an aptitude at every step of information processing.
              Post-processing, one of the most important steps, is where you find Apache Spark frequently employed.
              Spark Succinctly, by Marko Svaljek, addresses Spark’s use in the ultimate step in handling big data. This e-book, the
              third installment in Svaljek’s IoT series, teaches the basics of using Spark and explores how to work with RDDs, Scala and
              Python tasks, JSON files, and Cassandra.Many of the leading companies in the world today face the problem of big data.
          </p>
       </div>
      </div>
    );
  }

  public onCreate(): void {
      // Initialize Splitter component
      const cont = this.innerSplitterInstance.element.querySelectorAll(".e-pane")[1];
      cont.appendChild(this.splitterInstance.element);
  }

  public render(): JSX.Element {
      return (
          <div id="target" className="control-section splitter-expand" >
          <SplitterComponent id="splitter1" separatorSize={3}  height="350px" width="100%" ref={(splitter) => { this.innerSplitterInstance = splitter! }}>
          <PanesDirective>
              <PaneDirective size='48%' content={this.leftPaneContent} />
              <PaneDirective />
          </PanesDirective>
          </SplitterComponent>
          <SplitterComponent id="splitter2" separatorSize={3} orientation="Vertical"  ref={(splitter) => { this.splitterInstance = splitter; }} created={this.onCreate = this.onCreate.bind(this)}>
            <PanesDirective>
                <PaneDirective size='50%' content={this.rightPaneContent1} />
                <PaneDirective content = {this.rightPaneContent2} />
            </PanesDirective>
          </SplitterComponent>
          </div>
      );
  }
}
export default App;

[Functional-component]

app.jsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    let innerSplitterInstance;
    let splitterInstance;
    function leftPaneContent() {
        return (<div>
          <div className="content">
              <a href="https://www.syncfusion.com/ebooks/neuralnetworks" target="_blank">Neural Networks Using C# Succinctly</a>
              <p>Neural networks are an exciting field of software development used to calculate outputs from input data.
              While the idea seems simple enough, the implications of such networks are staggering—think optical character recognition,
              speech recognition, and regression analysis. With Neural Networks Using C# Succinctly by James McCaffrey, you’ll learn
              how to create your own neural network to solve classification problems, or problems where the outcomes can only be one of
              several values. <br /><br />Learn about encoding and normalizing data, activation functions and how to choose the right one, and ultimately
              how to train a neural network to find weights and bias values that provide accurate predictions.
              An artificial neural network (sometimes abbreviated ANN, or shortened to just "neural network" when the context is clear) is
              a software system that loosely models biological neurons and synapses. Before explaining exactly how neural networks work, it is
              useful to understand what types of problems they can solve.
          </p>
          </div>
      </div>);
    }
    function rightPaneContent1() {
        return (<div>
      <div className="content">
      <a href="https://www.syncfusion.com/ebooks/data_capture_and_extraction_with_c_sharp_succinctly" target="_blank"> Data Capture and Extraction with C# Succinctly </a>
      <p>Capturing and extracting information is one of the most important tasks a developer can perform, and making this task more
        engaging without relying entirely on specialized tools is an efficient way to improve productivity.
        In Data Capture and Extraction with C# Succinctly, author Ed Freitas guides readers toward getting more out of C# in minimal time.
        Email has become a pillar of our modern and connected society, and it now serves as a primary means of communication. Because each email
        is filled with valuable information, data extraction has emerged as a worthwhile skill set for developers in today’s business world.
      </p>
      </div>
      </div>);
    }
    function rightPaneContent2() {
        return (<div>
        <div className="content">
          <a href="https://www.syncfusion.com/ebooks/spark" target="_blank">Spark Succinctly</a>
          <p>Mastering big data requires an aptitude at every step of information processing.
              Post-processing, one of the most important steps, is where you find Apache Spark frequently employed.
              Spark Succinctly, by Marko Svaljek, addresses Spark’s use in the ultimate step in handling big data. This e-book, the
              third installment in Svaljek’s IoT series, teaches the basics of using Spark and explores how to work with RDDs, Scala and
              Python tasks, JSON files, and Cassandra.Many of the leading companies in the world today face the problem of big data.
          </p>
       </div>
      </div>);
    }
    function onCreate() {
        // Initialize Splitter component
        const cont = innerSplitterInstance.element.querySelectorAll(".e-pane")[1];
        cont.appendChild(splitterInstance.element);
    }
    return (<div id="target" className="control-section splitter-expand">
          <SplitterComponent id="splitter1" separatorSize={3} height="350px" width="100%" ref={(splitter) => { innerSplitterInstance = splitter; }}>
          <PanesDirective>
              <PaneDirective size='48%' content={leftPaneContent}/>
              <PaneDirective />
          </PanesDirective>
          </SplitterComponent>
          <SplitterComponent id="splitter2" separatorSize={3} orientation="Vertical" ref={(splitter) => { splitterInstance = splitter; }} created={onCreate = onCreate.bind(this)}>
            <PanesDirective>
                <PaneDirective size='50%' content={rightPaneContent1}/>
                <PaneDirective content={rightPaneContent2}/>
            </PanesDirective>
          </SplitterComponent>
          </div>);
}
export default App;

app.tsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App () {
  let innerSplitterInstance: any;
  let splitterInstance: any;
  function leftPaneContent(): JSX.Element {
    return (
      <div>
          <div className="content">
              <a href="https://www.syncfusion.com/ebooks/neuralnetworks" target="_blank">Neural Networks Using C# Succinctly</a>
              <p>Neural networks are an exciting field of software development used to calculate outputs from input data.
              While the idea seems simple enough, the implications of such networks are staggering—think optical character recognition,
              speech recognition, and regression analysis. With Neural Networks Using C# Succinctly by James McCaffrey, you’ll learn
              how to create your own neural network to solve classification problems, or problems where the outcomes can only be one of
              several values. <br/><br/>Learn about encoding and normalizing data, activation functions and how to choose the right one, and ultimately
              how to train a neural network to find weights and bias values that provide accurate predictions.
              An artificial neural network (sometimes abbreviated ANN, or shortened to just "neural network" when the context is clear) is
              a software system that loosely models biological neurons and synapses. Before explaining exactly how neural networks work, it is
              useful to understand what types of problems they can solve.
          </p>
          </div>
      </div>
    );
  }

  function rightPaneContent1(): JSX.Element {
    return (
      <div>
      <div className="content">
      <a href = "https://www.syncfusion.com/ebooks/data_capture_and_extraction_with_c_sharp_succinctly" target = "_blank" > Data Capture and Extraction with C# Succinctly </a>
      <p>Capturing and extracting information is one of the most important tasks a developer can perform, and making this task more
        engaging without relying entirely on specialized tools is an efficient way to improve productivity.
        In Data Capture and Extraction with C# Succinctly, author Ed Freitas guides readers toward getting more out of C# in minimal time.
        Email has become a pillar of our modern and connected society, and it now serves as a primary means of communication. Because each email
        is filled with valuable information, data extraction has emerged as a worthwhile skill set for developers in today’s business world.
      </p>
      </div >
      </div>
    );
  }

  function rightPaneContent2(): JSX.Element {
    return (
      <div>
        <div className="content">
          <a href="https://www.syncfusion.com/ebooks/spark" target="_blank">Spark Succinctly</a>
          <p>Mastering big data requires an aptitude at every step of information processing.
              Post-processing, one of the most important steps, is where you find Apache Spark frequently employed.
              Spark Succinctly, by Marko Svaljek, addresses Spark’s use in the ultimate step in handling big data. This e-book, the
              third installment in Svaljek’s IoT series, teaches the basics of using Spark and explores how to work with RDDs, Scala and
              Python tasks, JSON files, and Cassandra.Many of the leading companies in the world today face the problem of big data.
          </p>
       </div>
      </div>
    );
  }

  function onCreate(): void {
      // Initialize Splitter component
      const cont = innerSplitterInstance.element.querySelectorAll(".e-pane")[1];
      cont.appendChild(splitterInstance.element);
  }

      return (
          <div id="target" className="control-section splitter-expand" >
          <SplitterComponent id="splitter1" separatorSize={3}  height="350px" width="100%" ref={(splitter) => { innerSplitterInstance = splitter! }}>
          <PanesDirective>
              <PaneDirective size='48%' content={leftPaneContent} />
              <PaneDirective />
          </PanesDirective>
          </SplitterComponent>
          <SplitterComponent id="splitter2" separatorSize={3} orientation="Vertical"  ref={(splitter) => { splitterInstance = splitter; }} created={onCreate = onCreate.bind(this)}>
            <PanesDirective>
                <PaneDirective size='50%' content={rightPaneContent1} />
                <PaneDirective content = {rightPaneContent2} />
            </PanesDirective>
          </SplitterComponent>
          </div>
      );

}
export default App;

Add or remove pane

You can add or remove panes programmatically to the splitter. By using addPane and removePane methods.

Add pane

You can add the panes dynamically in the splitter by passing pane properties along with index to the addPane method.

[Class-component]

app.jsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    splitterInstance;
    paneDetails = {
        content: 'New Pane',
        max: '250px',
        min: '30px',
        size: '150px',
    };
    firstPane() {
        return (<div>
        <div className="content">Pane1</div>
      </div>);
    }
    secondPane() {
        return (<div>
        <div className="content">Pane2</div>
      </div>);
    }
    btnClick() {
        if (this.splitterInstance.allPanes.length > 1) {
            this.splitterInstance.addPane(this.paneDetails, 1);
        }
    }
    render() {
        return (<div className="App">
      <SplitterComponent id="separator" height="200px" width='580px' ref={(splitter) => { this.splitterInstance = splitter; }}>
      <PanesDirective>
        <PaneDirective size='200px' content={this.firstPane}/>
        <PaneDirective size='200px' content={this.secondPane}/>
      </PanesDirective>
      </SplitterComponent>
      <div id='addButton'>
          <button className='e-control e-btn' onClick={this.btnClick = this.btnClick.bind(this)}>Add Pane</button>
        </div>
  </div>);
    }
}
export default App;

app.tsx

import { PaneDirective, PanePropertiesModel, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

class App extends React.Component {
  public splitterInstance: SplitterComponent;
  public paneDetails: PanePropertiesModel = {
    content: 'New Pane',
    max: '250px',
    min: '30px',
    size: '150px',
  }
  public firstPane(): JSX.Element {
    return (
      <div>
        <div className="content">Pane1</div>
      </div>
    );
  }

  public secondPane(): JSX.Element {
    return (
      <div>
        <div className="content">Pane2</div>
      </div>
    );
  }

  public btnClick(): void {
    if ((this.splitterInstance as any).allPanes.length > 1) {
      this.splitterInstance.addPane(this.paneDetails, 1);
    }
  }
  public render() {
    return (<div className="App">
      <SplitterComponent id="separator" height="200px" width='580px' ref={(splitter) => { this.splitterInstance = splitter! }}>
      <PanesDirective>
        <PaneDirective size='200px' content = {this.firstPane}/>
        <PaneDirective size='200px' content = {this.secondPane}/>
      </PanesDirective>
      </SplitterComponent>
      <div id='addButton'>
          <button className='e-control e-btn' onClick={this.btnClick = this.btnClick.bind(this) }>Add Pane</button>
        </div>
  </div>);
  }
}
export default App;

[Functional-component]

app.jsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    let splitterInstance;
    let paneDetails = {
        content: 'New Pane',
        max: '250px',
        min: '30px',
        size: '150px',
    };
    function firstPane() {
        return (<div>
        <div className="content">Pane1</div>
      </div>);
    }
    function secondPane() {
        return (<div>
        <div className="content">Pane2</div>
      </div>);
    }
    function btnClick() {
        if (splitterInstance.allPanes.length > 1) {
            splitterInstance.addPane(paneDetails, 1);
        }
    }
    return (<div className="App">
      <SplitterComponent id="separator" height="200px" width='580px' ref={(splitter) => { splitterInstance = splitter; }}>
      <PanesDirective>
        <PaneDirective size='200px' content={firstPane}/>
        <PaneDirective size='200px' content={secondPane}/>
      </PanesDirective>
      </SplitterComponent>
      <div id='addButton'>
          <button className='e-control e-btn' onClick={btnClick = btnClick.bind(this)}>Add Pane</button>
        </div>
  </div>);
}
export default App;

app.tsx

import { PaneDirective, PanePropertiesModel, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App () {
  let splitterInstance: SplitterComponent;
  let paneDetails: PanePropertiesModel = {
    content: 'New Pane',
    max: '250px',
    min: '30px',
    size: '150px',
  }
  function firstPane(): JSX.Element {
    return (
      <div>
        <div className="content">Pane1</div>
      </div>
    );
  }

  function secondPane(): JSX.Element {
    return (
      <div>
        <div className="content">Pane2</div>
      </div>
    );
  }

  function btnClick(): void {
    if ((splitterInstance as any).allPanes.length > 1) {
      splitterInstance.addPane(paneDetails, 1);
    }
  }

    return (<div className="App">
      <SplitterComponent id="separator" height="200px" width='580px' ref={(splitter) => { splitterInstance = splitter! }}>
      <PanesDirective>
        <PaneDirective size='200px' content = {firstPane}/>
        <PaneDirective size='200px' content = {secondPane}/>
      </PanesDirective>
      </SplitterComponent>
      <div id='addButton'>
          <button className='e-control e-btn' onClick={btnClick = btnClick.bind(this) }>Add Pane</button>
        </div>
  </div>);

}
export default App;

Remove pane

You can remove the split panes dynamically by passing the pane index to removePane method.

[Class-component]

app.jsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    splitterInstance;
    firstPane() {
        return (<div>
        <div className="content">Pane1</div>
      </div>);
    }
    secondPane() {
        return (<div>
        <div className="content">Pane2</div>
      </div>);
    }
    thirdPane() {
        return (<div>
        <div className="content">Pane3</div>
      </div>);
    }
    btnClick() {
        if (this.splitterInstance.allPanes.length > 1) {
            this.splitterInstance.removePane(1);
        }
    }
    render() {
        return (<div className="App">
        <SplitterComponent id="separator" height="200px" width='600px' ref={(splitter) => { this.splitterInstance = splitter; }}>
          <PanesDirective>
            <PaneDirective size='200px' content={this.firstPane}/>
            <PaneDirective size='200px' content={this.secondPane}/>
            <PaneDirective size='200px' content={this.thirdPane}/>
          </PanesDirective>
        </SplitterComponent>
        <div id='removeButton'>
          <button className='e-control e-btn' onClick={this.btnClick = this.btnClick.bind(this)}>Remove Pane</button>
        </div>
      </div>);
    }
}
export default App;

app.tsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

class App extends React.Component {
  public splitterInstance: SplitterComponent;
  public firstPane(): JSX.Element {
    return (
      <div>
        <div className="content">Pane1</div>
      </div>
    );
  }

  public secondPane(): JSX.Element {
    return (
      <div>
        <div className="content">Pane2</div>
      </div>
    );
  }

  public thirdPane(): JSX.Element {
    return (
      <div>
        <div className="content">Pane3</div>
      </div>
    );
  }

  public btnClick(): void {
    if ((this.splitterInstance as any).allPanes.length > 1) {
        this.splitterInstance.removePane(1);
    }
  }
  public render() {
    return (
      <div className="App">
        <SplitterComponent id="separator" height="200px" width='600px' ref={(splitter) => { this.splitterInstance = splitter! }}>
          <PanesDirective>
            <PaneDirective size='200px' content = {this.firstPane}/>
            <PaneDirective size='200px' content = {this.secondPane}/>
            <PaneDirective size='200px' content = {this.thirdPane}/>
          </PanesDirective>
        </SplitterComponent>
        <div id='removeButton'>
          <button className='e-control e-btn' onClick={this.btnClick = this.btnClick.bind(this) }>Remove Pane</button>
        </div>
      </div>
    );
  }
}
export default App;

[Functional-component]

app.jsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    let splitterInstance;
    function firstPane() {
        return (<div>
        <div className="content">Pane1</div>
      </div>);
    }
    function secondPane() {
        return (<div>
        <div className="content">Pane2</div>
      </div>);
    }
    function thirdPane() {
        return (<div>
        <div className="content">Pane3</div>
      </div>);
    }
    function btnClick() {
        if (splitterInstance.allPanes.length > 1) {
            splitterInstance.removePane(1);
        }
    }
    return (<div className="App">
        <SplitterComponent id="separator" height="200px" width='600px' ref={(splitter) => { splitterInstance = splitter; }}>
          <PanesDirective>
            <PaneDirective size='200px' content={firstPane}/>
            <PaneDirective size='200px' content={secondPane}/>
            <PaneDirective size='200px' content={thirdPane}/>
          </PanesDirective>
        </SplitterComponent>
        <div id='removeButton'>
          <button className='e-control e-btn' onClick={btnClick = btnClick.bind(this)}>Remove Pane</button>
        </div>
      </div>);
}
export default App;

app.tsx

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App () {
  let splitterInstance: SplitterComponent;
  function firstPane(): JSX.Element {
    return (
      <div>
        <div className="content">Pane1</div>
      </div>
    );
  }

  function secondPane(): JSX.Element {
    return (
      <div>
        <div className="content">Pane2</div>
      </div>
    );
  }

  function thirdPane(): JSX.Element {
    return (
      <div>
        <div className="content">Pane3</div>
      </div>
    );
  }

  function btnClick(): void {
    if ((splitterInstance as any).allPanes.length > 1) {
        splitterInstance.removePane(1);
    }
  }

    return (
      <div className="App">
        <SplitterComponent id="separator" height="200px" width='600px' ref={(splitter) => { splitterInstance = splitter! }}>
          <PanesDirective>
            <PaneDirective size='200px' content = {firstPane}/>
            <PaneDirective size='200px' content = {secondPane}/>
            <PaneDirective size='200px' content = {thirdPane}/>
          </PanesDirective>
        </SplitterComponent>
        <div id='removeButton'>
          <button className='e-control e-btn' onClick={btnClick = btnClick.bind(this) }>Remove Pane</button>
        </div>
      </div>
    );

}
export default App;

See Also

• Resizable split panes
• Collapsible panes
• Define size to a panes
• Specify content to a panes