Pane sizing in React Splitter component

5 Mar 202624 minutes to read

The React Splitter component lets you define pane sizes using pixel values, percentage values, or automatic sizing driven by layout behavior.

Set pane size in pixels

To assign fixed pixel values to panes, use the size property in paneSettings. This produces 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

Define pane sizes as percentages to ensure 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 to available space. The component uses a flex-based layout to enable 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

Panes can be configured with fixed sizes in both horizontal and vertical orientations. Even when all panes have fixed sizes, the Splitter treats the last pane as flexible to preserve layout adaptability. Ensure at least one pane remains flexible to accommodate container size 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

How can I help you?

Pane sizing in React Splitter component

Set pane size in pixels

Set pane size in percentage

Auto-size panes

Fixed pane