Pane sizing in React Splitter component
30 Jan 202324 minutes to read
Splitter allows you to provide pane sizes either in pixel or percentage formats.
Pane size in pixel
[Class-component]
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]
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;
Pane size in percentage
[Class-component]
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]
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
You can render the split panes without providing the size values. It will split up the sizes automatically.
[Class-component]
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]
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 render the split panes with fixed sizes. Since last pane is a flexible pane, fixed size will not be applied.
[Class-component]
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]
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;