Pane sizing in React Splitter component

7 Oct 202524 minutes to read

The React Splitter component allows you to define pane sizes using pixel values, percentage values, or automatic sizing based on layout behavior.

Set pane size in pixels

To assign fixed pixel values to panes, use the size property in paneSettings. This ensures consistent pane dimensions regardless of container size.

[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="pixel_size" height="250px" width='600px'>
  <PanesDirective>
    <PaneDirective size='200px' content='Left pane'/>
    <PaneDirective size='200px' content='Middle pane'/>
    <PaneDirective size='200px' content='Right pane'/>
  </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="pixel_size" height="250px" width='600px'>
  <PanesDirective>
    <PaneDirective size='200px' content = 'Left pane'/>
    <PaneDirective size='200px' content = 'Middle pane'/>
    <PaneDirective size='200px' content = 'Right pane'/>
  </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="pixel_size" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content='Left pane'/>
        <PaneDirective size='200px' content='Middle pane'/>
        <PaneDirective size='200px' content='Right pane'/>
      </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="pixel_size" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content = 'Left pane'/>
        <PaneDirective size='200px' content = 'Middle pane'/>
        <PaneDirective size='200px' content = 'Right pane'/>
      </PanesDirective>
      </SplitterComponent>
    </div>
  );

}
export default App;

Set pane size in percentage

You can also define pane sizes as percentages. This approach ensures responsive behavior across different screen sizes.

[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="percentage" height="250px" width='600px'>
  <PanesDirective>
    <PaneDirective size='30%' content='Left pane'/>
    <PaneDirective size='40%' content='Middle pane'/>
    <PaneDirective size='30%' content='Right pane'/>
  </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="percentage" height="250px" width='600px'>
  <PanesDirective>
    <PaneDirective size='30%' content = 'Left pane'/>
    <PaneDirective size='40%' content = 'Middle pane'/>
    <PaneDirective size='30%' content = 'Right pane'/>
  </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="percentage" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='30%' content='Left pane'/>
        <PaneDirective size='40%' content='Middle pane'/>
        <PaneDirective size='30%' content='Right pane'/>
      </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="percentage" height="250px" width='600px'>
      <PanesDirective>
        <PaneDirective size='30%' content = 'Left pane'/>
        <PaneDirective size='40%' content = 'Middle pane'/>
        <PaneDirective size='30%' content = 'Right pane'/>
      </PanesDirective>
      </SplitterComponent>
    </div>
  );

}
export default App;

Auto-size panes

When no explicit size is provided, panes automatically adjust based on available space. This behavior is powered by the default flex layout, allowing dynamic resizing when panes are added, removed, shown, or hidden.

[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 {
    leftContent(data) {
        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(data) {
        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(data) {
        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="plain" height="200px" width='600px'>
  <PanesDirective>
    <PaneDirective content={this.leftContent}/>
    <PaneDirective content={this.middleContent}/>
    <PaneDirective content={this.rightContent}/>
  </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 leftContent(data: any): 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(data: any): 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(data: any): 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="plain" height="200px" width='600px'>
  <PanesDirective>
    <PaneDirective content = {this.leftContent}/>
    <PaneDirective content = {this.middleContent}/>
    <PaneDirective content = {this.rightContent}/>
  </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 leftContent(data) {
        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(data) {
        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(data) {
        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="plain" height="200px" width='600px'>
      <PanesDirective>
        <PaneDirective content={leftContent}/>
        <PaneDirective content={middleContent}/>
        <PaneDirective content={rightContent}/>
      </PanesDirective>
      </SplitterComponent>
    </div>);
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App () {
  function leftContent(data: any): 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(data: any): 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(data: any): 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="plain" height="200px" width='600px'>
      <PanesDirective>
        <PaneDirective content = {leftContent}/>
        <PaneDirective content = {middleContent}/>
        <PaneDirective content = {rightContent}/>
      </PanesDirective>
      </SplitterComponent>
    </div>
  );

}
export default App;

Fixed pane

You can configure panes with fixed sizes in both horizontal and vertical orientations. However, even when all panes are assigned fixed sizes, the Splitter treats the last pane as flexible to ensure layout adaptability. At least one pane must remain flexible to accommodate container changes.

[Class-component]

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
export default class App extends React.Component {
    leftContent(data) {
        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(data) {
        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(data) {
        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="percentage" height="200px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content={this.leftContent} resizable={false}/>
        <PaneDirective size='200px' content={this.middleContent}/>
        <PaneDirective size='200px' content={this.rightContent}/>
      </PanesDirective>
      </SplitterComponent>
  </div>);
    }
}
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

export default class App extends React.Component<{}, {}> {
  public leftContent(data: any): 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(data: any): 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(data: any): 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="percentage" height="200px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content = {this.leftContent as any} resizable={false} />
        <PaneDirective size='200px' content = {this.middleContent as any} />
        <PaneDirective size='200px' content = {this.rightContent as any} />
      </PanesDirective>
      </SplitterComponent>
  </div>);
  }
}

[Functional-component]

app.jsx
app.tsx
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    function leftContent(data) {
        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(data) {
        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(data) {
        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="percentage" height="200px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content={leftContent} resizable={false}/>
        <PaneDirective size='200px' content={middleContent}/>
        <PaneDirective size='200px' content={rightContent}/>
      </PanesDirective>
      </SplitterComponent>
    </div>);
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App () {
  function leftContent(data: any): 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(data: any): 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(data: any): 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="percentage" height="200px" width='600px'>
      <PanesDirective>
        <PaneDirective size='200px' content = {leftContent as any} resizable={false} />
        <PaneDirective size='200px' content = {middleContent as any} />
        <PaneDirective size='200px' content = {rightContent as any} />
      </PanesDirective>
      </SplitterComponent>
    </div>);

}

export default App;

Search docs

Ask HelpBot

Search docs

Ask HelpBot

Pane sizing in React Splitter component

Set pane size in pixels

Set pane size in percentage

Auto-size panes

Fixed pane