Pane content in React Splitter component

7 Oct 202524 minutes to read

This guide explains how to use plain text, HTML markup, templates, or React UI components as content within the panes of the Syncfusion React Splitter.

Template

You can render the HTML element directly to the splitter pane content using content template property.

[Class-component]

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    firstPaneContent() {
        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>);
    }
    ;
    secondPaneContent() {
        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>);
    }
    ;
    thirdPaneContent() {
        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>);
    }
    ;
    render() {
        return (<div className="App">
  <SplitterComponent id="collapsed" height="250px" width='600px'>
  <PanesDirective>
    <PaneDirective size='200px' content={this.firstPaneContent}/>
    <PaneDirective size='200px' content={this.secondPaneContent}/>
    <PaneDirective size='200px' content={this.thirdPaneContent}/>
  </PanesDirective>
  </SplitterComponent>
        </div>);
    }
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

class App extends React.Component {
  public firstPaneContent(): 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 secondPaneContent(): 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 thirdPaneContent(): 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 render() {
  return (<div className="App">
  <SplitterComponent id="collapsed" height="250px" width='600px'>
  <PanesDirective>
    <PaneDirective size='200px' content = {this.firstPaneContent}/>
    <PaneDirective size='200px' content = {this.secondPaneContent}/>
    <PaneDirective size='200px' content = {this.thirdPaneContent}/>
  </PanesDirective>
  </SplitterComponent>
</div>);
}
}
export default App;

[Functional-component]

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    function firstPaneContent() {
        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 secondPaneContent() {
        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 thirdPaneContent() {
        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>);
    }
    ;
    return (<div className="App">
      <SplitterComponent id="collapsed" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content={firstPaneContent}/>
        <PaneDirective size='200px' content={secondPaneContent}/>
        <PaneDirective size='200px' content={thirdPaneContent}/>
      </PanesDirective>
      </SplitterComponent>
    </div>);
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App () {
  function firstPaneContent(): 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 secondPaneContent(): 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 thirdPaneContent(): 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>);
  };

  return (
    <div className="App">
      <SplitterComponent id="collapsed" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content = {firstPaneContent}/>
        <PaneDirective size='200px' content = {secondPaneContent}/>
        <PaneDirective size='200px' content = {thirdPaneContent}/>
      </PanesDirective>
      </SplitterComponent>
    </div>
  );

}
export default App;

React UI components

React UI components can be embedded within Splitter panes, supporting their native behaviors and event bindings.

You can refer Accordion within splitter and Listview within splitter samples.

Plain content

You can insert plain text into a pane using either inner HTML or the content property.

[Class-component]

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    render() {
        return (<div className="App">
  <SplitterComponent id="plain" height="250px" width='600px'>
  <PanesDirective>
    <PaneDirective size='200px' content='<div class="content"> Left pane </div>'/>
    <PaneDirective size='200px' content='<div class="content"> Middle pane </div>'/>
    <PaneDirective size='200px' content='<div class="content"> Right pane </div>'/>
  </PanesDirective>
  </SplitterComponent>
        </div>);
    }
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

class App extends React.Component {
public render() {
  return (<div className="App">
  <SplitterComponent id="plain" height="250px" width='600px'>
  <PanesDirective>
    <PaneDirective size='200px' content = '<div class="content"> Left pane </div>'/>
    <PaneDirective size='200px' content = '<div class="content"> Middle pane </div>'/>
    <PaneDirective size='200px' content = '<div class="content"> Right pane </div>'/>
  </PanesDirective>
  </SplitterComponent>
</div>);
}
}
export default App;

[Functional-component]

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    return (<div className="App">
      <SplitterComponent id="plain" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content='<div class="content"> Left pane </div>'/>
        <PaneDirective size='200px' content='<div class="content"> Middle pane </div>'/>
        <PaneDirective size='200px' content='<div class="content"> Right pane </div>'/>
      </PanesDirective>
      </SplitterComponent>
    </div>);
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App () {

  return (
    <div className="App">
      <SplitterComponent id="plain" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content = '<div class="content"> Left pane </div>'/>
        <PaneDirective size='200px' content = '<div class="content"> Middle pane </div>'/>
        <PaneDirective size='200px' content = '<div class="content"> Right pane </div>'/>
      </PanesDirective>
      </SplitterComponent>
    </div>
  );

}
export default App;

HTML Markup

Splitter is a layout-based container component. You can dynamically populate pane content using existing HTML markup, making it easy to update content without modifying component logic.

[Class-component]

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    render() {
        return (<div className="App">
  <SplitterComponent id="plain" height="250px" width='600px'>
  <PanesDirective>
    <PaneDirective size='200px' content='<div class="content"><h3 class="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>'/>
    <PaneDirective size='200px' content='<div class="content"><h3 class="h3">CAMEMBERT </h3>The village in the Orne département of Normandy where the famous French cheese is originated from.</div>'/>
    <PaneDirective size='200px' content='<div class="content"><h3 class="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>'/>
  </PanesDirective>
  </SplitterComponent>
        </div>);
    }
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

class App extends React.Component {
public render() {
  return (<div className="App">
  <SplitterComponent id="plain" height="250px" width='600px'>
  <PanesDirective>
    <PaneDirective size='200px' content = '<div class="content"><h3 class="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>'/>
    <PaneDirective size='200px' content =  '<div class="content"><h3 class="h3">CAMEMBERT </h3>The village in the Orne département of Normandy where the famous French cheese is originated from.</div>'/>
    <PaneDirective size='200px' content = '<div class="content"><h3 class="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>'/>
  </PanesDirective>
  </SplitterComponent>
</div>);
}
}
export default App;

[Functional-component]

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    return (<div className="App">
      <SplitterComponent id="plain" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content='<div class="content"><h3 class="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>'/>
        <PaneDirective size='200px' content='<div class="content"><h3 class="h3">CAMEMBERT </h3>The village in the Orne département of Normandy where the famous French cheese is originated from.</div>'/>
        <PaneDirective size='200px' content='<div class="content"><h3 class="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>'/>
      </PanesDirective>
      </SplitterComponent>
    </div>);
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App () {

  return (
    <div className="App">
      <SplitterComponent id="plain" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content = '<div class="content"><h3 class="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>'/>
        <PaneDirective size='200px' content =  '<div class="content"><h3 class="h3">CAMEMBERT </h3>The village in the Orne département of Normandy where the famous French cheese is originated from.</div>'/>
        <PaneDirective size='200px' content = '<div class="content"><h3 class="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>'/>
      </PanesDirective>
      </SplitterComponent>
    </div>
  );

}
export default App;

Pane content using selector

You can assign pane content using query selectors such as element IDs or CSS class names. The example below demonstrates how to load an element into a pane using its ID.

[Class-component]

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    render() {
        return (<div className="App">

  {/* <!-- pane contents --> */}

    <div id="left-pane-content" style={{ display: "none" }}>
      <div>Left pane<div id='panetext'>size: 25%</div>
          <div id='panetext'>min: 60px</div>
      </div>
  </div>

  <div id="middle-pane-content" style={{ display: "none" }}>
      <span>Middle pane<div id="panetext">size: 50%</div>
          <div id="panetext">min: 60px</div>
      </span>
  </div>

  <div id="last-pane-content" style={{ display: "none" }}>
      <span>Right pane<div id="panetext">size: 25%</div>
          <div id="panetext">min: 60px</div>
      </span>
  </div>

    <SplitterComponent id="plain" height="250px" width='600px'>
    <PanesDirective>
      <PaneDirective size='200px' min="60px" content='#left-pane-content'/>
      <PaneDirective size='200px' min="60px" content='#middle-pane-content'/>
      <PaneDirective size='200px' min="60px" content='#last-pane-content'/>
    </PanesDirective>
    </SplitterComponent>
  </div>);
    }
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

class App extends React.Component {
public render() {
  return (<div className="App">

  { /* <!-- pane contents --> */}

    <div id="left-pane-content" style={{display: "none"}}>
      <div>Left pane<div id='panetext'>size: 25%</div>
          <div id='panetext'>min: 60px</div>
      </div>
  </div>

  <div id="middle-pane-content" style={{display: "none"}}>
      <span>Middle pane<div id="panetext">size: 50%</div>
          <div id="panetext">min: 60px</div>
      </span>
  </div>

  <div id="last-pane-content" style={{display: "none"}}>
      <span>Right pane<div id="panetext">size: 25%</div>
          <div id="panetext">min: 60px</div>
      </span>
  </div>

    <SplitterComponent id="plain" height="250px" width='600px'>
    <PanesDirective>
      <PaneDirective size='200px' min="60px" content ='#left-pane-content'/>
      <PaneDirective size='200px' min="60px" content ='#middle-pane-content'/>
      <PaneDirective size='200px' min="60px" content ='#last-pane-content'/>
    </PanesDirective>
    </SplitterComponent>
  </div>
);
}
}
export default App;

[Functional-component]

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    return (<div className="App">

      {/* <!-- pane contents --> */}

      <div id="left-pane-content" style={{ display: "none" }}>
        <div>Left pane<div id='panetext'>size: 25%</div>
            <div id='panetext'>min: 60px</div>
        </div>
      </div>

      <div id="middle-pane-content" style={{ display: "none" }}>
          <span>Middle pane<div id="panetext">size: 50%</div>
              <div id="panetext">min: 60px</div>
          </span>
      </div>

      <div id="last-pane-content" style={{ display: "none" }}>
          <span>Right pane<div id="panetext">size: 25%</div>
              <div id="panetext">min: 60px</div>
          </span>
      </div>

        <SplitterComponent id="plain" height="250px" width='600px'>
        <PanesDirective>
          <PaneDirective size='200px' min="60px" content='#left-pane-content'/>
          <PaneDirective size='200px' min="60px" content='#middle-pane-content'/>
          <PaneDirective size='200px' min="60px" content='#last-pane-content'/>
        </PanesDirective>
        </SplitterComponent>
    </div>);
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App () {

  return (
    <div className="App">

      { /* <!-- pane contents --> */}

      <div id="left-pane-content" style={{display: "none"}}>
        <div>Left pane<div id='panetext'>size: 25%</div>
            <div id='panetext'>min: 60px</div>
        </div>
      </div>

      <div id="middle-pane-content" style={{display: "none"}}>
          <span>Middle pane<div id="panetext">size: 50%</div>
              <div id="panetext">min: 60px</div>
          </span>
      </div>

      <div id="last-pane-content" style={{display: "none"}}>
          <span>Right pane<div id="panetext">size: 25%</div>
              <div id="panetext">min: 60px</div>
          </span>
      </div>

        <SplitterComponent id="plain" height="250px" width='600px'>
        <PanesDirective>
          <PaneDirective size='200px' min="60px" content ='#left-pane-content'/>
          <PaneDirective size='200px' min="60px" content ='#middle-pane-content'/>
          <PaneDirective size='200px' min="60px" content ='#last-pane-content'/>
        </PanesDirective>
        </SplitterComponent>
    </div>
  );

}
export default App;

Search docs

Ask HelpBot

Search docs

Ask HelpBot

Pane content in React Splitter component

Template

React UI components

Plain content

HTML Markup

Pane content using selector