Search results

Pane Sizing in React Splitter component

14 Apr 2021 / 3 minutes to read

Splitter allows you to provide pane sizes either in pixel or percentage formats.

Pane size in pixel

Source
Preview
App.tsx
App.jsx
index.jsx
Copied to clipboard
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;
Copied to clipboard
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;
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('container'));

Pane size in percentage

Source
Preview
App.tsx
App.jsx
index.jsx
Copied to clipboard
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;
Copied to clipboard
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;
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('container'));

Auto size panes

You can render the split panes without providing the size values. It will split up the sizes automatically.

Source
Preview
App.tsx
App.jsx
index.jsx
Copied to clipboard
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;
Copied to clipboard
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;
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('container'));

Fixed pane

You can render the split panes with fixed sizes. Since last pane is a flexible pane, fixed size will not be applied.

Source
Preview
App.tsx
App.jsx
index.jsx
Copied to clipboard
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>);
  }
}
Copied to clipboard
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>);
    }
}
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('container'));